This is a complete tutorial on web push notification. By the end of this tutorial, you will have a clear understanding of What is a Push Notification and its usage and benefits. Website Push Notifications has gained popularity due to its ease of use. Many businesses are using website push notifications to re-engage customers and increase revenue.

If you are also looking to use push notifications on the web, you have come to the right place. This tutorial is the only guide you need to understand push notifications for the web and how to use it efficiently.

What Is Web Push Notification?

We all must have heard of Web Push Notifications used in today's marketing. If you have ever wanted to reach out to users on mobile instantly without any app, then use website push notification. To get more clarity, let's try to understand what is web push notification and how it works.

Web Push Notification is the small push messages you receive in your desktop browser or mobile browser.

Push Notification Message will appear on your active browser. That is the most basic and primary use of browser notifications – to engage with users even when they are not on your site. If you have integrated web push notification on your website, you can send push notifications to your subscribers. Web Push Notifications are also called Browser Push Notifications or push notifications as they are delivered on an active browser. You can even build your own push notification tool or use the web push notification service to start push notification for the website.

Before you start integrating push notifications on your website, always remember to avoid vendor lock-in. Check out the guide to install push notifications without vendor lock-in. You can switch vendors any time without loss.

Who Can Use Web Push Notifications?

Web Push Notification is one of the easiest ways to engage with users. Any online website can integrate and use Web Push Notifications. You don't need to build a complete infrastructure. There are many vendors who offer Push Notification services. In today's time push notification on a website is a must to re-engage users efficiently. Any website can use browser notifications to increase re-engagement with users. Moreover, for using browser push on mobile, you do not need any app. Push Notifications will be delivered directly on the browser of both desktop and mobile.

How Web Push Notification Appears On Desktop & Mobile?

Website Push Notification can appear both in the desktop and mobile. However, the appearance of desktop push notification and mobile push notification will depend upon the browser. After opening the browser, you will receive Push Notification from your subscribed website. Depending on your OS, Push Notification will appear on your browser:

  • On Linux OS, Notifications will appear on the top right side of your browser
  • If you have Windows OS, you will receive the push notification on the bottom towards the right-hand side
  • Android OS will receive the push notification on the notification tray

Currently, browsers that support notifications are:

You will receive Notification on the browser only when you subscribe to the same on the website. Currently, Safari on iOS doesn't support Web Push Notifications.

Why Use Web Push Notifications?

Push Notifications are delivered in real-time and appear as an alert on the browser. You can use browser notifications for an array of Marketing activities. Some of the use cases Push Notifications are:

  • Latest news alert
  • Abandoned Cart campaigns
  • New blog post
  • Sale event
  • Flight notifications
  • Score update for sports

Push Notifications are mainly used to deliver information instantly on the user's browser. E-commerce websites have been the early adopter of this tool. Slowly, other industries like travel, blog, media, and medical sites have started using push notification for its ease of use and effectiveness.

There are numerous ways you can use Web Push Notification for your online business.

Are Web Push Notifications and Web Notification the same?

Web Push Notification and Web Notification are completely different. Both notifications appear on the browser, however, they are fundamentally different.

  • Web Notification: It works only when a user is on the website. The user will receive the notification only if present on the website.
  • Web Push Notifications: It works even when the user is not on your site. It is delivered in real-time on the browser and doesn’t depend on which site user is browsing.

Why Should You Start Using Web Push Notifications?

Web Push Notifications is by far the fastest way to engage with customers. You can reach out to customers instantly. Once a user is subscribed, they will get website notifications even when they are on another website. The push notification will appear on their browser. Since push notification appears as an alert on the browser, it's hard to miss by the subscriber. This leads to higher CTR as compared to other marketing tools. Most of the engagement tool works only when the user is on the site, however, browser notifications are delivered even when the user is not on your site.

What are the advantages of using Web Push Notification?

There are many advantages of using Web Push Notifications:

  • A mobile app isn't needed to receive any notifications – Web Push Notification is browser-based and so without a mobile app, you can reach out to customers
  • Easy opt-in for users – Users need not share any personal details. With a single click, the user can subscribe to push notifications
  • Higher opt-in – The opt-in process is very simple as compared to email. The opt-in rates are higher than e-mail. Push Notifications offered up-to 20% subscription rate.
  • Instant delivery – Web Push Notifications are delivered in real-time to the user browser.
  • Increased Engagement – Push Notifications are delivered even when the user is not on site. You can re-engage with the user on any browser.
  • Web Push Notifications derive higher Conversion Rates – Web Push Notifications are delivered instantly on the browser.
  • Less opt-out rate or unsubscription rate – Recent studies have shown that less than 10% of user unsubscribe to push notification in a year

