Dark Mode On / Off

How to Add Web Push Notification to Your WordPress Site? (Step by Step)

How to Add Web Push Notification to Your WordPress Site? (Step by Step) 1

Push notifications, also referred to as web push notification, are short informational messages that are transmitted by apps and websites. Push notifications increase the return of visitors, more engagement with the content, and help to keep in touch with your audiences. Push notifications work seamlessly on both desktop and mobile devices.

In recent times, push notification has gained a lot of popularity and has emerged as a powerful message delivery system. If you own a website and not using this feature, you are possibly missing a big opportunity.

In this article, I will show you how to easily add web push notifications to your WordPress site in 4 simple steps. This tutorial will also cover all the settings that you need to configure to start sending notifications on desktop and mobile devices directly from your WordPress site.

What is Push Notifications?

Push notifications are clickable messages that pop up on your screen, to let you know something. For example, when you get a message on Facebook or some tags you in a post or photo, you probably see push notifications on both your smartphone and desktop.

It increases engagement and makes it easier for the audience to access the information. Push notification can be a very effective way to boost your site traffic and turn your visitors into potential customers.

Benefits of WordPress Push Notifications

The majority of the visitors who leave your website will never come back. Push notifications can help bring your customers and visitors back to your site with the right message popup.

Many websites that have implemented push notification have seen higher engagement and loyal followers. Here’s are a few reasons why should add push notifications to your site:

  • Push notifications are shorter messages which require less attention and increase more engagement.
  • Push notifications are delivered in real-time and can reach to maximum audience.
  • Push notifications allow you to get a detailed report about visitors’ behavior, such as their response time and click rate.
  • Push notifications don’t require any private data of visitors.
  • Push notification is easy to set up and provides an edge over your competitors as many websites don’t use this.

Add Web Push Notifications to WordPress (In 4 Simple Steps)

There are many web push notification plugins(listed at the end) for WordPress site. For this tutorial, I will be using OneSignal. It is a free push notification service that allows you to add push notification to any website easily.

The support for multiple browsers and easy to configure settings, makes OneSignal a reasonable choice.

Now, let’s get started.

Step 1: Install and Activate OneSignal Plugin

The first thing to get started is to install and activate the OneSignal plugin. To install the plugin, go to your WordPress dashboard > Plugins > Add New > Search for OneSignal. After it shows up in the search results, install and activate it. Here’s a quick step by step tutorial to install a WordPress plugin easily.

How to Add Web Push Notification to Your WordPress Site? (Step by Step) 2
OneSignal – Web Push Notification plugin

After activating the plugin, you will see the OneSignal Push tab in the left admin menu. Click on it, and you will see the default OneSignal dashboard with instructions to add Web Push notifications.

How to Add Web Push Notification to Your WordPress Site? (Step by Step) 3
OneSignal dashboard

Step 2: Set up OneSignal Account

To make the plugin work, you need to create an account on the OneSignal website. Go to the OneSignal website and signup for an account.

How to Add Web Push Notification to Your WordPress Site? (Step by Step) 4
OneSignal Signup Form

You can signup using your email or from various social media platforms. After signup, verify your account. Once it is done, you are ready to set up, create the push notification.

Step 3: Create a Push Notification App

To get started, log in to the OneSignal website and head to the dashboard. From the dashboard, click on New App/Website button. A pop up will appear on the screen. Add the name and click on Create.

How to Add Web Push Notification to Your WordPress Site? (Step by Step) 5
Add Website in OneSignal

Now, it will ask you what type of notifications you want to configure. Choose the Web Push option and click on Next.

How to Add Web Push Notification to Your WordPress Site? (Step by Step) 6
Web Push option

Now, you see different options of integration available. From the list, choose WordPress plugin or Website Builder and then select WordPress as shown in the screenshot below.

How to Add Web Push Notification to Your WordPress Site? (Step by Step) 7
WordPress integration

Scroll down and enter the necessary details like Site name, URL, and a default icon. If your website is not using HTTPS, you should enable the toggle labeled My site is not fully HTTPS. Once you click on Save, move to the next step.

How to Add Web Push Notification to Your WordPress Site? (Step by Step) 8
WordPress Site Setup

Step 4: Configure the OneSignal Plugin

After saving the configuration, on the next screen, you will get the App ID and API Key that can be used in setting up the OneSignal WordPress plugin.

How to Add Web Push Notification to Your WordPress Site? (Step by Step) 9
OneSignal App ID and API Key

Head back to your WordPress Dashboard > OneSignal Push > Configuration tab and paste those keys.

How to Add Web Push Notification to Your WordPress Site? (Step by Step) 10
OneSignal Plugin Configuration

We are not done yet! There are a few additional settings that you can configure as per your preference. Under Sent Notification Settings, you can set the notification settings and add the notification title.

How to Add Web Push Notification to Your WordPress Site? (Step by Step) 11
Notification Settings

Once you have set them, you can scroll down further to Prompt Settings & Subscription Bell. Here you can control how the visitors are prompted to subscribe.

