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

How to add Browser push notification in your site

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

What are Browser Push notifications

 

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.

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.

Statistics show that most of the readers are using mobiles for reading as opposed to laptops and tabs. These notifications will help you gain more traffic as more people are bound to click on notifications on their mobile and read your blog when you publish them.

How to set up Browser notifications for your blog in less than 5 minutes using Pushengage

Create an account on Pushengage

Create an account on Push engage here and start your free trial. Clicking on will take you to below screen directly.

How to set up Pushengage Free Trial account for Browser Push notification

Click on Start Free Trial and then create your Pushengage account

How to set up Browser push notification2

Fill in the necessary details as shown below

How to set up Browser Push notification

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

How to set up Browser Subscriptions

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.

2) You need to copy the javascript provided in the Pushengage dashboard in the header of your website.

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.

How to go live with pushengage Browser Notification

If you have an http site (sites starting with http://www.<yourdomainname&gt;.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

How to set up welcome notifications for subscribers in browser push notification

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. 

Click here to Start setting up browser push notifications for your site

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.

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 install WordPress Pushengage 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.