How to Send Web Push Notifications on Chrome and Firefox

Unless you have been living under a rock for the past few months, you would have noticed that many websites (including DigitalDeepak.com) ask you permission to send browser-based notifications.

These are called web push notifications and are similar to the app-based push notifications that you get from different apps on iPhone and Android phones. In this article, I am going to discuss how to send web push notifications from your blog or website. We will also discuss the best practices in push notifications and the pros & cons of this communication channel.

How Does it Work?

If you enable push notifications for your website, visitors to your site will see an announcement like this on their browser. Push notifications mostly work on Chrome and Firefox. Safari and Opera browsers have limited support and only a few services have it.

In Chrome, this is how the permission request looks. If the visitor clicks on ‘Allow,’ then you have permission to send a notification to that user. I am using the tool called MoEngage for to enable this. MoEngage supports Chrome and Firefox as of now, with support for other browsers coming soon.

Your visitors need not be on your site to get the notifications! Even if the browser is running in the background, your subscribers will receive this notification if they have subscribed to you. If they click on it, the URL will open on their browser and they will be able to view your web page.

There are many tools and services which help you send push notifications. I am using MoEngage because they have advanced segmentation capabilities that many others do not have.

HTTPS and HTTP Websites

Browsers allow only HTTPS websites to send notifications. But you can send notifications even if your blog is not on HTTPS. Web services create a subdomain for you on HTTPS and let your website visitors subscribe to that.

My blog digitaldeepak.com is not on HTTPS, so I use https://digitaldeepak.moengage.com as the URL to which people subscribe to.

Note that when you go for a subdomain like this, you will not be able to move your subscribers away from your service provider. Because if you choose to use another push notification service, the subdomain that you have there would be different and users would need to subscribe or opt-in again.

If you want to have portability of subscribers, then create an HTTPS subdomain for yourself, or make your entire website or blog on HTTPS.

How to Send Web Push Notifications

Most of the service providers have a simple interface from which you can trigger these notifications. In MoEngage, I click on Campaigns and create a new campaign targeted at all my subscribers.

Article Update: This very article was promoted on push notification earlier today. This is how I created the message first.

After I created the push notification and sent it to all my users, this is how it showed up on Chrome browsers.

And this is how the campaign performed. Look at the CTR I’ve got from this notification!

10-15% is the email open rate that you get when you do email marketing and you will get 3-5% CTR with emails. Here, the CTR is more than the open rate of emails 🙂

As soon as I sent the notification, I checked my Google Analytics real time stats. In general, clicks from any source will not have a high retention rate. Only a small % of people who click a link will remain on the website to read the article for more than a minute or two.

Though I am yet to do the analysis, I can feel that the engagement and retention from web-push are higher than clicks from other sources such a Facebook page or content recommendation engines.

Guess how many real time visitors I got on this page after I sent the push notification. Here’s a screenshot from my Google Analytics account…

[sociallocker id=”3653″]

[/sociallocker]

In the later part of the article, I have explained how to sign up for MoEngage and install it for your website.

The Best Time of the Day to Send Push Notifications

In my experience, sending a push notification works best when users are active and online during the day. This way, your notification will not compete with several other notifications from other websites.

If you send a notification when users are not online, they will receive a bunch of notifications it after they open Chrome or Firefox. Your notification will get lost in the crowd, and the CTR will go down. So sending a notification on a weekday, around 11 am or around 4-5 pm works best for getting the highest engagement.

There is another unique feature in MoEngage. Sherpa, a machine learning algorithm learns the best time for each user to receive notifications. When you send a notification, all users do not get the notification at the same. Instead, each user gets a notification at the best time for them! Time optimization is only enabled for Smart Trigger Campaigns as of now, but it will soon be available for all campaigns.

Downsides of Web Push Notifications

Push notifications are very intrusive and distract the users while they are doing something. So do not send many notifications just because you can. Send only relevant notifications to your subscribers. I recommend sending notifications based on specific website activities such as viewing certain pages or doing specific actions on the site. When the notifications are relevant and targeted, it creates a good experience for the users.

Another downside of push notification subscription is that they are restricted to the browser that the user is using. If users change their computer or reinstall their OS, you will not be able to reach the same users again via push notifications. Considering that we all upgrade computers once in a few years, you have to note that web push subscriptions have limited shelf life. However, it is not the same for mobile based apps.

Email subscriptions have a longer lifespan because people do not change their primary email IDs for years, if not decades. Push notifications are great if you have a sizeable audience and want to engage them frequently. But just like building a retargeting audience on Facebook Ads and other channels, the engagement is highest only for the audience who have subscribed in the last few months to a year.

How Users Can Unsubscribe from Notifications

In each notification, there is a settings icon that users can click. Once they click on this, they will see a list of websites from which they have allowed notifications to be sent to them. This page can also be accessed via going into the browser settings manually.

In Chrome, internet users have to go into Advanced Settings > Privacy > Content Settings > Notification Settings. If they want to unsubscribe, they have to change the status from Allow to Block.

Since there is no way to unsubscribe with one-click from the notification itself, users will not unsubscribe unless they absolutely have to opt out from your messages. It’s not as easy as clicking an unsubscribe link in an email! Push notifications have great power, but with great power comes great responsibility 🙂

Getting Started with Web Push on Your Website

Now that you have got a fair idea of how push notifications work, let’s have a look at how you can sign up for a service and enable it for your blog. In this blog post, I will show you how you can get started with MoEngage.com. The steps are fairly easy and within 15 minutes, you can start gathering subscribers.

First, Click Here to sign up for a free account at MoEngage.

Pricing: Their service is free for the first 5,000 subscribers! After that, you pay $125 a month for 25,000 subscribers and $250 a month for 50,000 subscribers.

They will charge you only for active users – users who haven’t unsubscribed from your notifications. So you are paying only for an active subscriber base.

After you sign up, you should verify your email ID. Once verified, login into the system with your username and password.

Click on Start Integration and go to the next page.

In this case, I will be showing you how to enable push notifications for the web. But they also have push capabilities for iOS and Android apps!

Click on Fill Default to generate a GCM Project Number and GCM API Server Key.

If your blog is not on HTTPS, create an HTTPS sub-domain as shown above.

Generate the Javascript code and place this code on all pages of your website. If you are using WordPress, you can enter this code in the footer file of your theme.

Many themes have an option to deploy such codes in the theme settings. It can be used to deploy Analytics codes and other scripts like this.

If both options fail, you can look for a WordPress plugin like CSS & Javascript Toolbox that will help you deploy the code on all the pages of your blog.

In the last step, configure your notification banner and save settings. If you do not want to show a banner first, you can directly prompt them with the browser permission window and let them click on Allow or Block. I am using 1-Click Optin as shown in the beginning of this article.

The Future of Web Push Notifications

Push notifications are here to stay. Users will stay subscribed to websites and apps as long as the notifications are targeted to them and useful.

So segmentation becomes crucial. You do not want to send a standard notification to all the users in one blast. Such broadcasts will lead to unsatisfied users and a lot of unsubscribes.

Push notifications are well suited for time-sensitive messages like breaking news, live updates on an event, time sensitive discounts and behavior based messages such as shopping cart abandonment.

Final Words

I hope this blog post helped you understand how push notifications on websites work. Go ahead and implement it for your blog or website! Click Here to sign up for a free account at MoEngage to get started.

I will publish a review of MoEngage soon and also explain how you can use advanced notification options like Smart Triggers, A/B Testing messages, and audience segmentations.

Any questions? Leave a comment below!