Home Blog

5 Steps To Add Web-Push Notifications On Your WordPress Site For Free

Setting up Web browser notifications on your wordpress website

Not much time had passed when I entered into the world of blogging & Digital Marketing, I realized the enormous potential for Web browser notifications integrated into your blog.

Well, most of the users who are even first time, don’t generally return back to your website.

This is because a user’s attention is so much divided. How can you expect to build a rapport and loyalty without showing your presence?

You must have also seen these notification pop-ups in many websites like amazon, facebook etc. But why is everyone going for this tool?

These Web- push Browser notifications get activated when the user allows the options to get notifications & gets subscribed. Notifications generate whenever you update or add a new blog post. You can even schedule targeted push notifications. The conversion ratio is also magnificent!

So in this blog post, we will go through detailed and step by step process for integrating these Web push notifications on our WordPress sites.

Here are the following steps:

Setting up Web Push Notifications in WordPress with OneSignal plugin

First & Foremost, install & activate this plugin called OneSignal on your WordPress Dashboard.

web push notification wordpress

Let’s get started.

Step 1: Getting Started With Google Keys

In the next tab, open Google Services Wizard  website. What’s this for? This is for activating Cloud messaging for your app through which those push notifications will be sent to your users.

It should look like this:

getting google keys and api

As you reach here, it’s obvious that you have to create an App name and package name. Just give a name for your website and in the package section with dots in between. for ex: xyz.abc.

Choose your country and then click on Choose and configure services button.

From here on, it will take you to a next page. Here click on “Enable Google Cloud Messaging”. It Should look like this:

enabling cloud messaging for website push notification

So, from here on you should pay more attention! You will get your API and Sender Id. Both these fields would be used now and further to optimize the settings.

Step 2: Setting up the cloud messenger on Web browsers for push notifications

For this, you need to go and visit the Onesignal website and register there, it does not cost a dime either!

There, add your website’s name, give this app a name.It should look like this

adding app on one signal

After you have added the app, you will get the options to select many versions of app, here you will select the one with Web browsers, again it should look like this:

adding web browsers in one signal

Step 3: Select the WEB PUSH button and hit next.

Further ahead, you will be asked which platform you use to host your website. WordPress users will select the same for themselves.

adding browser ext to enable push notification

Below this, you will also see 3 data fields where you will be required to add your website URL and name.

Step 4: Click SAVE and you will be directed to a new page.

Now again this step is important. In the next page, you will get your APP id and Rest API key of Onesignal.

adding API key to the app

There, there. You are almost done Whereas this app that you made was browsers like Chrome and Mozilla. Now, you don’t want to miss out on Safari users, do you?

Go to the settings tab in Onesignal and add another app for Safari it should be visible easily, click on it and add the following fields that it suggests, also click here “I would Like to upload my own icons as you would want your website icon when the user sees the notifications.

Be sure not to miss this step as not doing so would result in plugin malfunction.

how to add safari in onesignal

You are almost done now. I know configuring it for the first time takes some toll and time, but this is for the much much greater good. Imagine the impact it is going to have on your readers.Making users come back to your site to get updated with regular content that you are posting.

Step 5: Configure the Onesignal Plugin

Now, head back to your Onesignal PLUGIN in WordPress. Open its configuration and add your Rest API key, App ID and Safari Web ID.
configure onesignal plugin in wordpress

Voila! You are almost done. As you fill the required fields, scroll down the page and look for the settings of your plugin. These settings are to control how to you want your push notification to look, when do you want and lots more. You can even schedule your notifications for special campaigns. UTM tracking option is also given here.

Once you are done, click the save button and check again the previous steps in case you missed them.
Open your website it next tab and a BELL icon should be visible. This is your Web browser tool.
For more detailed guidance, you can always contact us on any of our sources.

Till then, Select the Bell icon so that you dont miss any update from Digital Shastri.