How to Add The Web Push Notification to Your WordPress Website? (steps by step tutorial)

Set up web push notification can increase your website traffic, following this guide you will learn how to add web push notification to your Wordpress website.

how to add web push notifications

When you visit an interested in website and you will receive a push notification on the top of your browser area and you can click for subscribing for sending you a new update message if you like this website content,  the push notifications like the below images shows. Following this guide you will quickly learn how to add the web push notifications to your WordPress website, let’s dive in.

chrome push notification
The push notification in the Chrome browser.
safari notification
macOS Safari browser notification

Why you need to add the push notification to your website, here the main reason you can’t avoid.

Leverage the push notification you readers or visitors will be informed when you update a new post and click the notification button to visit your website directly, this will increase your engagement and generate more traffic to your website.

OK, already know these big benefits then let’s jump into actionable steps for setting up the push notification button.

Step #1, Install Onesignal Plugin

login to your WordPress website dashboard, and find the plugins >> add new. fill the Onesignal in the search bar.

Onesignal plugin
Onesignal plugin

Installs and activate the Onesignal plugin.

install and activate Onesignal plugin
install and activate Onesignal plugin

After you activate the plugin it will auto list on the dashboard menu as above image shows.

Step #2 Create Onesignal Account and Setup the Push Notification

Go to the Onesignal official webpage to register an account.

create Onesignal account
create Onesignal account

After you fill in the email address and password then hit the create button you will receive a activate email in your inbox, click the confirm button will redirect to the Onesignal homepage.

Onesignal confirm email
Onesignal confirm email

Redirect to the Onesignal homepage to fill in the website information and get the API key and APP ID. Following the steps to fill the relative information(website name and URL address).

Fill and choose the right platform

Following the guide to Configure web push.

choose integration

Scroll down for WordPress site set up.

setup wordpress site

After click save button you will get the API key and APP ID as below image show.

get API code and APP ID

Copy these codes and switch WordPress Onesignal plugin and paste in relative slot.

paste code

After you paste the APP ID and API Key in the plugin then scroll down to the end and click save. Then switch to the Onesignal account and click go to my website as below image show.

click go the website

You will redirect to your website and see a bell on the right bottom corner like below image shows.

click subscribe button

Click the bell and subscribe you will see a push notification in the browser website address.

OK, after you subscribe test then switch back to the Onesignal account and click save then you have setup the push notification for Chrome and you will see a active words as below image shows.

complete set up push notification

 

Steps #3 Send the Push Notification Test Message

In order to check if the web push notification was set up correct or not, we can send a message to our self. Login to the Onesignal account and choose the message tab.

click the name tab

Choose the message tab

Choose message tab

setup the test push notification

fill in the test info

After you click the test send to the device, you will see below image show push notification message on the right front corner(if you use Mac OS system).

click for test device

Receive the push notification message.

push notification message

 

If you have any questions for set up the web push notification for your WordPress website, feel free to leave your comments or questions.

Leave a Reply

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