How to Add Web Push Notification to Your WordPress Site

To understand How to Add Web Push Notification to Your WordPress Site, go through the text thoroughly.

Push notifications help you send notifications to users even when they are not looking on your website. This brings back users to your website, increases web traffic, and earns more money.

In this tutorial, We will help you add web push notifications to your WordPress website.

What are Push Notifications?

Push notifications are messages or notices that pop up on a user’s device. These are short, clickable messages appearing in a heads-up manner, which helps deliver relevant information from time to time to users even if the user is not active on the website or app.

They are displayed in the notification area on their mobile device or top of their desktop. The noticeable point of this push notification is that they are displayed even when the user’s browser is not open.

Below is an example showing push notification in Windows 10:

Push notifications allow you to reach users with your latest offers and updates. Also, it is an effective way to convert website visitors into subscribers and customers.

Why should you Add Web Push Notifications to Your WordPress Site?

Most of the users visiting your website will never return to your site? That is why you must convert those users into followers or customers.

For that, you can use multiple channels at once, such as mobile or SMS marketing, email marketing, social media, and web push notifications.

Email lists are the most powerful marketing tool available till now. However, push notifications are also proving to be very effective.

The reasons for making push notifications a great marketing tool is, Users have to give their permission to receive push notifications. Meaning they are already interested in what you offer and are more likely to attract with notifications.

The users can control the appearance of notifications on their devices. They can snooze the notification or turn them off entirely.

Now, moving on to easily add web push notifications to your WordPress site.

Setting up Web Push Notifications in WordPress with PushEngage

For adding push notifications to your WordPress website easily, PushEngage is the finest push notification service on the market.

Creating Your PushEngage Account

First, you have to visit the PushEngage website and click the ‘Get Started For Free’ tab:

The free plan of Push Engage covers up to 500 subscribers and 30 notification campaigns for each month. When you get more subscribers and need to send more campaigns, you’ll need to upgrade.

After selecting a pricing plan, you have to create a PushEngage account. To register an account, you can use your existing Google account or create a new account.

After signing up, you will reach your PushEngage dashboard. If you signed up with your Google account, PushEngage would bring on the screen to enter your website details:

Now, visit the Settings » Site Settings » Installation Settings page in your PushEngage dashboard.

Then, upload an image to use in your push notifications. 

After that, click the ‘Change’ tab below the empty image box.

Use a JPG or PNG file for the image, and the size should be 256x256px. 

It will display the image in your push notifications.

Now you have created your PushEngage Account.

Connecting Your WordPress Site with PushEngage

After creating an account, next, you have to connect your WordPress website to PushEngage.

To start, you have to install and activate the PushEngage plugin. You can see our step-by-step guide on how to install a WordPress plugin for more details.

After activation, visit PushEngage from your WordPress admin dashboard. Click on the ‘Setup’ button at the top, and now you have to enter an API key.

To find your API key, visit Settings » Site Settings » API Keys in your PushEngage dashboard. Then, click the ‘Generate a New API Key’ tab:

Now you will get your API key.

Enter your API key in the PushEngage plugin and click the ‘Submit’ tab.

Setting Up Your Push Notification Messages

Now, it will display your PushEngage settings. You can check if you are satisfied with the General Settings. Here, you can change your account details.

Then, you can set up the message that people will notice when they arrive on your site. Click on the ‘Subscription Dialogbox’ menu to view and change the settings.

You will notice your logo in the message with the default text. You can change this default text to your own message. Then, click the ‘Update Optin Settings’ tab to save your changes.

Then, you can change the message that will be displayed on the intermediate page. This is the page that appears when the user first clicks Allow option.

Note: You can not change what appears in the browser’s own popup box. It will always have the ‘Show notifications’ text with Allow and Block tabs.

Place the text you want to use and click the ‘Update Page Settings’ tab.

You may like to create a welcome notification to thank people for subscribing. This also helps you to test that your notifications are working properly.

Click the ‘Welcome Notification Settings’ button to set up. You have to enter the title and message for the welcome notification. Next, You can use your homepage’s URL, or you could direct users to a specific page.

Check the box next to ‘Send Welcome Notifications to Subscribers’ to activate welcome notifications. After that, click the Update tab to save your changes.

Testing the Push Notifications on Your Website

After setting up push notifications, it’s best to check that your push notifications are working as you expected or not.

To test, open your website on your phone or computer.

Once you log in to your site, you should immediately see the subscription dialog box. You can see how it looked on our desktop computer:

And how the subscription dialog box looked on a mobile device:

Step ahead and click the ‘Allow’ tab. Then you must see the intermediate page in a popup window. This is how it looks on a computer:

You have to click ‘Allow’ here again. Now, you have successfully subscribed to push notifications from your website.

After that, it should display your welcome notification on your screen within a few minutes. This is how it showed the welcome message on our computer. 

Suppose the user opts not to enable notifications but later wants to subscribe. This is enabled with PushEngage automatically. The user will notice a bell widget in the bottom right of your website:

They can click on this bell to subscribe to your website. 

To manage the bell notification widget, visit Settings » Subscription Settings » Opt-in Management in your PushEngage account.

Here, You can change the position, color, and label of the widget:

You can even change the bell with a button that appears on the website like this:

Sending Push Notifications to Your Subscribers

PushEngage will send a notification for each new post by default. These notifications contain the post title and the featured image in a small size. Once the user clicks the notification, it will direct them to your blog post:

If you do not wish to receive automatic notifications, you can turn them off by going to PushEngage » General Settings from your WordPress dashboard.

Now, find the ‘WordPress Post Settings’ section and uncheck the box next to the ‘Auto Push’ option. 

After that, click the ‘Save WordPress Settings’ tab.

You can also create custom notifications in PushEngage. For that, log into your account on the PushEngage website, then visit Notifications » Create » New Notification.

Next, you can set the title, URL, message, image, and more. You can also schedule notifications timings.

Note: If you are pre-scheduling notifications, Ensure your time zone is set correctly. You can check or change this by visiting Settings » Site Settings » Site Preferences in your account on the PushEngage website.

We have created a custom notification for our blog post with a custom title and message; you can have a look at it.

Additional Features with PushEngage to Use for Your Website

Many other features are available with PushEngage, even with the free plan.

For example, you can set an overlay. It appears on top of your site content and conveys to the user where to click to allow notifications. 

You can see an overlay in action on the PushEngage website:

Other Good WordPress Push Notification Plugins

It is very important to opt for the right web push notification service from the beginning. Many providers lock you into their platform. This means when you wish to change your push notification service, you can lose your subscribers. And if you shift, you have to start from the very beginning.

That is why we recommend asking your provider for all settings you want to configure to make your subscriber list transferable.

We suggested PushEngage since it offers a free plan with many powerful features.

WordPress comes with many choices. You may want to look at one of these WordPress push notification plugins:

• PushCrew Connects your website to its notification service, offering a free plan up to 2000 subscribers. The platform helps the websites to get higher clickthrough rates and expand their email marketing list. 
• PushAlert – Web Push Notifications helps you connect with the PushAlert web push notification service. They are providing a free plan for up to 3000 subscribers. It adds up an easy-to-use interface besides the editor, which lets you push notifications automatically on publishing a post.
• PushAssist – It is a Connector plugin for the PushAssist web push notification service. It lets your website re-engage your most loyal customers with targeted push notifications.

We hope this write-up helped you  Add Web Push Notification to Your WordPress Site. If you liked this tutorial you might also like to see our another tutorial on How to notify subscribers of new posts in WordPress.