How To's

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.

one signal plugin wp settings wordpress

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.

google services app wordpress

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.

enable cloud messaging wordpress

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.

add a new app onesignal wordpress

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

add app name onesignal wordpress

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.

website push one signal wordpress

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.

browser platform onesignal wordpress

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.

app settings onesignal wordpress

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.

httpfallback onesignal wordpress

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 link onesignal wordpress

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

keys and ids tab one signal wordpress

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.

configure apple safari onesignal wordpress

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

safari settings onesignal wordpress

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.

safari notification icons onesignal wordpress

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”.

safari web id onesignal wordpress

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.

subscribe icon on your wordpress site

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.

configure web push notification on wordpress

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

web push notification save settings wordpress

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

web push notification wordpress

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.

send test notification wordpress

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.

one signal successful setup web push notification wordpress

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

check notification status button wordpress

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.

new message manual onesignal wordpress

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.

compose web push notification onesignal wordpress

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.


Leave a Reply

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