Getting Started With Web Push Notifications

A Definitive Guide To Understand How Web Push Notifications Work
START YOUR FREE TRIAL
VIEW PRICING

What Are Web Push Notifications?

Web Push Notifications or Browser Notifications are notifications that your website visitors can opt-in to receive to stay updated without installing your app. These clickable rich content messages can be sent to users’ devices by a website or a web app. 

Web Push notifications can be delivered to your user's device (mobile or desktop) even when the user is not on your website. These notifications can only be sent to users who have opted-in to receive these notifications. 

Web push notifications are supported by Chrome, Firefox, Safari, Opera, and Edge on Desktop and by Chrome, Firefox, Opera on Android Mobile. It is important to note that iOS does not support web push notifications yet.  

web push notification experience building and engaging audience

What is the user's experience of web push notifications?

One of the most compelling reason for installing mobile apps, is because users could stay updated with the the latest and the greatest - thanks to push notifications. Not any more. Better user engagement on the web is one of the fundamental reason why web push notification were introduced in the first place. It is for this reason, web push notifications are used heavily by publishers, bloggers, online merchants, to deliver new updates, reminders in a timely fashion. 

Where do these notifications appear on desktop and mobile?

Web push notifications are delivered even when the user is not on the website. On Desktop, these notifications are delivered to the browser, right next to the taskbar.

 

Push Notification Experience on Desktop

 On Desktop, all the browsers support push notifications across all operating systems, including Safari, Edge, Chrome, and Firefox. The overall push notification opt-in experience is significantly different as compared to mobile. The experience also varies as per the operating system. For instance -

  • On OS X - Web push notifications are delivered directly to the Notification Center on the top right of your screen.
  • On Windows & Linux - These notifications are delivered to the Action Center at the bottom right of the page. 

Push Notification Experience on Mobile 

On Mobile, web push notification support is limited to Android devices only. Chrome, Firefox, Opera, Samsung Internet Browser are some of the browsers that support web push notification api. These notifications, on mobile are delivered directly in the notification tray. Users can pull the notification from the try, swipe to dismiss or click and engage with the content. Over time, Chrome has rolled out updates making the opt-out experience easier for the user. Mobile push notifications also enjoy a high click through rate.

It is important to note that Apple is yet to support web push notifications on iOS. Read this to know more about iOS push notifications and stay up-to-date on the status. 

 

web push notifications-on-Desktop
web push notifications-on-mobile

Why do marketers use Web Push Notifications?

Web push notifications are used by marketers to build, engage, and retain their audience. Businesses across categories are increasingly relying on web push notifications as a solution to build and engage their audience. Media publishers now heavily use web push notifications as a communication channel to engage their audience. The primary reason for this adoption is also the plummeting performance of email, SMS, and display ads.

Just like native app notifications, web push notifications are meant to facilitate a timely flow of information. To subscribe or opt-in to these notifications, users are not expected to download and install an application. Users can simply subscribe to these notifications by clicking on the Allow button on the permission prompt.

For the last few years, the adoption of web push notification has shot through. And rightfully so. As a last-mile communication, web push notifications enjoy disproportionate visibility. That’s means CTRs between 5% - 15% - extremely effective and powerful.

Editors, digital marketers, SEOs, retargeting experts - all of them love using web push notifications to drive their marketing flywheel. In effect, there are 3 ways to use web push notifications across your marketing funnel.

Content-Distribution


Content Distribution

Content distribution is Kingmaker. Use push notifications to update your audience about the latest and the greatest - new articles, podcasts, video content, social posts, videos.

Retargeting-4


Retargeting

Marketing is all about converting users who abandon your website into opportunities. Push Notifications are cut out for retargeting campaigns.

Retentionicon


Retention

There is no such thing as forever in marketing. Your customers, loyal readers, everyone needs to be engaged consistently and reminded about you and your brand. Push notifications are perfect for that.

