How to add web push notifications to your WordPress website

Popular websites like Facebook have web push notifications, which are clickable messages displayed on top of the user’s desktop even when the browser is closed. It is also possible to enable push notifications to your WordPress site.

Push notifications can be displayed on desktop or mobile. They enable the user to stay updated about all the recent notifications on specific websites. Email marketing, other social media, and even SMS are less engaging compared to web push notifications. For mobile devices, push notifications have an open rate of 50%.

In the article below, we outlined how to add web push notifications to your WordPress site.

How to set up web push notifications in WordPress?

Setting up web push notifications in WordPress can be done by using the OneSignal plugin. OneSignal is a free service that enables you to add push notifications to web or mobile apps or websites.

To use the OneSignal plugin:

1. Install and activate the OneSignal plugin.
2. Once the plugin is activated, you will find a OneSignal menu item at the bottom of the WordPress admin bar. Click on it to open the plugin’s Settings page.

The setting page has Setup and Configuration tabs.

The setup tab is comprised of detailed documentation on how to set up OneSignal push notifications in WordPress. To set up OneSignal, you have to add API keys and application IDs to the plugin settings. Follow the steps mentioned below to configure the plugin.

Step 1: Creating Google Keys

1. Visit the Google Services Wizard website.
2. Type in a name for your app and add an Android package name. OneSignal does not need the Android package name, but this field is mandatory.
3. Choose the country and region and click on Choose and configure the services.
4. On the next screen, you can select the Google services that you want to use with your app. Click on  Enable Google Cloud Messaging. The server API key and Sender ID appear on the screen.
5. Copy your Sender ID and paste it into the plugin’s Configuration tab. Paste the ID under the Google Project Number field.
6. Copy your Server API key and paste it into a word/text file; you will need it later.

Step 2: Setting up Push Notifications for Chrome and Firefox

1. Visit the OneSignal website and create a free account.
2. Log in to your account and click on Add a new app.
3. Enter the name for your app and then click on the Create button.
4. When asked to select a platform to configure, choose Website Push and click Next.
5. Select the browser platforms. Click the Google Chrome and Mozilla Firefox box for now. The details on setting up Safari will appear later in the article.
6. Click Next.
7. Enter the WordPress site URL on the page that appears. Also, include the Google Server API Key and URL for your default notification icon image.
8. Check the box next to My site is not fully HTTPS option if your website does not support SSL/HTTPS. You can also set up SSL on your website, but this is not mandatory.

Please note that Google Chrome does not support web push notifications for non-SSL or HTTP websites. OneSignal subscribes users to a subdomain on their HTTPS domain to solve this problem.

Checking the My site is not fully HTTPS option displays the HTTP fallback options. Choose a subdomain for your app and enter the Sender ID or Google Project Number that you generated in the first step.

9. Click Save and exit the dialogue box. You are prompted with a notice indicating that your setup is not complete. Click Yes to close.

Step 3: Getting OneSignal Keys

1. Click App Settings in your app dashboard.
2. Click on the Keys & IDs tab from the app settings page that appears next.
3. Copy the OneSignal App ID and Rest API Key that appears on your screen. Paste them in the configuration tab of the OneSignal WordPress plugin.

Step 4: Setting up Safari Web Push Notifications

1. Log in to your OneSignal account and go to your App Settings page.
2. Click on Configure next to Apple Safari after scrolling down to web platforms.
3. Enter the site name and site URL in the dialogue box that appears next.
4. Check the box next to the ‘I’d like to upload my own notification icons’ option.
5. You will be given an option to upload different icon sizes.
6. Upload all your icons by clicking on Choose File buttons.
7. Click Save and close the dialogue box.
8. Refresh the App Settings page. Scroll down to the Web Platforms section. The Web ID appears under Apple Safari.
9. Copy the Web ID and paste it to the Configuration tab of the OneSignal plugin.

After following these steps, you have successfully configured web push notifications for your WordPress site.

5. Testing push notifications on your WordPress site

The OneSignal plugin adds a subscription icon to your WordPress site by default. To test the web push notifications on your WordPress site:

1. Visit your WordPress site in a supported browser, and click on the subscribe button. A default Thank you for subscribing message appears on the screen.
2. Log in to the OneSignal account. Click on your app name and the App Settings tab.
3. Scroll down to the web platforms section and click on Configure next to Firefox and Google Chrome.
4. Click Save and Continue on the platform configuration screen that appears next.
5. Select the target SDK. Select WordPress and click Next. Your subscriber ID is automatically filled since you have only one subscriber at the moment.
6. Click Next to open the Test Settings section.
7. Click on Send Test Notification. After this, OneSignal will send a web push notification to you. The notifications differ depending on the web browser.
8. Click on the notification that appears on your screen. A confirmation will appear informing you that you have set up OneSignal web push notifications successfully.

Return to the OneSignal website configure screen and click on the Check Notification Status button. Another success message appears, indicating that you have successfully added web push notifications to your WordPress site.

How to send web push notifications in WordPress with OneSignal?

When you publish a new post, the OneSignal web push notifications plugin automatically sends a notification to all subscribers.

To manually send notifications to subscribers using the OneSignal App Dashboard:

1. Log in to your OneSignal account and click on your app name.
2. Click on the New Message button from the menu on your left.
3. Enter the title and the text of your notification from the new message screen that comes up.
4. Click on the Options, Segment, Schedule/ Send Later options to customize your web push notifications.

There are multiple ways to configure the web push notification as you need. For example, you can link it to a specific page on your site or send it to a particular audience segment. You can also schedule the notification to be sent at a certain time.

If you need help with your HostPapa account, please open a support ticket from your dashboard.