Now let's know and understand Web Push Notifications in-depth and how it works.

How does Web Push Notification work?

To understand how push notification works, we need to know the different stages of push notification. Since it's a browser-based notification, the browser has to support the same for the web push notification to work. There are three stages of sending Web Push Notification:

Seeking permission to send the Push Message

Subscription Pop-up for push notification

The first step in implementing a push notification is to seek the permission of the user to send him a push message and getting a push subscription from the browser. With Subscription Dialog Box or Opt-in box, we ask users permission. A Push Subscription is done with a Push API that gives web applications the ability to receive messages pushed to them from a server. Once Push Subscription is received, the details are saved at the back-end and are later used to send push messages to that user.

Sending a Push Message

The push message is sent to the users via the PushEngage dashboard or through an  API call to a respective browser cloud manager – like GCM, APN, etc. The cloud manager validates and delivers the message to the right browser. The endpoint value in Push Subscription helps you get the appropriate URL to trigger the push message. In short, the push message is sent from your server to web notification service and the message arrives on the appropriate browser.

Push Message arrives on the User’s browser

Once the browser comes online, the push service delivers the message. The browser receives the message, decrypt the data, and sends push event to your service worker.

Want To See Demo Of How Notification Appears?

How Web Push Notification Appears In A Browser

You can easily check the Push Notification Demo on your browser. Click on this link (Demo) to see the demo for Web Push Notification. In the demo notification, you can:

  • Give a new title to push notification
  • Edit the notification message
  • Enter the URL for the notification. When users click on your notification, they will be re-directed to the URL you mention here.

What Are The Different Elements Of Web Push Notification?

What is Web Push Notification

A Web Push Notification comprises of four key elements:

  • What is Web Push Notification Title
    The title is the most crucial part of any Web push message. It catches the attention of the user and urges them to click on your notification. Send engaging titles like Buy 1 Get 1 Free, Last Day Of Sale or any other title to get user attention.
  • What does Push Message mean
    The message should be short, crisp, and direct. It should be able to convey the idea instantly to the user without a second thought. But make sure that the content quality of the message doesn't go weak.
  • What is Website Icon
    Show the icon of the website in the message. It is essential to convey the message confidently.
  • What is Push Notification Image
    Include a large image which is the graphical presentation of the notification message. The image is optional. You can send push notification without an image as well. It is available only for Chrome.
  • Show Call To Action Buttons
    Call to Action or the CTA Buttons is the most crucial element in a Push Notification. The CTA should contain the URL of the landing page so that the user directly lands on the landing page. With PushEngage, you can send multiple Call To Action in a single notification. It is available only for Chrome.
  • Use Emoji In Push Notifications
    Include Emojis in your push notification. Emojis give a sense of personalization to your notification. Push Notifications with emojis show an 85% increase in open rate as compared to notifications without emojis.

How To Start Using Web Push Notification On Website?

Getting web push notifications for any website is very easy. Website owners have to install the JavaScript code of the web push notification service provider on the header section of the website and enable them. Once you install the Push Notification, you can start gathering subscribers and then start sending push notification from your website.

Install Push Notification On Website

In three steps you can go live with web push notification for your website

  • Install the Javascript/installation code Below is the example of the JavaScript code or installation code for PushEngage. Put this code in the header section of your page.
Web-Push-Notification-Installation-Script

Once you put the JavaScript code on your website, do the basic settings to enable Push Notification on your website.

  • Changes in site settings Update your domain name, site logo and site URL
Update Settings for Web Push Notification
  • Subscription/Opt-in Dialog box settings Select the type of Push Notification Opt-In box type. Also, make changes to the opt-in title and message with the call to action buttons.
Subscription Pop-up settings for push notification

That’s all you have to do and you are live with Web Push Notification for your website.

Free trial for push notification

What are the technical requirements for using Web Push Notification?

For Web push notification to work, your site has to be an HTTPS.  Also, the browser you are using to visit the site should support the web push. Currently, Chrome, Firefox and Safari based browser supports Web Push Notifications.

