How to add web push notification to your WordPress site?

WordPress push notifications enable you to set up a direct line of communication with your audience. Web push notifications are used on popular websites like Facebook, Twitter, Pinterest, LinkedIn etc. Web push notifications are straightforward in comparison to emails and regular campaigns. We will explain why web push notifications are useful. We will show you how to add web push notification to your WordPress site:
Why add web push notifications to your WordPress site?
Web push notifications are clickable messages displayed on top of the user’s desktop. It works on mobile browser too. According to a survey, push notifications have a 50% open rate on mobile devices. Web push notifications are simply another means of direct contact, with the added benefit of being able to provide real-time updates to your visitors.
Setting up Web Push Notifications in WordPress with OneSignal
OneSignal is the one-stop solution for WordPress push notifications. It supports both desktop clients (Chrome, Safari, and Firefox) and Android systems. The very first step is to install and activate the OneSignal plugin.
After activation, you will see a new menu added in your WordPress admin bar called “OneSignal”. Click on it to go to plugin’s settings page.

The settings page is divided into two parts: Setup and Configuration tabs. The setup tab is detailed documentation on how to setup OneSingle push notifications in WordPress.
To setup OneSignal, follow the steps given below:
1. Create Google Keys
Your firsts step is to visit Google Services Wizard website.

Give a name for your app and add an Android package name. Next step is to choose a country and region. Click on “Choose and configure services” button.
In the next screen, select Google Services you want to use with your app. Click on “Enable Google Cloud Messaging” button for cloud messaging service.

After enabling cloud messaging service, you will see server API key and sender ID. Copy the sender ID and paste it in WordPress plugin’s configuration tab under Google Project Number field. Don’t forget to copy server API key.
2. Setting up Chrome and Firefox push notifications
Go to OneSignal website and create your free account. Now login and click on “Add a new app” button.

Enter the name of your app and click on “create” button.

On the next page, you have to select a platform to configure. From options, choose “Website Push” and click on the “Next” button to continue.

Next, you are supposed to select a browser platform. There will be Google Chrome and Mozilla Firefox in one box. Select that option. Click on “Next” button.

Now, you have to enter your WordPress site URL, Google server API key, and URL for your default notification icon image. Click on “save” button to save your settings.

If your website does not support SSL/HTTPS, then check the box next to “My site is not fully HTTPS” option. Google Chrome does not support web push notifications for non-SSL or HTTP websites. OneSignal solves this issue by subscribing users to a subdomain on their own https domain.
When you check the box “My site is not fully HTTPS”, one “Choose Subdomain” option will appear on your screen. Choose the subdomain for your app and enter Google Project Number or Sender ID.

Click on the “save” button. You will get a notice that your setup is not complete yet. Click yes to close the dialog box.
3. Get OneSignal Keys
For your website, you will need the OneSignal key. Go on your app dashboard and click on “App settings”.

App settings page will open. Click on the Keys & IDs tab.

You will see OneSignal App ID and Rest API key. Copy it and paste them in OneSignal WordPress plugin’s configuration tab on your site.
Earlier we selected Google Chrome and Mozilla Firefox in the browser platform. Now we will learn the settings for Safari web push notification.
4. Setting up Safari web push notifications
The first step is to login into your account and go to the “App Settings” page. Scroll down to web platforms. You will see an option of Apple Safari. Click on “Configure” button next to it.

You will see one dialogue box. Enter your website name and site URL.

Check the box next to “I’d like to upload my own notification icons” option. Different icon sizes will appear on the screen. You can use Photoshop or any image editing program to create icons of the exact image sizes.

Click on “Choose file” button and upload the icons. Don’t forget to click on the “Save” button.
Refresh the app settings page. Again scroll down to Web platforms section. Web ID will be displayed under “Apple Safari”.

Copy the web ID and paste it in configuration tab of OneSignal plugin on your site. Congratulations! You have successfully setup OneSignal web push notifications for your WordPress site.
5. Testing Web push notifications on your WordPress site
When you install OneSignal, you will see a subscription icon to your WordPress site. To check, visit your website and click on the subscribe button. By default, you will see “Thank you for subscribing” message on the screen.

Next step is to login in your OneSignal account. Click on your app name and go to the app settings. Scroll down to the web platforms section and click on the configure button next to Google Chrome and Firefox.

Don’t forget to click on the “Save” button.

Next, you have to select target SDK. Select WordPress from options. Click on next.

As of now, you have one subscriber so your subscriber ID will be automatically filled. You will see “test settings” option. Click on “Send test notification” button there. One Signal will send you a web push notification.

The notification appearance will be different according to your browser choice. When the testing notification appears, click on it. You will see a confirmation screen. It will show you that you have successfully setup OneSignal web push notifications for your website.

Go back to configure screen on OneSignal website. Click on “Check Notification Status” button.

You will get a message that you have successfully added push notifications to your WordPress website.
How to send Web Push Notifications in WordPress with OneSignal
Through OneSignal plugin, your WordPress website will send a notification to all subscribers when you publish a new post. You can manually send notifications from your OneSignal App Dashboard. The simple steps are explained here:
Login to your OneSignal account and click on your app name. You will see the option named “New Message” on the left side menu. Click on it.

You will see a new screen where you can write title and content for your notification. Click on Options, Segments, and Schedule to customize your web push notification.

Through schedule, you can send notification at a specific time. Sending push notification to a particular segment of your users is possible.
WordPress push notifications are an effective tool. It can increase your site’s engagement with little effort. We hope this article will be useful to you. Share your opinions with us in the comment box below.