Do you want to know Web Push Notifications and how it works? 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 web push notifications 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?
Web Push Notification is the small push messages you receive in your desktop browser or mobile browser.
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.
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. 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.
What Is Browser Push Notifications?
Web Push Notifications is based on browser, so it is also called Browser Push Notifications. Push Notifications are delivered only on the browsers. If the browser is closed, the notification will not be delivered. All the push subscription happens on the browser. If you open a completely new browser (e.g in chrome you can add new browser), then you will not receive any notifications. You will only receive notifications when you subscribe to the website on this new browser. Since the entire web push notification framework is based on browser, it is also known as browser push notifications.
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. Browser 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 push 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?
Do you want to know how exactly web push notification works? To understand how push notification works, we need to know the different stages of web push notification. Since it's a browser-based notification, the browser has to support the same for the web push notification to work. How do you get notifications from a website? To understand how notification comes from website to your browse, you need to understand the process behind it.
There are three stages of sending Web Push Notification:
Seeking permission to send the Push Message
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 Web Push Notifications Demo?
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?
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?
Install Push Notification On Website
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. If you do not see the push notification optin on your site, do a round of testing on push notification. You will know if there is any issue with your web push installation.
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:
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 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.
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.
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.
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:
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 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 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?
- 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.
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.
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.
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.
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.
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.
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.
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 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, MS Edge|
|Chrome, Firefox, Safari, MS Edge|
|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
- 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
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 Many service providers are nowadays offering free push notification services. However, a free push notification is not worth it. Go for the best push notification service and that is PushEngage.