To know whether your site is HTTP or HTTPS, see the below screenshots:

HTTP site for Push Notifications

For HTTP site, the link will look like this: 

HTTPS site push notification

For HTTPS website, you have to install two files: 

service-worker file and manifest. son in the root folder of your website.

How exactly Browser Push Notification works for a non-HTTPS website?

For web push notification to work, it needs an HTTPS website. However, for the non-https website, PushEngage uses a custom sub-domain. For example, your site name is www.pushengage-demo.com and is a non-https website. When you register at PushEngage, you can create a subdomain: https://pushengage-demo.pushengage.com. This way you will have a custom sub-domain which is HTTPS and you can go live with Web Push Notification.

Below is the screenshot which will give you a clear picture.

Opt-in message

opt-in message for web push notification

Intermediate Page

intermediate page for Web Push Notifications

For more details on the Web Push Notification installation, you can check this video link.

How Do Push Opt-in Works in Web Push Notification?

Web Push Notifications are permission-based service. A user has to allow you before you can start sending push notifications. To allow a user to subscribe to your notification, you have to show him the push notification opt-in. After the user clicks allow, you will be able to send push notifications to your subscribers from your website.

Once you integrate push notification on your site and configure the subscription dialog box or opt-in box, it will start appearing on your website.

Configure the opt-in box or subscription dialog box:

  • Op-In Message Select the right message. This is the 1st interaction with your customers. If messaging is conveyed rightly, the user will subscribe to your notification.
  • Op-In Logo Put the logo of your site on the subscription dialog box. It will allow you to connect with the user.
  • Delay The timing of showing the subscription dialog box differs from site to site. Many websites show the subscription box once user stays on the site for some time and some shows immediately. You have to do rounds of tests to see which is the right time.
push notification opt-in

See the below screenshots of different push notification opt-in:

Once a user clicks on the “Allow” button, they are subscribed to your push notification and you can now start sending the push notification to the user.

Are Push Notification Opt-In Single Step Or Two Steps?

Push Notification opt-in can be either a single-step opt-in or two-step opt-in.

Single-step opt-in is available only for the HTTPS website. To enable a single-step opt-in for push notification, you have to put two files in your root folder: service-worker file and manifest.json.

This will allow you to enable a single-step opt-in for your push notification. Below is the single opt-in example. Once a user clicks "Allow", he/she will be subscribed to Web Push Notifications.

single opt-in web push notification

For the non-https sites, the opt-in is in two steps. Once a user clicks on “Allow”, they will be shown an intermediate page. Below is the screenshot of the intermediate page:

double opt-in push notification

Once users click “Allow” to receive a push notification from your site, the user will get subscribed to your push notification.

What Are The Different Types of Push Notifications?

There are mainly three types of Web Push Notifications:

  • Alert based Web Push Notifications
  • Trigger-based Web Push Notifications
  • Segment based Web Push Notifications

Alert based Push Notifications

Alert Based Web Push Notifications

Alert based Web Push Notifications are those generated by the company. As the title suggests, it is sent to inform the user about an upcoming event or sale or any other happening. Eg: A new blog post, a flash sale, limited sale offer, exclusive offers, and sale, etc are known to be Alert based Web Push Notifications.

Trigger-based Push Notifications

Trigger-based Web Push Notifications are those sent based on the actions performed by the users on any website. For example, if a user has registered on a particular website, the site will send him notifications if there is a huge price drop for a particular product. A user would have been looking for the same product for the past few days. He might have abandoned his cart earlier or the product is out of stock. Then, the website can send him notifications to remind him of his abandoned cart or when the product is back in stock.

Segment based Push Notifications

Segment Based Web Push Notifications

Segment-based Web Push Notifications are those which are sent to a particular set of users segmented based on various factors including gender, age, geographical area, buying habits, etc. Sending segmented notifications can increase the click rate as well. Sending notifications based on the purchasing behavior and gender can get you a higher conversion rate.

Examples of Web Push Notifications Messages for Different Campaigns

Using Web Push Notification, you can create multiple campaigns to re-engage subscribers. Below are some of the example of web push messages you can use:

  • Flash Sale: Flat 50% off for the next 48 hours. Hurry before stock expires.
  • Welcome Message: Welcome coupon for you. Use NEW to get extra 10% off.
  • Cart Abandonment Message: Complete your shopping. Use code "ZYH10" to get 10% off.
  • New Launch: Launch offer for 1st 20 buyers. Flat 30% off. Buy Now.
  • Price Drop Alert: Your favorite product is now at 20% discount. Buy before price rises.
  • Inventory Alert: Product is back in stock. Buy before stock expires.

