Have you heard of browser-based web push notifications?

Setting up browser push notifications on your blog helps you stay top of mind with people who are interested in your content, but aren’t ready to give you their email address.

In this article, you’ll discover how to add Chrome and Firefox push notifications to your blog.

Setting up Web Push Notifications in WordPress with OneSignal

 

OneSignal is a free service that allows you to add push notifications to any website, web, or mobile apps.
First thing you need to do is install and activate the OneSignal plugin.

Upon activation, the plugin will add a new menu item labeled OneSignal in your WordPress admin bar. Clicking on it will take you to plugin’s settings page.

Capture

The settings page is divided into Setup and Configuration tabs. The setup tab is actually detailed documentation on how to setup OneSignal push notifications in WordPress. It has the same steps that we will show you in this tutorial.
To setup OneSignal, you will need to add different API keys and application IDs into the plugin settings.
Let’s get started.

Step 1: Create Google Keys

First you need to visit Google Services Wizard website.

googleservicesapp

Simply provide a name for your app and add an Android package name. OneSignal does not use Android package name, but it is a required field.
Next, choose your country and region, then click on the ‘Choose and configure services’ button.
This will bring you to the next screen where you will be asked to select Google services you want to use with your app. You need to click on ‘Enable Google Cloud Messaging’ button.

enablecloudmessaging

You will now see your server API key and Sender ID.

gkeys

You need to copy your Sender ID and paste it in WordPress plugin’s Configuration tab under Google Project Number field.
You also need to copy your Server API key and paste it in a text file on your computer. You will need this API key later in this tutorial.

Step 2: Setting up Chrome and Firefox Push Notifications

We will now setup push notifications on Chrome and Firefox. First you need to visit OneSignal website and create your free account.

Capture

Once you have created your account, you need to login and click on ‘Add a new app’ button.

Capture

You will be asked to enter a name for your app. You can use any name you want and then click on ‘Create’ button to continue.

Capture

On the next page, you will be asked to select a platform to configure. You need to select ‘Website Push’ and then click on the next button to continue.

Capture

After which you will be asked to select browser platform. You will see Google Chrome and Mozilla Firefox in one box and Safari in another box.

You need to click on Google Chrome and Mozilla Firefox box.

Capture

Click on the next button to continue.

In the next step, you will be asked to enter your WordPress site url, Google Server API key, and URL for your default notification icon image.

Capture

If your website does not support SSL/HTTPS, then you need to check the box next to ‘My site is not fully HTTPS’ option. You can also setup SSL on your website if you like, but it’s not required.

Google Chrome does not support web push notifications for non-ssl or http websites. OneSignal solves this problem by subscribing users to a subdomain on their own https domain.

Checking ‘My site is not fully HTTPS’ option will display HTTP fallback options. You will need to choose a subdomain for your app and enter Google Project Number or Sender ID you generated in the first step.

Capture

Click on the Save button to continue. Now you can exit this dialog box. You will be prompted with a notice that your setup isn’t complete yet and can be resumed later. Click Yes to close the dialog box.

Step 3: Getting OneSignal Keys

You now need to get OneSignal Keys for your website. From your app dashboard click on App Settings.

appsettingslink

This will take you to your app settings page. You need to click on the Keys and IDs tab.

keysandids

This will show your OneSignal App ID and Rest API Key.

onesignalkeys

You need to copy and paste them in OneSignal WordPress plugin’s configuration tab on your site.

That’s all, you have successfully setup OneSignal web push notifications for your WordPress site.

Step 4: Testing Web Push Notifications on Your WordPress Site

By default, OneSignal plugin will add a subscription icon to your WordPress site. Visit your website in a supported browser and then click on the subscribe button.

subscribepushnotif

You will see the default ‘thank you for subscribing’ message.

Now login to OneSignal account. Click on your app name, and then on App Settings.

Scroll down to the web platforms section and click on the configure button next to Google Chrome and Firefox.

cofigwebpush

You will see the platform configuration screen which you filled in earlier. Simply click on Save button and then click on Continue.

testingwebpush1

You will be asked to select target SDK. You need to select WordPress and then click on Next.

testingwebpush2

Since you only have one subscriber at the moment your subscriber ID will be automatically filled.

Click on the next button, and you will reach the ‘Test Settings’ step.

Click on ‘Send Test Notification’ button.

sendtestnotif

One Signal will now send a web push notification.

The notifications appearance may differ depending on which browser you used to subscribe. When the notification appears on your computer screen you need to click on it.

testnotif

It will take you to confirmation screen, showing that you have successfully setup OneSignal web push notifications for your website.

successmsg

Return back to the configure screen on OneSignal website and click on ‘Check Notification Status‘ button.

notifstatuscheck

You will now see another success message which indicates that you have successfully added web push notifications to your WordPress site.

How to Send Web Push Notifications in WordPress with OneSignal

The OneSignal web push notifications plugin on your WordPress site will automatically send a notification to all subscribers when you publish a new post.

You can also manually send notifications from your OneSignal App Dashboard. Login to your OneSignal account and click on your app name.

From the menu on your left, click on the ‘New Message’ button.

newmessage

This will bring you to the new message screen. You can enter a title and some content for your notification.

composepushnotification

You can also click on the Options, Segment, Schedule/Send Later to further customize your web push notification.

For example, you can link it to a particular page on your site, send it to a particular segment of your users, or schedule it to be sent at a specific time.

We hope this article helped you add web push notification your WordPress site.

Comments

Share.