How web push notifications are different from app push notifications?

  • Native app notifications can take full advantage of the device features - the camera, GPS, accelerometer, compass, contact list, whereas web push notifications can’t tap into any of these features yet.
  • As Native apps can only be installed on tablets and smartphones, native app notifications are limited to these devices only. Web push notifications on the other hand can be used to reach users on Desktop as well.
  • Native app notifications support rich media - images, videos, gifs, audio, and other interactive elements. Web push notifications as of now, only support large images (only on Chrome 56 and above).

Anatomy of a Web Push Notification

There are 6 key elements that constitute a web push notification - Title, Description, Landing Page URL, Icon, Banner Image, and Call To Action Buttons. You can also make use of emojis in web push notifications to express yourself better.

It is also important to understand browser-specific features of Web Push Notifications like Banner Image and Call To Action buttons that are only available for Chrome.

Icon

Adding your logo helps users in building brand recall.

Website URL

The website domain which has sent the notification.

CTA Buttons

You can add up to 2 Call to Action (CTA) buttons. These buttons can be used to trigger different actions.
web push notifications anatomy mobile

Title

An equivalent to the subject line in an email. It should be catchy enough to grab the attention of the user.

Description

This is used to round out the details in the headline and give more reason to click on the notification.

Banner Image

A contextual banner/large image on your notification will increase your chance of getting that click.

Free Guide

How Web Push Notifications Appear For Your Users

The way notifications appear and look, changes with different browsers, OSs, and devices. Know how your users will view your notifications in this Notification Preview Guide.
ACCESS THE GUIDE

Starting Marketing Using Web Push Notifications

Build a delightful subscription experience and build your own marketing list to whom you can reach out to whenever needed. Get to know your audience better and reach out to them with relevant notifications and deliver the promised experience. Engage the users on the go at a lightning speed and bring them back to your website. A perfect addition to your marketing stack to build, engage and retain your audience.

Building-audience


Building Audience

Converting your site visitors into an audience that you can engage with.

Understanding-Audience


Understanding Audience

Understanding user behavior to help engage with them contextually.

Engaging-audience


Engaging Audience

Automation so that editors and marketers can focus on their craft. 

Enabling Push Notifications On Your Website

START FREE TRIAL

Setting up web push notifications on your website is a fairly straightforward process. The integration process requires a service-worker that needs to be placed on a specific path and a javascript library which needs to be added to the website pages. Given the popularity of web push notifications, all major platforms offer either ready to use plugins or third-party apps.

While you set up your push notifications, follow this very simple checklist below.

HTTPS Only

To implement web push notifications on your site, you must ensure that you have SSL encryption

Audience Ownership

Ensure that your users are subscribing to your domain only and not some other website

Progressive Web App

If you have already have a PWA, ensure that you are updating the existing service worker

Browser and OS Support

Web push notifications are now supported by all browsers except iOS

Cracking Permission UX To Build Your Audience Quicker

Ace the permission prompt and start clocking more subscriptions. There is more to a permission prompt than just asking the users to subscribe. Nail the first step of owning your own audience.

web push notifications best practice prompt scroll

Asking At The Right Time

Don't bombard the user as soon as your website loads. Give them time to browse and prompt them either after they have spent some considerable amount of time on your website, on a particular scroll, or if they have gone through a certain number of pages.

Giving Context To User

Make use of non-native prompts to customize your notification prompts to tell the reader exactly what they can expect if they agree to receive notifications from you. You can also use page-level personalization and create different prompt messaging for all your website pages.

Delivering The Promised Experience

Sticking to what you promised is all part of delighting the users. Once they are part of your marketing list, make sure you give them exactly what they subscribed for. Send relevant and contextual notifications and keep users invested.

Interested in evaluating iZooto? Check out pricing →

 

Best Practices for a great permission UX


Focus on the timing

