Sharing is caring!

How to Add Web Push Notifications to Your WordPress Site

We’re all familiar with push notification on our phones. This is where an app sends you a notification or alert even though you’re not engaging with the app at that time.

Website notifications work in a similar manner. They do this by allowing you to send notifications to users who have subscribed to your website. In this article I’ll show you how to add web push notifications to your WordPress site.

Why Push Notifications?

You might be wondering, why bother with web push notifications. Web push notifications allow you to reach users across multiple devices. They can convert these visitors into customers and active followers. You also can regularly get visitors to come back to your website much sooner than usual.

The best part is that it doesn’t require a lot of commitment from the user. They can control how their devices show these notifications.

How to Begin Setting up Push Notifications

To add push notifications to your WordPress website, you’ll first need a push notification service. For the purpose of this article we’ll choose OneSignal. OneSignal has free option for their WordPress push notification service. It’s also pretty straightforward to set up.

To begin the setup, install and activate the OneSignal plugin. When you activate it you’ll see a new tab on the left column.

Next, we’ll head to OneSignal website and create an account. After successfully creating an account and logging in, go to your OneSignal dashboard. Click on the Add App button as shown below to create your first app for push notifications.

You’ll need to pick a name for your app. You can use any name you wish, but make it something memorable.

Push Notifications Add App

The next step will be to select a platform that you’ll be targeting with push notifications. Choose Web Push for now.

Push Notifications Add a New App

 

Push Notifications Edit App Website PN

On the next screen you’ll be asked to choose an integration method. In our case we are using WordPress so click on WordPress Plugin. Alternatively, you can click Website Builder then click on the WordPress logo below that.

Push Notifications Choose Integration

Next, scroll down to the WordPress Site Setup. This includes your site name, site URL, and upload an icon. This icon will be displayed in notifications so you want to make it your logo or a memorable version of it. If you have a favicon, it may be best to use it here.

Push Notifications WordPress Site Setup

The Importance of Having an SSL Certificate

Having an SSl certificate is pretty standard these days, and I’d recommend having one. For this last step you’ll need to choose if you have an SSL certificate or not. Push notifications can only be sent through secure SSL connection. If you don’t have SSL installed, turn this option off.

OneSignal gives you an option to send your notifications through them if you don’t have SSL. You’ll need to enter a label under the HTTPS toggle. This label becomes your subdomain on the OneSignal platform. Your push notifications will be sent through this sub domain.

At this point you’re done. Click the save button to save all your settings.

API ID and API Key

On the next screen you’ll see API ID and API key which you’ll need to copy back to your WordPress website.

Push Notifications Configure WordPress

Go to your WordPress admin and find OneSignal settings page. Click on the Configuration Tab. Here, enter the API ID and API key.

Push Notifications Configuration

You’re almost there. The app you set up will only allow you to send notifications through Google Chrome and Firefox browsers only. We’ll need to add Safari ID as well in order to send notifications through the Safari browser.

Let’s go back to the OneSignal dashboard and find our app. Next to your app’s settings page. Under Web Push Platforms, click on the edit icon next to Apple Safari.

On the next screen you’ll need to enter your site name, URL and upload a logo then save your settings by clicking on the Save button. On the next screen you’ll see your Safari ID. Copy it and go back to the Configurations tab and enter it there.

Push Notifications Settings

Testing Your Push Notification

Using the incognito or private window of your browser, visit your website. If all went well you’ll see a push notification popup and a bell icon at the bottom right corner of your website.

If for some reason the process is not working for you I recommend reaching out to OneSignal support. They should be able to help you out regardless if you’re on a free or paid plan.

Customize The Push Notification Popup

The notification popup you saw is rather generic. Let’s customize it and give it some personality.

Push Notifications Customizations

Go back to the OneSignal plugin settings page and click on the Configurations tab. Scroll down to the HTTP Pop-Up Settings.

First, click the toggle button ‘Customize the HTTP Pop-Up Prompt text’ so that it is in the ‘on’ mode. Enter custom text on all the fields here to match your website information.

Push Notification Pop up Settings

How to add web Push Notifications to Your WordPress Site: Conclusion

In this article we looked at adding push notifications on your WordPress website. There’s a lot more and these are just the basics. I’d love to hear from you about how you implemented push notifications on your website. Feel free to let me know in the comments below.

Sharing is caring!

Leave a Comment