What Is Web Push Notification And How It Works?
What Does Web Push Notification Mean?
Web Push Notifications are small push messages from the websites where you have subscribed for push notifications. Whenever you open your browser either on desktop or mobile, you will receive the push notifications from those websites even when you are not on their websites. That is the most basic and primary use of push notifications – to engage with users even when they are not on your site.
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, so that you can switch vendors any time without loss.
What Are The Different Elements Of Web Push Notification?
A Web Push Notification comprises of four key elements namely the Title, Message description with landing URL, Icon and banner image and finally the Call to Action buttons. The banner image and the CTA buttons are available only for Chrome.
- Push Title: Title is the most crucial part of any Web push message as it catches the attention of the user and urges them to click on your notification. Send engaging title like Buy 1 Get 1 Free, Last Day Of Sale or any other title to get user attention.
- Push Message: The message should be short, crisp and direct and 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.
- Website Icon: The icon of the website and a banner image to show the product you are talking about in the message is also essential to convey the message easily.
- Notification Image: Include a large image which is the graphical presentation of the notification message. The notification image is optional. You can send push notification without notification image as well.
- 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 single notifications.
- Emoji: Include Emojis in your push notification. Emojis give a sense of personalization to your notification. Push Notifications with emojis show 85% increase in open rate as compared to notifications without emojis.
How Web Push Notifications Appears In 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 new title to push notification
- Edit the notification message
- Enter the URL for the notification. When users click on your notification, they will be directed to the URL you mention here.
How does Web Push Notification work?
There are three stages of sending Web Push Notification: Seeking permission from the user for sending notifications, the API call that triggers a push message to your user device and the service worker file that receives the push message once it arrives on a user device.
- Seeking permission to send the Push Message: The first step for 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 PushEngage dashboard or through an API call to a respective browser cloud manager – like GCM, APN, etc. which 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 Push service and the message arrives on the appropriate browser.
- The 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
How To Start Using Web Push Notification Service?
How to Install Push Notification?
In three steps you can go live with web push notification for your website
- Changes in site settings: Update your domain name, site logo and site URL
- 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.
That’s all you have to do and you are live with Web Push Notification for your website.
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 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:
For HTTP site, the link will look like this:
For HTTPS website, you have to install two files:
service-worker file and manifest. son in your root folder of your website.
How exactly it works for a non-HTTPS website?
For web push notification to work, it needs HTTPS website. However, to make it work for the non-https website, PushEngage uses 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 sub domain: 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.
For more details on Web Push Notification installation, you can check this video link which gives complete details and the steps for installing Web Push Notifications on a website.
How do the 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. When configuring the opt-in box or subscription dialog box:
- 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.
- 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 what is the right time.
See the below screenshots of different push notification opt-in:
Once a user clicks on “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 single step opt-in or two-step opt-in.
Single step opt-in is available only for HTTPS website. To enable 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 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.
For the non-https sites, the opt-in is two steps. Once a user clicks on “Allow”, they will be shown an intermediate page. Below is the screenshot of the intermediate page:
Once user 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: 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: 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. The users would have been looking for the same product for the past few days. Or if a user had left a product in his cart and forgot to purchase it or he couldn’t find a product he was looking for, the website can send him notifications to remind him about his abandoned cart or when the product is back in stock.
Segment based: 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 higher conversion rate.
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, 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:
- Don’t need mobile app to get any notifications – Web Push Notification is browser-based and so without mobile app, you can reach out to customers
- Easier opt-in for users – User need not share any personal details. With single click, 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.
- 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 unsubscribe rate – Recent studies have shown that less than 10% of user unsubscribe to push notification in a year
What are the top features of Web Push Notifications?
Web Push Notifications have many features which 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 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 click rates as compared to a notification sent 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 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.
- Local language: With PushEngage you can send push notifications in the native language of the user. Notification sent in local language stands out and generates 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.
- Web Push Notifications drive user engagement rate by 75% – Well, web push notifications are being delivered on a real-time basis, so they tend to reap higher engagement rate than any other marketing channel. It not only enhances customer engagement but also helps in customer retention. Thus the open rates can be increased up to 700%!
- Improve Click Rates – Web Push Notifications derives higher click rates as they show 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.
- 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 higher conversion rate as the notifications are sent to targeted users and so it derives the desired result easily.
What are the different platforms Web Push Notification support?
Web Push Notifications supports multiple platforms. You can use it on WordPress site, Wix site, Weebly Site, Shopify Site. The integration of Web Push Notification is very simple. You can check out the below videos on the integration of PushEngage on different platforms:
- Install Web Push Notifications On Wix Site
- How To Install Push Notifications On HTTP WordPress Site
- Installation On Site Based On Blogger
- How to install PushEngage in Shopify
- Integrate On Site Based On Weebly Platform
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.
Comparison Of Web Push Notification Service And Email Service
|Web Push Notification Service||E-Mail Service|
|Easy subscription as user doesn’t have to share any details||User needs to enter e-mail id for subscribing|
|Delivered Instantly to browser||Delivered to inbox|
|Notification appears whenever user opens browser||User has to login to his email to view the message|
|Shows in browser even when user is not on the website||Appears only in the inbox of the email used for subscription|
|Notifications always get delivered||Emails may get delivered to spam|
Performance Comparison of Web Push Notifications and Email
Which Browsers Supports Web Push Notifications?
|Chrome, Firefox, Safari|
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
You can check the below articles which can guide you to improve your Web Push Notification results:
- 8 Web Push Notification Tricks You Need To Start Right Now
- 5 Different Types of Push Notifications That Users Enjoy In Real
- 7 Mistakes You Should Stop Doing While Sending Web Push Notifications
- 3 Reasons why marketers should use Mobile Browser Push Notifications
- 4 Ways to Automatically Segment Your Users For Personalized Web Push Notifications
- How to Send Push Notification Messages that Really Work?
- How to Unsubscribe from Push Notifications in Chrome and Firefox
- Drip Campaigns and Autoresponders For Web Push Notifications
- How to Configure a Firebase Cloud Messaging Key & Why You Should Use FCM API Key
- Abandon Cart Push Notification – A Must Have for E-commerce Sites
- How to Go Live With Web Push Notification Using PushEngage in 3 Easy Steps
- Guide to Implementing Web Push Notifications, Without a Vendor Lock-in