Most of the marketers commit the mistake of asking permission on page load time. This is not an ideal experience and impacts the opt-in rates adversely resulting in more users actually blocking than allowing for notifications.

  • Delay the prompt
    Don't overwhelm the user by displaying the prompt as soon as they land on the page. Google Lighthouse (opensource for improving the quality of web pages) has clearly mentioned that it by default flags pages that request notification permissions with page load.
  • Show on certain % of scroll 
    Make sure the user has got some value out of your site before showing them the prompt. Once the users have scrolled to a certain point on the page, then ask them if they would like to receive notifications from you.
  • After they go through a certain number of pages
    Let them go through the website, see if they like what they see, get a feel of the website, what they can expect from your brand before you ask them to subscribe. 
  • Show prompt in subsequent visit
    You can also think of displaying the prompt on their next visit. Users coming back to your site to consume your content shows intent. And your notifications can help them in being updated in real-time.


The user should show intent before a site asks for permission


Prompt when the users themselves show an interest in receiving notifications from you. Show them the prompt for back-in-stock alerts on an out of stock product page, or delivery updates on the product they have purchased, or if there is a sale going to start you can ask them if they want to be reminded before the sale starts, or even prompt for flight updates so that the users can to be kept in loop.

 

news-1news-2news-3

Using a custom opt-in prompt

Publishers can use their own custom opt-in prompts which resonates with their website to trigger a sense of trust and favorable impression. Most push notification service providers provide a wide range of customizable options where you can play around with the logo, text, and color.

The two-step subscription process also makes sure that the users do not accidentally click on ‘Allow’ or ‘Deny’. A custom prompt also has an additional value. It allows you to explain the value of enabling web push and gives you the option of prompting again if the user declines. This also becomes essential with Chrome 80 update making sure that notifications prompts do not go silent from your end. 

 

web push notifications prompt on intent web push notifications prompt on intent native prompt

Example of a bad permission UX

 Bombarding users with multiple prompts can leave them annoyed especially when it is on page load. The example below shows a web push notification prompt and an email prompt being displayed at the same time, leading to an overwhelming experience. 

 

web push notifications bad experience

 

Permission-UX-Report

Permission UX Report

Create A Delightful Subscription Experience

 
On February 11, 2020, Chrome released the Chrome UX report that aggregates data from over 30,000 websites to help us gain a better understanding of the allow rate, block rates, dismiss rates, and ignore rates that websites receive.

We analyzed 535 websites to know exactly what worked; looked at their subscription UX, opt-in rates, block rates, dismiss rates, the copy on the prompt that websites to learn what works and what doesn't. We unearthed important findings that will help you figure out how you can create a delightful subscription experience.
DOWNLOAD REPORT
Subscription permission UX report video

 

Building Audience Segments To Understand The Audience Better

Reach out to the right audience with contextual notifications by creating different audience segments. Gain a better understanding of your audience, get to know them like the back of your hands; the device they use, their location, what they like, their interest and so on, to make your notifications as relevant as possible. Which also translates to more clicks, and more repeat traffic on your website.

Demographic

Segment users based on age group and gender to reach out to them with specific notifications. For example, an article on retirement plans will make more sense to someone in the age group of 50+ rather than someone who is in the '20s. 

Device

Segmenting based on the device makes it possible to send a notification on the device they would likely be using at that time. For example, notifications going after 7 PM can be sent on the mobile, since the user might not be on the desktop.  

Location

Reach out to users with updates specific to their county, state, or city to gain more interest and encourage clicks. We as humans engage more with articles that address the happenings around us.

web push notification features

User Behavior and interest

Understand how users behave when they are on your website. Capture the user's interests, the page they usually visit, the categories they browse, the genre of articles that they read, kind of videos that they watch to send them relevant notifications. Notifications based on behavior and interest are observed to get higher clicks.  

Timezone

Push out notifications to users keeping their timezone in mind. Tap the right marketable moment, reach out to them at the right time, and engage better. No more reaching out to users at the wrong time! 

Hyper-local

Create segments of users and send them local content. Reach out to the right audience with the news that interests them. For eg, a notification about a carnival in London will make more sense to people living there.

Language

Address users with the language they are comfortable with. You can also stick to the language your publication is in, to maintain brand consistency and reach out to users in the language they prefer. 

Free Resource

