How to Add Browser Notifications for WordPress

If you’ve tried growing your email subscriber list but aren’t seeing visitors return to your site, you might be wondering what else you can do. Keeping site visitors informed of updates and driving return traffic to your site can be a challenge. 

Fortunately, browser notifications or ‘push’ notifications can add a dynamic element to your website’s experience. The option to push information through each user’s browser can open up a new way to keep your visitors informed, and even gather new subscribers. 

In this article, we’ll explain what push notifications are and where they can be used. We’ll also walk through how to set them up for both desktop and mobile browsers. If you’re ready to learn more about this useful technique, let’s get started! 

What Are Website Browser Notifications (Push Notifications)?

As a web user, you might be more familiar with push notifications when it comes to your smartphone. Push notifications, true to their name, ‘push’ information automatically to your device or browser to let you know when something notable has happened. This might be when you’ve received a text message, for instance, or gotten a like or comment on a social post. 

In fact, 52% of mobile users have push notifications enabled on their phones. What’s more, the same technology can be used to achieve push notifications within desktop web browsers. By enabling push notifications for your website, you can capitalize on features like geo-location to create personalized experiences, or track buyer habits to reduce abandoned shopping carts. 

One example of browser notifications in action is the Freefly’s coupon and free samples website. Freefly’s uses a push notification for desktop browsers. When a user visits the site, they are greeted with a notification asking if they’d like to get their “Freebies Alerts”. You can select “Yes” or “No Thanks”, and continue viewing the website:

A case study on Freefly’s implementation of push notifications reveals that its objective was to provide instant communication of time-bound deals to visitors. This approach attracted 4,400 new subscribers in 30 days, after just a three-minute setup process. 

How to Set Up Browser Notifications With WordPress (In 6 Steps)

Now let’s take a look at OneSignal, a free WordPress plugin that offers unlimited mobile push and web notifications for up to 30,000 subscribers.

OneSignal also features the ability to segment audiences, implement localization features, track results with Google Analytics, and make use of a robust API.

This means you can integrate it with all the top email marketing services to send newsletters via push notifications, for an even more personalized customer experience. Let’s take a look at how to get started with OneSignal by following these six steps.

1. Download and Install the OneSignal Plugin

First, you’ll want to head over to the WordPress Plugin Directory and search for OneSignal. Once you download the plugin’s files, you’ll need to then visit the Plugins section in your WordPress site’s admin area.

Alternatively, you can search for OneSignal from within the Plugins section, and add the free plugin right there.

After you’ve installed the plugin, make sure to select the Activate button that appears after installation is complete. When you’ve done that, you can click on the OneSignal link to complete the process. 

2. Visit the OneSignal Website to Connect With WordPress 

Over at the OneSignal website, you’ll need to create a free account. There are also a few steps you’ll have to complete to make sure OneSignal is configured for your WordPress site, and to choose the browsers you want to use.

Once you sign up, you’ll be asked to select an application for your notifications.

In our example, we are going to use Chrome. You’ll need to name your application to continue to the next step. On the following screen, you’ll be asked to configure your web push.

You’ll want to select WordPress plugin or Website Builder at the top of the screen to change the options presented. Once you do that, you’ll see a WordPress icon you can choose from, among a list of other web applications. 

After you select the WordPress icon, more configuration options labeled WordPress Site Setup will appear below. This is where you’ll be able to add your website’s information and upload a custom icon if you want to.

In this setup dialogue, you’ll also find documentation regarding sites that are not fully HTTPS. If you’re in that situation, you’ll want to review this documentation and follow OneSignal’s recommendations. When you’ve completed filling out your site’s information, save your changes.

3. Confirm Configurations in Your WordPress Plugin Settings Panel

Once you’ve saved your WordPress Site Setup information, you’ll be presented with a screen of important details that need to be transferred to your OneSignal settings panel in WordPress. These include your API ID and API Key for the application you just set up.

You can use the Go To My Website button below the API information, or navigate to your WordPress dashboard in another browser tab to complete the setup.

Once you’re in your dashboard, you’ll want to click on OneSignal Push in the left-hand menu and select the Configuration tab. This is where you’ll need to enter those API codes, in order to make the final connection between WordPress and OneSignal.

To set up a push notification for the Apple Safari Browser as well, you’ll have to go back to the OneSignal website and add Safari as an application (and so on for other browsers).

4. Customize Your Popup Message

Now that you’ve made the connection between WordPress and OneSignal, you can start customizing all the various options included in the plugin. This includes the popup message for subscribing to your push notifications.

Within the OneSignal Push settings in WordPress, you can scroll down below the API information and decide what you want your push invitation text to say.

This is an excellent way to personalize the experience and entice visitors to use your notifications. 

5. Customize Your Notification Icon

Another key item you can customize is the notification icon. This will enable you to tweak the way visitors receive notifications in their browsers. For example, you can design a custom thank-you message that visitors will receive once they subscribe.

Additionally, you can configure the text for notifications that will appear if a visitor blocks or unsubscribes from your push notification service. While this will sometimes happen, you can try to keep the visitor hooked by crafting a message that makes it clear why staying subscribed to your notifications is beneficial.

6. Send Notifications From Your WordPress Website

Now that you’re all set up with OneSignal, you might be wondering how to send notifications. Fortunately, the OneSignal application will automatically send push notifications any time a new post is published on your website.

However, if you want to manually send a notification for a page or post, you can do that from any WordPress editing screen.

Under the Document tab, you’ll now have a OneSignal option. From there, you can check the box to push a new browser notification whenever the post is updated. This might be particularly useful if you are updating an item in your online store, for example. You can also configure OneSignal to automatically send push notifications for certain custom post types. 

Need Help Improving Your Digital Experience?

Setting up push notifications for your WordPress website can be a perfect way to create a dynamic experience for your site’s visitors. If you enjoyed learning about this tool, you’ll love the other excellent developer resources we have to share here at WP Engine. 

WP Engine provides more than just fast and reliable WordPress hosting services. With our fully managed hosting platform and 24/7 support, you can focus on developing an excellent website design for your customers, and leave the hosting management to us!