How to Add Web Push Notification to Your WordPress Site? (Step by Step) 12
Prompt Settings and Subscription Bell

If you scroll down further, you can the default text of your subscription message. You can change them or leave as it is.

How to Add Web Push Notification to Your WordPress Site? (Step by Step) 13
Subscription Bell Text Customization

Further down, you’ll see a section called Welcome Notification Settings. By default, OneSignal sends a welcome message via push notification when someone subscribes to your site. In this section, you can disable or customize the welcome message to give your personal touch.

How to Add Web Push Notification to Your WordPress Site? (Step by Step) 14
Welcome Notification Settings

Just below that section, there is a section called Automatic Notification Settings. Here you can configure whether the plugin should send automatic notifications whenever you publish a post.

How to Add Web Push Notification to Your WordPress Site? (Step by Step) 15
Automatic Notification Settings

You can leave it as enabled to notify your visitors about the new posts if you publish new content once or twice a week. If you are someone who publishes content daily, you should disable it as your visitors might get irritated with the frequent popups.

Finally, click on the Save button to reflect the changes.

Automatic Push Notifications

When you install the OneSignal WordPress plugin, by default it enables the option to send notifications on post publish automatically. You can easily uncheck this option if you are publishing a post that you don’t want to get pushed.

How to Add Web Push Notification to Your WordPress Site? (Step by Step) 16
OneSignal Push Notifications for individual post

Manage Web Push Notifications from OneSignal Dashboard

If you visit the OneSignal website, from the dashboard, you can control the push notifications, see the audiences, subscribes users, delivery reports, and much more.

How to Add Web Push Notification to Your WordPress Site? (Step by Step) 17

Under the Audience tab, you can see the different segments of users engaging with your site. You can also create additional segments as per your needs.

How to Add Web Push Notification to Your WordPress Site? (Step by Step) 18
OneSignal Audience Tab

You can push notifications to your audience from the OneSignal dashboard. To push the notification, go to Messages tab and follow the below steps:

  • Click on the New Push button.
    How to Add Web Push Notification to Your WordPress Site? (Step by Step) 19
  • Select the desired audience under Audience tab.
    How to Add Web Push Notification to Your WordPress Site? (Step by Step) 20
  • Under the Message tab, add the title and message. It will also show the preview.
    How to Add Web Push Notification to Your WordPress Site? (Step by Step) 21
  • Now, under the Options tab, add the URL, icon, choose the priority and set the time to live.
    How to Add Web Push Notification to Your WordPress Site? (Step by Step) 22
  • Finally, in the Schedule section, choose the time of delivery and pre-user optimization settings.
    How to Add Web Push Notification to Your WordPress Site? (Step by Step) 23
  • Once everything is set as per your preference, click on Confirm and then on Send Message button.
    How to Add Web Push Notification to Your WordPress Site? (Step by Step) 24

After the confirmation, the notifications will be sent to all your subscribers. You can check the delivery status under the Delivery tab in the dashboard.

3 Alternative WordPress Plugins to add Web Push Notifications

If you are not satisfied with the OneSignal, then you do have several options to choose from. Here are a few alternative plugins that you can use:

1. PushEngage Web Push Notifications

How to Add Web Push Notification to Your WordPress Site? (Step by Step) 25

PushEngage provides an easy way to add Web Push Notification for your WordPress site. It supports all browsers, including Chrome, Firefox, Microsoft Edge, and Safari and works on both desktop and mobile devices.

They have a free plan limited to 2500 subscribers, 120 notifications, and 5000 clicks.

2. Push Monkey Pro

How to Add Web Push Notification to Your WordPress Site? (Step by Step) 26

This plugin allows sending push notifications directly to your reader’s desktop and mobile devices. It notifies your subscribers about your content even when they are working on other apps, or their browser is closed. The best part about this plugin is that it sends notifications on offline devices and displays all the missed notifications when it wakes up.

Push Monkey Pro is free up to 100 subscribers. If you need additional features, you can upgrade to the premium plan.

3. PushAlert – Web Push Notifications for WordPress and WooCommerce

How to Add Web Push Notification to Your WordPress Site? (Step by Step) 27

PushAlert is another plugin to add Web Push Notification to your WordPress site. It also includes integration with the WooCommerce plugin, which is a bonus. It adds easy to use interface right next to the editor, which makes it easier to push notification automatically on publishing a post.

They also offer a free plan limited to 3000 subscribers.

Final Thoughts

As you can see, the process of adding Web Push Notifications in WordPress is relatively simple. It hardly takes more than 5 minutes. Web Push Notifications can help you connect with your visitors or customers, so I highly recommend to try this out.

The service is entirely free and can boost your site traffic and interaction with your visitors.

Have you tried the WordPress Push notifications yet? If so, I would like to hear about your experience below. If you need any assistance, feel free to let me know. I will be happy to assist you.

Leave a Reply

Your email address will not be published. Required fields are marked *

Recommended Articles