Audience Segmentation Framework

A list of 45+ segments gathered over 3 years that have given our customers amazing results. Make use of this resource and get your segmentation game rolling.
GET THE SEGMENTS

Ace Audience Engagement 

Send contextual notifications to the right users at the right time and bring them back to your website. Engage with your audience like never before and gradually build a loyal audience base.

personalized web push notifications


Personal notifications

Make use of personalization tokens to send notifications to a specific user, addressing a specific event. For example, a notification can be sent to a user whose subscription is about to expire.

web push notifications sent to group


Group notifcations

Reach out to a particular audience with relevant notifications. Create different audiences based on user behavior and user attributes such as device, country, age group, gender, etc.

web push notifications to to all


Mass notifications

Push out a mass notification to notify your entire audience base in one go. Notify everyone at the same time at lightning speed.

Role of web push notifications in marketing

Engage, retain and build a loyal audience with web push notifications. There are different ways web push notifications can be used to engage and bring users back to the website. Here are few use cases to inspire you to create amazing notifications to reach out to your audience-

How do Publishers use Web Push Notifications?

There are different ways publishers can use web push notifications. Publishers can send breaking news updates, inform users about a new article, or even go ahead and remind them to finish an incomplete read. Here are a few use cases to inspire you to create amazing notifications to reach out to your audience.  

  • Welcome Push Notification

    Schedule a personalized welcome notification who users subscriber to your notifications

  • Recover Abandoned Tabs

    A slight nudge of a personalized notification can be a perfect reminder for these distracted users

  • Recover Abandoned Videos

    Send out a gentle reminder for a video they were watching but left halfway

web push notifications example for publishers
Recover-Abandoned-Tabs
Recover-Abandoned-Videos-

 

 

How do Ecommerce Businesses use Web Push Notifications?

Ecommerce merchants can use web push notifications to engage and retarget users effectively, and make more sales. You can reach out to specific users who have abandoned their cart, added to their wish list, and nudge them to convert. Here are a few use cases that will inspire you to create notifications that convert. 

  • Retarget Abandoned Carts

    Trigger personalized push notifications to users who abandon their shopping cart

  • Engage Dormant Users

    Marketers can now use notification templates to bring back dormant users

  • Retain Existing Customers

    Delight your customers with timely delivery alerts, discounts, and more

web push notifications example for ecommerce
Engage-Dormant-Users
Retain-Existing-Customers

Automate your notifications
and get more done

Set web push notification campaigns on autopilot and take out more time for other things that you have on your pipeline. Set it up once and engage users even while on vacation. Avoid the mad rush, save time, and effort just by automating your notifications in advance.

Scheduled-notification-3

 

Scheduled Notifications

Set a notification to be delivered on a future date in advance. Scheduling a notification helps you save time and avoid scrambling at the last minute.

Reccurring-2

 

Recurring Notifications

Push out a notification on a periodical basis to reach out to users repeatedly. These will reach out to the users on recurring basic, keeping them engaged.

Drip-2

 

Drip Notifications

Set a series of notifications to be sent one after the other at your chosen time. Keep users engaged without having to manually send the notification every time.

Triggered-2

 

Triggered Notifications

Send notifications on specific actions the user takes. Set triggers and reach out to them at the best marketable moment and encourage them to take the desired action.

Must track push notification performance metrics

Tacking the performance is essential. Only when you track can you set a benchmark and double up on that. Here are the push notification KPIs you need to be measuring-

Total subscriber base 

The number of subscribers you have is the audience you own. The more you build an audience, the more people you have in your marketing list to reach out to whenever you want to.

Opt-in rate

Track the number of users who view and who actually end up clicking on allow. The block rate, people ignoring the notification prompt and dismissing it also becomes critical. You need to track the audience growth, the pace at which you acquire new subscribers.

Click-rate 

Track the number of people who click on your notifications. Try out different segments to see what works best. The number of clicks ultimately results in sessions on your website, which means more repeat traffic.

Conversion metrics

