Last Updated on

6 min read

Push notifications allow you to send notifications to users even when they are not visiting your website.

In this article, we will show you how to easily add web push notifications to your WordPress site. We will also talk about the best WordPress push notification plugins and how to send desktop & mobile push notifications from your WordPress site.

What is Push Notifications

Push notifications are clickable messages displayed on top of the user’s desktop or notification area on their mobile device. They can be shown even when the user’s browser is not open.

For example, a notification of an App.

webpushnotification

Aside from desktop, web push notifications also work on mobile devices. This allows you to reach your users across devices with the latest updates and offers. Web push notifications have proven to be a very effective way to convert website visitors into customers and loyal followers.

Why Add Web Push Notifications to Your WordPress Site?

Push Notifications are like Newsletters. Some user’s preferred Push Notification then Newsletters.

Push Notifications can help you improve the user experience, and not only this way you can increase your Marketing list like Newsletters.

What are the differences between Newsletter and Push Notifications

You can do this by utilizing multiple channels at once. This includes email marketing, social media, mobile or SMS marketing, and web push notifications.

While email lists are still the most dominant and effective marketing tool at your disposal, push notifications for us are proving to be quite effective.

The best Free Push Notification service

OneSignal is a free push notification service for WordPress websites. It allows you to easily add push notifications to any website.

The OneSignal configuration is very simple, first of all you need to install the WordPress Plug-In. Need help installing the plugin? See our step by step guide on how to install a WordPress plugin.

Upon activation, the plugin will add a new menu item labeled OneSignal to your WordPress admin bar. Clicking on it will take you to the plugin’s settings page.

Step 1: Setting up OneSignal Push Notifcations

First, you need to visit the OneSignal website and click on the get started button next to the Web Push option.

osgetstarted

You’ll be asked to create a Free Account.

After your account is created, you’ll reach the OneSignal dashboard.

onesignal addapp

On the dashboard, click on the ‘Add App’ button to create your first app.

You’ll be asked to provide a name for your app. You can use anything here that helps you identify it.

onesignal appname

Next, you’ll need to select a platform. You can select multiple platforms for an app. For now, we recommend selecting ‘Web Push’ and click on the next button to continue.

onesignal appplatform

In the next step, you’ll be asked to select an integration method. Go ahead and click on ‘WordPress Plugin or Website Builder’ box and then select WordPress.

onegisnal selectintegration

When you scroll down a bit, you will see a ‘WordPress Site Setup’ section.

You need to enter your website name, URL, and upload a logo. This logo would appear in your notifications, so we recommend using your site icon (favicon) or website logo.

OneSignal browsers push notification setup

There are three methods to integrate the push notifications to your blog Typical site, a WordPress plugin, and Custom code.

 

Typical site method will provide you with the script and the SDK files which you have to upload to your blog’s root directory.

WordPress Plugin integration is the easiest way to configure push notification. You will get the App ID and API key which you need to update in WordPress plugin.

Custom code will provide you with the script which you have to update in your blog.

Here, I am going to tell you about the first two methods only.

Typical site

1.  Choose Integration

We have to choose the Typical site to integrate the website Push Notifications to your blog smoothly.

onesignal typical

2. Site Setup

Next section is the site information, where you have to provide the site URL on which you want to configure the push notification(refer below snapshot)

Here, you have to take care of the last option. If it is HTTP, then you will get another option keep as it is but makes sure you are choosing the proper option. If your blog has any favicon, icon then you can upload here, it should be 192*192 pixel. This icon will appear in the notification.

onesignal configure web push notification using onesignal

3. Permission Prompt Setup

Next, you have to configure the approval of the subscribers.

You have to add the prompt for subscribers (refer below snapshot).

onesignal add prompt

Once you clicked on the add a prompt, you will get a configuration screen(see below picture)

Here, you will have two options for prompt the notification Subscription Bell and Slide Prompt.

Slide Prompt is more effective than the Bell, so I would recommend you to choose the Slide one. After that, you can customise the notification message or keep as it is if you want.

You can also check the preview of your notification.

onesignal permission prompt editor

Now, the basic setup of OneSignal is over. Click on the Save button, and you will have to download the SDK file and upload it to the blog’s root directory. Also, you will get the script code which you have to update in your blog header tag.

onesignal configure push notification

That’s it.

Now, you can check your blog, and you will see the prompt at the top of it.

Using WordPress plugin

This is the simplest method, and I would recommend you to go for it.

Choose the integration method as WordPress Plugin.

OneSignal using wordpress plugin

After that, you will have to provide the site information just like the above method.

Click on the Save button. You will get the App ID and API key which you need to update in the plugin. In this method, you will need to install the OneSignal plugin.

onesignal configure web push notification using onesignal 1

Log in to your WordPress blog and install the OneSignal WordPress Plug-in.

Go to the OneSignal plugin, open the Configuration.

Update the App ID and API key here which you got from the above step(refer below snapshot)

onesignal app id and api key

That’s it.

The configuration has been completed. Now, you can open your blog and check whether you are getting the notification or not.

Also, you can track the performance of your push notification in the OneSignal dashboard.

Read Also This

Was this post helpful?

Leave a Reply

Your email address will not be published.

Why?

Hey! >:3 We have detected that you use AdBlock! Appreciate us by viewing the Ads on this site that we provide. Ads help us to keep the site active and FREE. Thanks.

Don`t copy text!