Tutorial on How to add Browser Push notification to your WordPress site
Read on for Complete Tutorial on how to add browser push notifications on your WordPress site.
In this blog, I will first start from what are browser push notifications ? And then go on to talk about how can you set up browser push notifications for your site. This is something I learnt recently so am happy to share it with you.
So here is a quick overview of what we are going to talk about today
What are Browser push notifications ?
When we browse some sites you will see a pop up “This website would like to send you push notifications with an option of Allow or Deny” These are called Browser Push Notifications.
For Sharing our experiences, Browser push notification looks something like this
back to menu ↑
Now what happens when you click on allow push notifications ?
For mobile apps we get notifications on our mobiles. You can see similar notifications from sites on which you have allowed browser push notifications.back to menu ↑
How browser push notifications help you gain more traffic and subscribers
So once you set up push notifications for your site, you are offering a new way to your readers to get notified of new blogs apart from other methods like mail newsletters.
How to set up Browser notifications for your blog in less than 5 minutes using Pushengage
Create an account on Pushengage
Click on Start Free Trial and then create your Pushengage account
Fill in the necessary details as shown below
Once you have registered you will get a login into PushEngage dashboard.
Configure your website details in Pushengage
Login into the Pushengage dashboard and configure the website details. This is how the dashboard looks like
Click on Settings-> Installation settings on left hand side of Dashboard
1) You need to provide your Website Name and an image for Push Notifications.
Image is a key part of notification, and Pushengage team recommends a solid image of 192×192 pixels or any square image.
Some themes provide an option where you can add any script for headers without editing the code files. For themes who do not provide this option, you will need to update the header.php file.
If you have an http site (sites starting with http://www.<yourdomainname>.com) then you can also add and activate a Pushengage WordPress plugin.
This plugin is also useful for sending notification from your WordPress dashboard rather than logging onto Pushengage website for each notification
We will talk about how to install and activate WordPress Pushengage plugin later in this article.
3) If you have an https site (like ours) rather than a http site you will also need to download package files.
These package files will need to be uploaded in root folder of your website so it is accessible from https://www.example.com/manifest.json and https://www.example.com/service-worker.js.
4) Set up welcome notifications to your subscribers
5) You should also configure your Time Zone settings in Profile.
This is necessary so that your notifications appear in correct time zone. You can do this by clicking on link in above picture or going to Settings -> Profile Settings
Well that’s it. You have successfully set up web browser notifications on your WordPress site by using Pushengage.Start setting up browser push notifications for your site back to menu ↑
Which browsers are currently supported by Pushengage
PushEngage provides you a platform for Chrome, Firefox, Samsung Browser, and Safari (coming soon) Browser Push notifications for your users on Desktop and Mobile.back to menu ↑
Useful details for setting up Push engage web browser notifications
In case if you are not able to upload the package files for https sites then there is another method that you can follow. You will find all related details on how to go live with pushengage here.
Other frequently asked question is how to set up WordPress plugin for Pushengage and how to get API key for WordPress Pushengage plugin so lets talk about it now.
How to Install and activate WordPress Pushengage Plugin
Download and activate the plugin
How to get API key for WordPress Pushengage plugin. Go to Settings->Get API Key and get API key
Hope you found the above tutorial on Pushengage and how to set up Browser push notifications in your WordPress site useful.
If you need help with anything on WordPress or want to move your self hosted blog you can join our facebook group How to make a website using WordPress .
Liked this post ?
You may also want to check out another of our popular post How to earn money from your WordPress blog in 2 minutes
Your Turn Now
In case if you liked this article do show your support by sharing this article.
Stay connected with us using your favorite social media, we can be found on
Add a comment
If you have any suggestions or reviews don’t forget to share in the comments below. We would love to hear from you.