Web Push Notifications Explained
What are web push notifications?
Web push notifications are notifications that can be sent to a user via desktop web and mobile web. These are alert style messages that slide in at the top or bottom right hand corner of a desktop screen, depending on the operating system, or appear on a mobile device in a manner nearly identical to push notifications delivered from apps. Web push notifications are delivered on a user’s desktop or mobile screen anytime they have their browser open — regardless of whether or not the user is on the website.
The difference between web push notifications and app push notifications
All that’s required to send web push notifications is a website that has web push code installed in it. This means that brands that don’t have apps can leverage many of the benefits of push notifications (real-time, personalized, in-the-moment communications) even if they don’t have an app.
App push notifications are sent via code installed in an app. (Learn more about push notifications from apps on our Push Notifications Explained page.)
The anatomy of a web push notification
Left: An example of a web push notification on a desktop device on an Macbook with a Chrome browser version 58 or older. Right: An example of a web notification delivered to an Android mobile device.
Web push notifications include the following elements:
- Notification Title: Some brands simply use their name here.
- Notification Content: The message sent. Character count varies between browsers. Shorter is better.
- Notification URL: The domain sending the web notification.
- Notification Icon: This can be a logo or any image.
- Browser Icon: The logo of the browser sending the notification. This is included on notifications sent to Apple desktop or laptop computers. This can not be altered or removed.
The elements of a web push notification as it looks on an Apple desktop or laptop computer on a Chrome browser version 59 or newer. Web notifications vary in appearance by operating system and browser.
How web push notifications work
Any company with a website can send web push notifications after installing code (a web-based SDK) from a web push service on their website to enable them. No app is required.
For users, clicking or tapping on a web push notification takes a visitor to whatever web page (URL) the brand has determined.
The web notification opt-in process
Web notifications are a permission-based marketing channel. Before receiving a web push, users have to opt in to receive them.
The opt-in prompt comes from the user’s web browser. This prompt is called a browser-level opt-in prompt, or browser-based prompt.
Brands can handle the opt-in process in different ways with both the opt-in process and the timing of the opt-in ask.
In this image, which was captured on a Chrome browser, the brand has create a “soft ask” for web push opt-in — the yellow bar at the top. If a user indicates in the soft ask that they’d like to receive web push notifications, then the browser-based prompt — the white box in the upper left — is displayed. The user must opt-in to the browser-based prompt to receive web notifications.
Using a “Soft Ask” Opt In
Some display a “soft ask” — explaining the value of receiving web push notifications — first, before the browser prompt. The soft opt-in conveys why a user would want to opt in to receive web push notifications. If a visitor says yes to the soft ask, then they’ll display the opt-in prompt from the browser itself.
This can be more effective for securing an opt-in than just showing the browser prompt without any additional context.
For other brands, skipping the soft ask and just displaying the browser-based opt-in works as well or better. (Note, the soft ask is not a replacement for the browser-based prompt. Users must opt in through the browser-based prompt even if they are first presented with a soft ask.)
Choosing the Timing for Opt In Prompts
The timing of showing the opt-in varies by brand as well. Some choose to wait until a web visitor has visited a certain number of pages before offering the web push notification opt-in— whether they use a soft ask or the browser-based opt-in prompt. Others offer the opt-in upon arrival to the site.
With both the opt-in process and timing, it’s important for brands to experiment to see what approach and timing works best for getting the opt in.
Technical requirements for implementing web push notifications
Brands wanting to implement web push notifications typically work with a web push service. For brands implementing the Urban Airship Web Notify solution, implementation requires:
- HTTPS (secure) website — or, if their website is HTTP, a brand can create one HTTPS page to handle web push registration.
- If executing a “soft ask,” development of a soft ask registration UI.
Browsers and devices that support web push notifications
Chrome, Firefox, Opera and Safari currently support web push notifications.
Notifications vary in appearance between browsers and operating systems. Some notifications use native notification centers, and others don’t — this also varies by browser and operating system.
Web push notifications work on any computer or laptop running a supported browser, whether it is a PC or Mac.
However not every mobile device can receive web push notifications. iOS (Apple) mobile devices do not currently support mobile web push notifications. This means even if an iPhone or iPad has a supported browser like Chrome installed, users cannot receive web push notifications on the device.
Android mobile devices do support mobile web push notifications for users running Chrome, Firefox and Opera on their device.
Types of messages brands are sending with web push notifications
For notification-style messages, brands most often send notes that fall into one of the following categories:
- Transactional: Confirmation of important transactions (e.g. purchase, shipping, delivery, requesting service reviews, etc.)
- Educational: Educating the audience about key events, products or offerings
- Promotional: Promoting special offers or limited time opportunities to drive conversions
- Lifecycle: Welcoming new or returning visitors, incentivizing first purchase, encouraging deeper exploration of the website, thanking social advocates and retargeting campaigns
To see more web push notification examples, access the eBook Web Notifications Inspiration Guide.
Examples of web push notification messages
Here’s a few use case examples brands might send to communicate with opted in web visitors:
- Welcome new users with an offer (“Our welcome gift to you — enjoy 10% off your first order!”)
- Deliver curated picks to retarget users based on behavior (Winter is coming. 5 coats to keep you covered.)
- Abandoned cart notifications (“Your items are waiting — don’t miss them!”)
- Recommendations based on a user’s behavior or preferences (“3 Little black dresses, hand-picked for you.”)
- Upsell opportunities to encourage additional conversion (“Spend $5 more, get free shipping.”)
- Price drop on a favorited or wishlisted product (“Don’t miss out — a fave top of yours is now on sale.”)