E-commerce merchants track conversion, publishers track social share, ebook downloads, video watch time, and so on. Keep tabs on how web push notifications help you achieve this.
Must track push notification metrics

Interested in evaluating iZooto? Check out pricing →

Results-background

1.3
Avg no. of prompts for users to click Allow
 

1.34
Avg no. of prompts for users to Block
 

4-5%
Opt-in rate
on Desktop

7-11%
Opt-in rate
on Mobile

Build vs Buy

Should I Build My Own Solution Or Use A 3rd Party Service Provider?

There are a couple of points to keep in mind before taking that “Make or Buy” decision. Building a web push notification platform will, in fact, make it a second product altogether within your core business - a product that demands continuous resources to - 

  • Develop the solution
  • Test and release the product
  • Fix the bugs
  • Ensure security
  • Provide ongoing support and maintenance
  • Keep in sync with the technology updates

When making that rather important “Make or Buy” decision, ask yourself - are you ready to put in that amount of resource, time, and money? Your sheer focus rightfully needs to be spent on your core business/product, which, as we all know pretty well, isn’t web push notifications. So why not let the “others” take care of it, the ones for whom building web push notifications is the core product. They’ll help you do a much better job at it, don’t you think?

Essential features of a Web Push Notification Platform

WEB-Push-ECompliance-and-Data-Securityxplained

Compliance and Data Security

Compliance with data protection and privacy laws such as GDPR for EU and CCPA for California is critical for businesses. You are putting an incredible amount of time, and resources to build your business, why let it lapse with this one detail. Your web push notification platform should provide both you and your users an easy way to access, modify, and delete their data.

Permission-UX

Permission UX

Your websites push notification subscription UX decides whether users will allow for notifications or not. Especially after Chrome 80, permission UX has become extremely important. Your web push notification platform must allow you to create a subscription experience that does not interrupt the user journey. You should be able to design a stellar permission UX on both mobile and desktop. 

Audience-Segmentation

Audience Segmentation

Spray and pray marketing is dead. It is important to understand your audience on the basis of what they are doing on your website, what they like, what they don't like, and use that information to offer them only relevant content. There are a number of ways and methods to segment your audience - by device, by location. by user behaviour, recency of their actions et al. A good platform will help you to segment audience using these and more.

Push-Notification-Deliverability

Push Notification Deliverability

Push notification subscriber list grows at a 10X pace compared to email. Delivering content to your audience in time makes all the difference in performance. Your push notification platform should be able to deliver notifications to your audience at a lightning speed - no matter the size of your list. Reliable and scalable.

Integrations

Integrations

An average marketer today users over a dozen software products on a daily basis. Ready integrations with popular platforms such as - WordPress, Zapier, Google Analytics can not only help you in getting started easily but also make daily operations a breeze. Make sure that the push notification platform allows for seamless integrations with your favorite platforms.

Automation-and-Personalization

Automation and Personalization

Marketing teams are almost always overwhelmed. A good web push notification platform would save time by enabling them to automate audience engagement by setting up workflows, drip campaigns, or welcome notifications. A great push notification tool would allow marketers to set up retargeting workflows. The ability to personalize your push notifications would step your marketing game up a notch.

Get Started

We help companies and marketers save time and generate more leads via drag and drop HubSpot COS conversion focussed templates.
START FREE TRIAL

Get Our Latest Updates

Join over 25,000 in beating the failure of strategies by following our blog.

Content Amplification Guide For Publishers

on Jul 27, 2020
By Luke Heneicke

The A-Z of Programmatic Advertising: Key Terms & Acronyms

on Jul 21, 2020
By Ben Morrisroe

Flywheel Marketing Framework For Beginners

on Jun 19, 2020
By vivek

Publishers Need A New Playbook To Engage Their Audience In 2020

on Jun 15, 2020
By Neha Tanwer
EXPLORE MORE
Questions icon

Questions?
Switch to iZooto

Using Push Notifications?
one-finger-tap-gesture-of-outlined-hand-symbol

Need a Product Tour?
Company
Product
Customers
Learn