How to Send Web Push Notifications on Chrome and Firefox

by Deepak Kanakaraju on February 8, 2017

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…

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!

{ 38 comments… read them below or add one }

Ruben February 8, 2017 at 11:23 pm

Hi sir, Can you explain clearly about HTTPS. You said that your website doesn’t contain https,but what is moengage.com at the end of your website digitaldeepak.com

Reply

Deepak Kanakaraju February 9, 2017 at 11:35 am

That comes because when the site is not in HTTPS, it has to open a HTTPS URL and it will then be closed.

Reply

vinay February 10, 2017 at 12:06 pm

HTTPS means secured version of HTTP

Reply

Karthik February 9, 2017 at 11:36 am

Thanks for the wonderful explanation. I will implement it for my blog soon! Glad to know that it is free for up to 5k subscribers.

Reply

sarfraj Ali February 9, 2017 at 11:38 am

Thanks for this
very useful knowledge

Reply

Puneet Gogia February 9, 2017 at 1:08 pm

Thank you Deepak for this detailed post.

One thing I want to ask as you are using these push notifications. What’s the conversion rate?

Reply

Deepak Kanakaraju February 9, 2017 at 1:28 pm

I have updated the article with some stats. The conversion rate is very high. 15-20% CTR.

Reply

Puneet Gogia February 10, 2017 at 12:51 am

That’s fantastic.

Reply

Michael February 9, 2017 at 4:07 pm

Implemented already. Works just as you have described. Thank You Boss. You are always a game changer.

Reply

Deepak Kanakaraju February 9, 2017 at 5:57 pm

Great to know that!

Reply

Ram February 9, 2017 at 6:26 pm

Thank you, Deepak.However, I followed all your steps by 1 by 1 and finished the setup. Initially, it was working good, now it’s not working. can you please sort out this and help my website ‘ http://www.zgstudios.com ‘ to get this push notification

Reply

Ajesh February 9, 2017 at 7:19 pm

Good Information Deepak, I will try it for my Blog . You posts are great motivations for me to start writing again !

Reply

Sukumar G February 9, 2017 at 10:33 pm

You explain the most difficult thing in a very easy and and plain manner. Thank you

Reply

Meenu Yadav February 10, 2017 at 3:28 pm

Nice Article. I was really looking for it and started using it.

I have a question that can we run push notifications to more than one website from same MoEngage Account?

Reply

Deepak Kanakaraju February 10, 2017 at 4:40 pm

Yes, you can. Contact their support and they will set it up for you!

Reply

Deepak February 22, 2017 at 12:33 pm

Hi Deepak,

In this article, you explained about browser push notifications like Chrome and Firefox. Now I’m providing this feature on my client website. Thanks @Deepak for the wonderful explanation.

Reply

Vanshika saraf February 10, 2017 at 6:59 pm

I generated my own GCM Project Number and GCM API Server Key, but getting problem in the verification of API. What can be the reason?

Reply

payal February 10, 2017 at 10:21 pm

i apply as u told but its not showing push notification also my google analytics not showing any visitor lisit

Reply

rajesh February 11, 2017 at 6:18 pm

sir, i just followed the same and signup account,,,,,but im just confused …whre to post generated javascript code and i pasted it in footer.php and signup account…but still ther r options mobile push fc dn???
what shoul;d do there

Reply

Gurmeet February 12, 2017 at 2:44 am

@Deepak,
In this article, you explained. How we use Push Notification? Now I’m using this feature on my website. Through this visitors attract on my website. Now a days this feature used by mostly websites.

Reply

sunil February 13, 2017 at 3:03 pm

Push notifications will surely increase the subscribers and will help to reach the notifications who subscribed. Thanks @Deepak for the detailed information given and will do the process and will watch the result.

Reply

rahul February 13, 2017 at 9:53 pm

its work on wordpress site? plz help us.

Reply

Deepak Kanakaraju February 13, 2017 at 10:45 pm
Jose Davis February 14, 2017 at 4:20 pm

I assume you are talking about real push notifications that can be delivered even when the user is not surfing your website (otherwise check out Web Sockets or legacy methods like long polling).

Reply

purnima bohra February 14, 2017 at 11:02 pm

Thanks for the wonderful explanation. I will implement it for my website soon! Glad to know that it is free for up to 5k subscribers.

Reply

Vimal Chandra February 17, 2017 at 9:14 pm

Thanks for nice article

Reply

Rahul February 17, 2017 at 11:01 pm

This also works inside the head lamp WordPress please tell us something about that if it works.

Reply

Priyadarshee Sahoo February 20, 2017 at 10:34 am

Thanks Sir. I will do it for my website later.

Reply

Web Programming Coimbatore February 25, 2017 at 9:49 am

Hi,you have given a useful information about magento,as you said magento is perfectly fit to ecommerce site,great post

Reply

Rishabh Jain February 25, 2017 at 1:58 pm

Dear Sir,
I have made my blog on wordpress but i doesn’t know that where and how to copy the javascript code in my blog. Please help me.

Thank you..

Reply

Babita Notiyal February 25, 2017 at 4:02 pm

It seems very difficult to do this, suggest me a wordpress plugin with simple settings. Thank You..

Reply

Neha March 1, 2017 at 4:52 pm

I have registered for your free digital marketing course and have learnt a lot from the 10 provided lessons and many more to go. I am a computer science student and always wanted to learn this type of marketing stuff. I read some of your blogs and they were so useful and has the great content. Sir I want to say that you are doing a great job. Your blogs have motivated me to start blogging. Thank you.

Reply

Utkarsh Bhatt March 2, 2017 at 6:37 pm

I have been using MoEngage on one of my websites. The results are quite good. I have got 2300 subscribers in 1 year. But, at the rate the numbers are increasing, I’ll surely hit the 5K threshold.

$149/pm is quite high for me, though. Do you have experience with other alternatives? Something less than $100.

Reply

Deepak Kanakaraju March 2, 2017 at 9:30 pm

May be you can delete inactive subscribers?

Reply

sanjay March 7, 2017 at 11:46 am

Hi Utkarsh ,

You can try notifyvisitors and onesignal. it will surely increase the subscribers and will help to reach the notifications who subscribed.

Reply

gayathri March 11, 2017 at 11:29 am

Thank you sir,
Very helpful article.

Reply

Jagdeep Malik March 17, 2017 at 5:06 pm

Really helpful post Deepak. I would love to implement your advise about web push notification to my website in future.

Reply

Bharat March 17, 2017 at 10:42 pm

Deepak it’s one of ur best blog explained in such a easiest way!! I have one question.. How can we use this Push Notifications to some n number of clients??

Reply

Leave a Comment

Previous post:

Next post: