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

What are Browser Push notifications

 

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.

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.
back to menu ↑

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 this link 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>.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. 

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 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

I am taking my website’s Alexa Rank to the next level with Blogchatter. My Alexa before I began the challenge is 17,00,107.

Your Turn Now

In case if you liked this article do show your support by sharing this article.

Like our Facebook Page and Stumble 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.

We love hearing from you. Add a Comment using your Facebook id (if you don't want to use Facebook, scroll down to leave a reply using other options)

mm

Mom of an adorable toddler, reader, crafter, blogger, traveler, in IT by profession and now the happy and proud founder of “Sharing Our Experiences”. Neha believes that by sharing our learning and experiences we can help, encourage and inspire each other and touch the lives of many others who may be in a similar situation. She shares her experiences on parenting, crafts, using products and blogging via Sharing Our Experiences. Read more in ‘About Us’ and ‘Meet the Founder’ sections.

From our sponsors

24 Comments
  1. Reply
    Monika 14th October 2017 at 8:57 am

    Informative post , I m going to install this plugin today only . Please write a post about how to use Canva for making featured images for my blog.. I m in dire need

    • Reply mm
      NEHA GUPTA 14th November 2017 at 8:09 am

      Thank you so much Monika, I am glad you found this article on browser push notifications useful. Thanks for the idea would love to do an article on canva as well

  2. Reply
    Tripti Charan 30th September 2017 at 9:28 pm

    Wow! This is so informative 🙂

    • Reply mm
      NEHA GUPTA 30th September 2017 at 11:17 pm

      Thanks Tripti. I am glad that you found this tutorial on adding web push notification to a wordpress site useful.

      Look forward to hearing from you. Feel free to ask any queries that you may have wither via comments here. You can also use our Facebook group on how to make a website using WordPress for asking any queries that you may have.

  3. Reply
    roopali gupta 30th September 2017 at 6:40 am

    Very informative article, I also want to use it. Will keep taking tips from here.

    • Reply mm
      NEHA GUPTA 30th September 2017 at 11:19 pm

      Thanks Roopali. If you face any issues in adding Browser push notifications to your site feel free to contact me. I am glad to be of help.

      Look forward to hearing from you and Thanks for stopping by.

  4. Reply
    anupriya 27th September 2017 at 8:03 am

    Bookmarking this for future reference. Thanks for this informative post

    • Reply mm
      NEHA GUPTA 30th September 2017 at 11:21 pm

      Thanks Anupriya for bookmarking this tutorial on push notifications. You are most welcome. Feel free to contact me in case of any queries whenever you use this bookmarked article.

  5. Reply
    Agnivo 26th September 2017 at 9:32 am

    This is very helpful. Thanks for the uncomplicated and user-friendly write-up

    • Reply mm
      NEHA GUPTA 30th September 2017 at 11:23 pm

      You are most welcome Agnivo.

      I have learnt most of this stuff by going through very technical article so I really wanted to explain first what are Browser push notifications and how to add them in a very easy and user friendly way. I am glad that I was able to do it. Thanks for stopping by.

  6. Reply
    Rohan Kachalia 22nd September 2017 at 7:05 am

    Found this post on Push engage browser push notifications extremely useful, Neha.

    • Reply mm
      NEHA GUPTA 30th September 2017 at 11:25 pm

      Thank you so much Rohan and thanks for stopping by, Any time you set it up for your site feel free to contact me for any queries that you may have on Pushengage push notifications.

  7. Reply
    Akshata 22nd September 2017 at 6:44 am

    This is extremely useful thx for sharing such a detailed tutorial on push notifications

    • Reply mm
      NEHA GUPTA 30th September 2017 at 11:26 pm

      Thanks Akshata, I am really glad that you found this pushengage tutorial useful. Any time you need help, please feel free to contact me

  8. Reply
    Paresh 21st September 2017 at 1:40 pm

    Very helpful tutorial, I needed this for my blog. Thanks and cheers!

    • Reply mm
      NEHA GUPTA 21st September 2017 at 5:41 pm

      Thanks. I am glad you found thus tutorial on browser push notifications useful ☺️ any queries please feel free to ping me. You can also join our Facebook group on how to make a website using WordPress. Thanks for stopping by

  9. Reply
    Aesha Shah 21st September 2017 at 11:08 am

    Excellent article. Very useful. so basically this is a tool and not a plug in and anyone can incorporate it in a Word press site.Will try it out .Also one query: So when someone clicks allow, that person receives notifications while browsing if we post anything new on our site, right?

    • Reply mm
      NEHA GUPTA 30th September 2017 at 11:32 pm

      Thank you so much Aesha. It is a method and we also have a WordPress plugin for easy integration of Pushengage with wordpress site and sending out notifications for new posts.

      And thanks for your query. I will update the article to say it clearly and may be add a section on how to send notifications using Pushengage.

  10. Reply
    Dipika 21st September 2017 at 8:56 am

    what a resourceful site this is… all information we seek on daily basis regarding technicalities come handy here. I am following you for future posts too now.

    • Reply mm
      NEHA GUPTA 30th September 2017 at 11:28 pm

      Thanks you so much Dipika. I along with other authors on this site try our best to share whatever we learn. I am so glad that it was useful to you. Look forward to hearing from you and Thanks for stopping by

  11. Reply
    shalini 21st September 2017 at 7:32 am

    Informative post on Pushengage! Would definitely try it out. Thank you 🙂

    • Reply mm
      NEHA GUPTA 30th September 2017 at 11:30 pm

      Thank you so much Shalini. I am also definitely going to try out some of your recipes. Loved them.

      Any time you set up browser push notifications for your site, I will definitely subscribe. Thanks for stopping by.

  12. Reply
    Sheethal Susan Jacob 21st September 2017 at 5:04 am

    I am thinking of migrating to WordPress, actually doing it. I am definitely coming back to this, once the initial works are done.

    • Reply mm
      NEHA GUPTA 21st September 2017 at 6:01 am

      Sure dear. I am in love with wordpress as you can actually achieve anything with it. If you need any help at all please feel free to ping me. I also have a Facebook group where I help others with making a website on WordPress.. Wish you all the best for moving your blog ☺️

Leave a reply

Register New Account
Reset Password