You can also use the web push notification templates to create push messages for your campaign.

What are the top features of Web Push Notifications?

Web Push Notifications have many features that you can use to create different marketing campaigns.

  • Schedule Notifications: You can schedule when you want to send your notifications. This way you will never miss time-critical notifications
  • Drip Notifications: You can create a series of Web Push Notifications to nurture and educate users. This helps in converting leads to customers.
  • Segmentation: Notifications sent to segmented users can result in an increase in open rates and higher click rates as compared to non-segmented users.
  • Customization: Customize your notifications for each segment. You can also include Emojis to make your notification more personalized.
  • Abandoned Cart Notifications: Create an abandoned cart campaign and convert them into customers with Web Push Notifications. Since push notifications are delivered in real-time, it can lead to higher conversion.
  • Price Alert Notification: Customers are price sensitive. Whenever there is a price change of a product, push notification will be auto send to the customers.
  • Inventory Alert Notification: Products can go out of stock when the customer is looking to buy. Update customers immediately, when the product is back in-stock, using web push notification.
  • AB Testing: You may not know whether the image in push notification will work for you or not. Do the AB testing to know what type of push notification performs well and use the same.
  • Local language: With PushEngage you can send push notifications in the native language of the user. Notification sent in the local language stands out and generates a higher open rate. With PushEngage, you can use all the languages that can be captured in UTF-8 characters.

What are the impacts of using Web Push Notifications?

Use Web Push Notifications the right way as a marketing channel and you are sure to get high returns for the effort rendered. Follow the best practices of push notifications and see the impact.

Web Push Notifications drive user engagement rate by 75%

Well, web push notifications are delivered on a real-time basis, so they tend to reap a higher engagement rate than any other marketing channel. It not only enhances customer engagement but also helps in customer retention.

Improve Click Rates

Web Push Notifications derives higher click rates as they show a higher open rate than emails. The click rate for Web Push Notifications is up to 30% when it is only up to 3% for emails.

Increase Subscription Rates

People find it more convinced to register themselves to Web Push Notifications as they need not submit any personal information. This automatically increases the Subscription Rates. You can enable a single-step opt-in for the subscription. It requires a single click and leads to a higher subscription rate.

Boosts Conversion Rates

Using Segmentation and Personalization, one can send notifications to users when they are active the most and on those products, they are looking for. This leads to a higher conversion rate as the notifications are sent to targeted users and so it derives the desired result easily.

Increases Repeat Traffic

Web Push Notifications are delivered instantly on the browser of the customer. It appears as an alert and is hard to miss. This leads to customers clicking on the notification and coming back to your website. With proper strategy and copy, websites can increase repeat traffic by 39% using push.

Push Notification Case Studies

Web Push Notifications has proven to be one of the best re-engagement tools by many online websites. The below excerpt from push notification case study will prove how impactful push notification has been to their business.

Charlton Athletic

It's a football fan club. They were looking for a solution to engage the fan base. Using push notification they were able to 20% subscription rate and 9.6% CTR for web push notification campaign.

Saleduck

It's an online deal website. They were looking for new sources to drive traffic. They got a 400% more open rate for push notification campaigns as compared to the e-mail campaign. "PushEngage is our best converting paid traffic channels" – Domingo Karsten CEO & Co-Founder, Saleduck.

Wicked Weasel

It's an Australian brand focussed on women's clothing. They were looking for new channels to increase sales. Using web push notification they were able to get $2K to $4K sales every week. "We implemented push engage in September 2018. Today in May 2019, we see anywhere from $2000-$4000 in sales per week coming from push notification efforts" – Amanda Hyciek, Digital Marketing Strategist, Wicked Weasel.

ShoutMeLoud

It's one of the top blogs with 1.1 million visits every month. They were looking to increase traffic and revenue for the blog. They started using the push notification WordPress Plugin. Using the drip feature of the web push their conversion rate increased by 10%. Since my blog is WordPress, the integration was super-fast with the plugin. The fine stuff I liked about PushEngage is, they are innovative and they are bringing all the power of email marketing into push notifications. – Harsh Agrawal, Founder.

WholeSumYum

