How To Add Browser Push Notification In WordPress Website?

You have seen much time on your mobile screen, there is a notification which informs you about the update, deals, or even that you got a new message.

But you always think that I have not opened that app so why I am getting this notification? It doesn’t matter that you open that app or not. you have installed it.

Web Browser Push Notification also works same, whenever you open a website it asks you to allow push notification if you allow it then whenever they update their sites like publishing new content or anything you will get the notification.

I am sure that you have seen many YouTubers says that subscribe our channel and press that bell icon to get the notification of the latest videos. this is push notification.

What Is Push Notification How It Works?

Push Notification is a type of notification which informs users about the updates on their phone screens and Browsers screen.

This is a type of message that appears on your desktop screen and also in the mobile notification bar. They are even shown when the browser isn’t open.

It works as instant notification to notify the users about the update.

For a blogger, it is better than email notification. Your visitors don’t need to fill their details for subscribing they only need to click allow to subscribe.

There are many tools available for push notification. you can use any of them. I am using OneSignal for this tutorial…

Why Should You Start Using Push Notification?

Most of the visitors who leave your website, never come back again. This is where email marketing, social media, mobile SMS marketing and web notification comes in the game.

These are the methods that you can use to take your visitors back to your site. And this is where web push notification works great.

By using Push Notification, you can attract your visitors back to your website by notifying them about the latest post published, the product you launched or anything update available on your blog.

Popular websites like Facebook, Pinterest, Instagram and many other popular news sites are using push notification.

In the comparison of Email marketing, push notification works better. Push notification have 50% higher open rate than the email.

Best Push Notification Plugins For WordPress

WordPress has many push notification plugins which you can use to start collecting push notification subscribers and sending them to push notification.

Some allow a free version of their tool and some are completely paid. But as a beginner, you might find difficult to spend money on push notification service.


OneSignal Push Notification

OneSingal is the tool that I am using from day one of my blogs to send push notification to your visitors.

OneSignal offers free and premium plans if you are a beginner and can’t afford to pay for the push notification service.

However, free users have limited access to features and tools. OneSingla basically has the three plans Free, Starter and Pro.

Here is the pricing of OneSignal:

OneSignal Pricing


PushEngage Push Notification

PushEngage is one of the best push notification service providers which also offer a free plan that is limited to 2500 subscribers and 120 notification per month.

It has four plans, free, business, premium and enterprises which costs respectively 0$, 29$, 59$ per month and you will need to contact them for enterprise plan’s pricing.

PushEngage Pricing and Plans

PushEngage also offers a free trial which you can use before buying their services.

You can register for PushEngage trial by clicking here…


Subsscribers Push Notification

Another best push notification service provider which you can use for free and it also has the premium plans. Obviously, the free plan has the limitation in which you can use it for up to 200 Subscribers.

They have a total three plans including the free one…

Subscribers pricing and plans

These are the best push notification service provider that I have tested my self. I highly recommend you to go with the OneSignal if you are looking for a free.

How To Setup Push Notification In WordPress?

Setting up push notification in WordPress is not a difficult task, there are many push notification plugins available which you can use to start push notification on your WordPress blog.

I am using OneSignal which has a free plan also and it is good for beginners to start with the free one at the initial stage of their blog.

First, Go to your WordPress Login page and Login in as admin.

Then you need to install a plugin which called OneSignal, you need to install OneSignal plugin on your blog.

Go to on Plugin>Add New>Search with name OneSignal and click on install button then wait for installation it will take some time. then click Activate to make plugin live on your WordPress site.

Before you proceed, you need a OneSignal account. Now go to OneSignal.

Now you need Web Push for your blog so go for it.

Push Notification, staymeonline

A signup pop will be pop up and now you are to fill your details like Email, Password, Confirm Password and Company name. You can also signup using your Github, Google, and Facebook.

Push Notification, staymeonline

Your account is successfully created now you have to check your inbox they have sent you a confirmation link. which is like this.

Click on the button to confirm your account. after confirming your account login it with your details.

push notification, staymeonline

This is the Dashboard. Now click on Add a new app. a pop up will appear and it will ask you to set a name for your app. I am giving it demo app you can use whatever you want and click create.

Push notification, staymeonlin

A second pop up will appear and it will ask you to choose one platform to configure. You can add more platform in future if you want. There are many platforms but you need to choose Website Push. Click Next.

Push notification, staymeonlin

Next, You need to click on Google Chrome & Mozilla Firefox. but don’t worry you can configure apple safari also in future if you want.

push notification, staymeonline

Fill your Site URL in the first filled and icon URL in the second filled. if your site is not fully HTTPS so don’t forget to check the box. At the last click Save.

push notification, staymeonline

Select your target SDK. Choose WordPress Here. and click Next.

push notification, staymeonline

Your Push Notification created successfully. On this screen, You can see Rest API key and App ID which you need to copy and paste to the Plugin setup page.

push notification, staymeonline

Open your Plugin page on the WordPress panel and click on the configuration tab. Copy your App Id and past as same copy your rest API key and Paste in the second box which is highlighted.

push notification, staymeonline

Now customize your push notification like Size, Position of your notification, and Theme.

Write the Message for the First time users which will Notify on the button like I write Click for Push Notification. Write Tip when to subscribe, you can customize this field as you want.

push notification, staymeonline

Customize your Welcome Notification Settings. This notification is sent to new visitors after subscribing. set title or leave it blank to your website default title.

Then message like Thank you for Subscribing. URL, leave it blank.

push notification, staymeonline

Set Automatic Notification Settings like shown in the image it will be sent an automatic notification when you published a new post. Don,t touch advanced settings if you don’t know. At the last click save.

push notification, staymeonline

You have successfully set up push notification on your WordPress blog. This is the time to test it go to your site and reload it.

It will show a Push Notification which is asking you to allow for the Updates like this. So allow it.

push notification, staymeonline

Then Immediately you will receive a Notification. This is your Welcome Notification.

push notification, staymeonline

Allow it to test further action effectively. And go to your OneSignal website (I hope You did not close it). You can see the Image.

I know your screen is not the same as me because now you have to click the Check Subscribed Users button. It will show you the same message as my image is showing. Click on Done.

push notification, staymeonline

This is how you can add browser push notification using the OneSignal.

I hope you found this found information and if you did then must share it with the others.

How To Add Browser Push Notification In WordPress Website_

🙏 One Humble Request!

I’ve put a lot of effort and done lots of research in writing this post to provide value to our blogging community. I will be glad if you share this post on social media. Sharing is caring 🤗

Share on facebook
Share on twitter
Share on telegram
Share on pinterest
Ravi Dixit

Ravi Dixit is a Blogger and Affiliate Marketer, He is the founder of StayMeOnline Who Loves to help others. Travelling and learning new things online are his first love. "I only want a life without any boundaries- Ravi Dixit"

Affiliate Disclosure: Some of the links on this page are affiliate links. If you buy any product using an affiliate link placed on this blog, it will not add any extra cost in the total price of the product rather I will get some commission from the company. This will show me 💖 from your side, for more details read this...

Join Community Of Like-Minded People

StayMeOnline Community For Bloggers (2)

3 thoughts on “How To Add Browser Push Notification In WordPress Website?”

Leave a Comment

Share via
Copy link