It is one of the leading food blogs. The key challenge faced by Maya Krampf (founder) was to re-engage users efficiently in a cost-effective way. Using web push notification, she was able to achieve a 2X higher view rate as compared to e-mail. In a year, the push subscribers were 1.5X more than e-mail subscribers. "We're also noticing that users coming from push notifications are loyal and tend to stay on the site longer than those coming from social media." – Maya Krampf, Founder.

SuperJeweler

It's an e-commerce website offering the best deals in jewelry. One of the most important challenges was to update the user in real-time. Using Push Notifications, they were able to notify customers instantly. They were able to get 14% CTR for their push notification cart abandonment campaign. "PushEngage helped us retain those customers who are always looking for the deal and keep them coming back for more" – Sonia Urbanski (Email Marketing Manager at Superjeweler)

Web Push Notification has been helpful to all online websites whether its a blog or e-commerce or a deal site. The impact of web push notification is huge. When compared to other re-engagement tools, web push notification offers the best results.

Register For Free Browser Push Notifications

What are the Different Platforms Web Push Notification support?

Web Push Notifications supports integration on multiple platforms. You can use Push Notifications on the Wix, WordPress site, Weebly Site, Shopify Site. The integration of Web Push Notification is very simple. You can check the push notification installation guide which explains in details of integrating Web Push Notifications on different platforms.

You can even use Apps to use Push Notifications on different platforms:

  • Shopify: Use the PushEngage App to start using push notifications on your Shopify store. Installing the Push Notification Shopify app is very simple. In a single click, you can install the app without making any changes manually. All the campaigns are loaded with pre-filled templates.
  • WordPress: It is one of the most common platforms used by bloggers. Use the PushEngage WordPress Plugin to install push notification. Once installed, you can auto-send users about any new article published on your website.
  • Magento: It is a great platform to create websites. Now using the push notification extension you can implement web push on Magento sites as well.

Comparison Of Web Push Notification Service And Email Service

Web Push Notification ServiceE-Mail Service
Easy subscription as user doesn’t have to share any detailsUser needs to enter e-mail id for subscribing
Delivered Instantly to browserDelivered to inbox
Notification appears whenever user opens browserUser has to login to his email to view the message
Shows in browser even when user is not on the websiteAppears only in the inbox of the email used for subscription
Notifications always get deliveredEmails may get delivered to spam

Performance Comparison of Web Push Notifications and Email

Comparison on Web Push Notifications and Email

Which Browsers Supports Web Push Notifications?

DeviceOperating SystemBrowser
DesktopWindows
MAC (OS)
Ubunto
Chrome, Firefox, Safari, MS Edge
MobileAndroid
iOS
Chrome, Firefox, Safari, MS Edge
TabletAndroid
Windows OS
Chrome, Firefox, Safari, MS Edge

How To Create The Most Effective Web Push Notification?

We have done a lot of case studies and created resources for you to know which are the best practices to follow.

Best Practices to follow to make an effective Push Notification

  • Use of Rich Push Notification
  • Eyeing the right time to send a notification
  • Personalization of notification
  • Notification with proper CTA buttons
  • Send notifications based on the time availability

Guide to improve your Web Push Notification results

Now you know what is web push notification and its benefits. Its time to integrate the browser notifications on your website. You can test your web notification performance against the benchmark to know how well you are doing. However, before you integrate, evaluate the push notification service provider and then choose the one which suits you.

PushEngage For Chrome Push Notifications
Author

Working towards making PushEngage the best platform for Web Push Notifications.

8 Comments

  1. Thank you for sharing good information. Very Nice Article it helps me a lot to how to use Push Notification in our blog.

  2. This is a great information you have share, As I’m newbie into Blogging, it can surely make a difference. Thank you so much

  3. can i send web push notifications when a user hits a specific site? for ex. my website sells socks; when a web push opted-in user visits amazon i trigger a web push notification to them. i think not, but thought i'd check anyway.

    also i thought a site needs be be https to enable web push notifications. can i still enable web push notifications on a http site by creating a https page?

  4. Ishan Lalwani Reply

    Done everything but still I'm not getting this things for my blogger's blog.

  5. one-time offer Reply

    you're actually a just right webmaster. The website loading speed is amazing.
    It kind of feels that you're doing any distinctive
    trick. Moreover, The contents are masterwork. you have performed a wonderful task in this subject!

Write A Comment