How to Add Web Push Notifications to Your WordPress Website

How to Add Custom Styles to WordPress Visual Editor
September 7, 2016
Divi 3.0 Has Arrived! Introducing The Visual Page Builder So Ridiculously Fast & Easy-To-Use You’ll Think It’s Magic
September 8, 2016
Show all

When you read the term “push notifications” you probably think about the notices you get on your smartphone every time you receive an email or are mentioned in a tweet.

But while most of us are familiar with push notifications because mobile apps have been using them for years, you may not be aware that they’ve made the jump from smartphones to browsers and can now be delivered by any website.

When push notifications are used within the browser, they’re called web push notifications and I’m sure you’ve already encountered them. When you visit a site that sends notifications your browser will prompt you to allow notifications. If you allow them, you’ll be notified any time that website fires off a notification. As a matter of fact, we use web push notifications on this blog to let readers know when we’ve published a new post, so you probably get them from us unless you opted out (but I’m sure you wouldn’t do that!).

Web push notifications can be delivered to users of the desktop and Android versions of Google Chrome and Mozilla Firefox as well as users of Safari on OS X (desktop and laptop Macs, but not iPhones or iPads). Notifications are even delivered to users who aren’t using the browser when the notification is sent. In that scenario, the notification is stored until the next time the user opens their browser at which point the notification is delivered.

What Can You Do With Push Notifications?

You probably already use social media and maybe even send out a regular email newsletter. Do you really need web push notifications? Well, that depends.

Does your site post updated information on a regular basis? Do you want your users coming back to get updated information on a daily or near-daily basis? If so, yes, you really should look into push notifications.

Web push notifications are used to encourage repeat visits by site regulars. They are a particularly effective way to let users know about updated content and to get time-sensitive information in front of users as quickly as possible.

Let’s get practical. Here are three different types of sites that could benefit greatly from rolling out web push notifications:

  • Blogs that publish useful content on a very regular basis (i.e. at least several times per week) can use push notifications to let their readers know as soon as new content is published.
  • Sites that regularly post information that is highly time-sensitive, such as information about online flash sales, could get the word out to their subscribers a lot more quickly by rolling out web push notifications.
  • News sites that publish breaking news can use push notifications to highlight their most compelling new stories.

What push notifications cannot do is completely replace marketing systems such as email newsletters, or function like a hello bar to manage on-site user experience. Instead, think of push notifications as a way to keep your most loyal site regulars as up-to-date as possible.

In addition, you should be careful to never abuse web push notifications since they are easy to opt out of. As a result, it is highly inadvisable to use web push notifications for blatant advertisement or to display affiliate offers. When you send a web push notification, make sure the content you’re delivering is compelling enough that your site visitors won’t be put off by the interruption.

How Do Push Notifications Work?

When someone visits a site that has set up push notifications they are prompted by a modal window to allow notifications. If they choose to allow them, their browser registers a script supplied by the website. While some websites may choose to develop their own custom push notification scripts, most websites will use a script supplied by a third-party push notification service provider such as PushCrew or OneSignal.

When the website wishes to push a notification to its subscribers, the push notification service provider delivers the notification to subscribers thanks to the script that was registered when each user opted in. Subscribers who are online when the notification is sent will see the notification in the lower right-hand portion of their screen immediately (or as a full-width notification if displayed on an Android device). Subscribers that aren’t using the browser when the notification is sent will see it the next time they open their browser.

Push Notification Services Worth Considering

There are lots of push notification systems that can be integrated with WordPress. After wading through the list of available options, I’ve honed in on four that offer a free tier, are relatively easy to set up, and have been vetted by at least a few hundred users.

  • PushCrew

    pushcrew

    On its website, PushCrew claims that is used by more than 2,500 companies. Considering that there are more than 3,000 active installs of the official WordPress plugin, if anything, PushCrew is being a bit modest about their own popularity.

    To use PushCrew you must first sign up for an account. The free plan can be used to send notifications to as many as 500 subscribers and currently supports notifications for Firefox and Chrome with plans to add support for Safari sometime in the future. The free tier only supports notifications for desktop browser users. If you want to deliver notifications to users of the Android versions of Chrome and Firefox, you’ll have to upgrade to a premium plan.

    The PushCrew dashboard is pretty intuitive and easy to use. Once I had the PushCrew WordPress plugin installed, I was able to send my first PushCrew test notification in less than 10 minutes.

    screenshot of pushcrew notification

    Interested in PushCrew?

  • PushEngage Browser Push Notifications Plugin

    pushengage

    Active on more than 400 WordPress websites, PushEngage has far fewer installations than PushCrew. However, the free plan can be used with up to 2,500 subscribers and supports both mobile and desktop notifications for users of Chrome and Firefox. In addition, there are plans to add support for Safari desktop browser users in the future.

    One thing that makes PushEngage different from PushCrew is that you can make full use of PushEngage from within the WordPress admin area. A nice touch that means you don’t have to log into a different dashboard to send and manage notifications.

    When I tried out PushEngage it worked beautifully with Chrome. However, while it would allow me to opt-in to notifications in Firefox, it would not display notifications within that browser. I suspect the Firefox issue is either a bug that will be fixed relatively quickly or was due to an issue specific to my local client.

    PushEngage is a really compelling option for anyone who wants to send web push notifications without leaving the WordPress admin area. Just make sure to test your notification in Firefox before deciding to stick with PushEngage as your web push notification service provider.

    screenshot of notification sent with pushengage

    Interested in PushEngage Browser Push Notifications Plugin?

  • Push Notifications for WordPress by PushAssist

    pushassist

    Active on more than 200 WordPress websites, PushAssist is the least-known web push notification provider included in this article. However, the plugin boasts a strong user rating of 4.8 out of 5 stars, and it may be the easiest to use out of the lot.

    PushAssist works with Firefox, Chrome, and Safari. In addition, the free plan, which is good for up to 3000 subscribers, includes notifications for users of the Android versions of Firefox and Chrome.

    The nice thing about PushAssist is that you can do everything you need to do right from the WordPress admin, including signing up for a free account. To use it, just install it, head to the new PushAssist tab, sign up for an account, and start sending notifications.

    The developer behind PushAssist is committed to making the plugin and service as good as possible. When I tested PushAssist I did run into one minor host-specific issue. The developer promptly addressed the issue and pushed an update to the plugin so that any other users affected by the issue would receive the same fix.

    If you want to use PushAssist on more than one site from a single account can add additional sites to your account by going to https://yoursubdomain.pushassist.com/login, logging in, and navigating to Sites > Add Site. This information is also provided in a welcome email you’ll receive after signing up for PushAssist.

    PushAssist is easy to use, works with every platform that supports web push notifications, and you can do everything you need to do without leaving the WordPress admin dashboard.

    pushassist-test

    Interested in Push Notifications for WordPress by PushAssist?

  • OneSignal – Free Web Push Notifications

    onesignal

    OneSignal is the most well-established web push notification service provider. More than 60,000 clients use OneSignal, including some very big names like UBER, MTV, and Zynga. However, you have to keep in mind that OneSignal offers a lot more than just web push notifications, they also offer mobile app push notifications and a variety of analytics. Still, with more than 6,000 active installs of the official OneSignal WordPress plugin, in all likelihood, OneSignal is the most popular provider of web push notifications for WordPress websites.

    The OneSignal free tier is completely unlimited. You can use it to deliver web push notifications to all notification-enabled desktop and mobile browsers. In addition, OneSignal allows unlimited list segmentation, A/B testing, and localized delivery scheduling. All of this functionality mean that the OneSignal dashboard is a bit challenging to get used to, but if you want the broadest possible support for web push notifications without paying a dime, OneSignal delivers.

    Interested in OneSignal – Free Web Push Notifications?

SITE MANAGEMENT

Manage multiple WordPress websites with The Hub

The Hub is your mission control for monitoring the vital stats of all your sites, including uptime, performance and security. Add as many sites as you want – including Multisite networks – and receive instant security alerts, run performance scans, and get notifications when any of your plugins or themes need to be updated.

FIND OUT MORE

Walkthrough: Adding Push Notifications with OneSignal

All of the notification systems mentioned in this article might be the right choice depending on your needs. PushCrew is easy to use and offers a seamless opt-in experience. With either PushEngage or PushAssist you can do everything you need to do from the familiar confines of the WordPress admin area. OneSignal is compelling because it’s incredibly feature-rich and the free plan is completely unlimited.

While all of the plugins listed in this article performed well, my vote goes to OneSignal. However, as the most feature-rich option in the bunch, the learning curve with OneSignal is a bit steeper, but if you’re willing to spend the time to learn how to use it, it’s the clear winner.

Having said that, OneSignal is the most complicated to set up. So let’s walk through the setup process together.

Step 1: Install the OneSignal Plugin

Access your WordPress website admin area, go to Plugins > Add New and search for “OneSignal”. Find the plugin, OneSignal – Free Web Push Notifications, which should be the first result, and select Install Now.

screenshot of onesignal installing in wordpress dashboard

Once installation has completed, click Activate. If you’re installing the plugin on a multisite network, don’t network activate the plugin. Instead, go to the subsite where you want to use the plugin and activate the plugin from the subsite.

Once the plugin is activated, go to the new item added to the admin menu: OneSignal Push.

Step 2: Create a OneSignal Account and Add a New App

In a new browser tab, go to OneSignal and sign up for a free account. Once you’ve created an account, click the button to Add a new app. Name the app anything you like. From the next screen, select the Website Push option and click Next:

select-website-push

From the next screen, you will need to configure either Chrome and Firefox or Safari. For now, select Google Chrome & Mozilla Firefox. We’ll set up Safari a little later.

screenshot of onesignal set up process

On the following screen, enter your site’s full URL and the URL for the image or icon you’d like to display with your notifications. The image needs to be square and at least 80 by 80 pixels. Since my test case was my own personal website, I just used a headshot, resized it to the correct size, and uploaded it via FTP to a folder of my website. In addition, if your site can resolve using http then you must select the checkbox specifying that My site is not fully HTTPS.

screenshot of onesignal set up process

If your site is not fully HTTPS, after selecting the appropriate checkbox scroll down and choose a subdomain that will be used to collect opt-ins and deliver notifications. Then click Save.

screenshot of onesignal set up process

From the next screen, select the WordPress SDK, and click Next. OneSignal will now display your OneSignal API key and app ID. Leave this browser tab open and head back to WordPress in a separate browser tab.

Step 3: Connect OneSignal to Your WordPress Website

In your WordPress dashboard, click over to the OneSignal Push menu item. Within that menu, select the Configuration tab. Copy the App ID and API key from OneSignal over to the appropriate fields, noting that the order of the fields is reversed in the WordPress dashboard as compared to the OneSignal dashboard. If your site resolves using http, enter the subdomain you created at OneSignal in the appropriate field.

There are many additional options that you can review in the Configuration tab. However, at this point, you’ve entered all of the settings that are necessary to enable notifications in Chrome and Firefox. Once you’re satisfied with the rest of the settings, click the Save button at the very bottom of the menu.

Step 4: Set Up Notifications

For this example I’ll show you how to set things up in Safari.Go back to OneSignal and log in. From the list of apps, select the app you created previously. From the left-hand menu, select

Go back to OneSignal and log in. From the list of apps, select the app you created previously. From the left-hand menu, select App Settings. Scroll down until you see Safari in the Web Platforms section, click Configure, and type in your site name and URL.

screenshot of one signal safari set up process

When you click Save the page will refresh. Scroll back down until you see Safari. Just below Safari, you will now see a Web ID displayed. Select and copy that ID.

Go back to your WordPress dashboard, navigate to the OneSignal configuration panel, and paste the Web ID in the field labeled Safari Web ID. Scroll all the way to the bottom of the screen and click Save.

Safari users on OS X will now be able to opt-in and receive your website’s notifications.

Step 5: Send Your First Notification

Your site should now be set up to deliver notifications. To test this out, visit your site front end from a supported browser and opt-in to notifications.

onesignal-optin

Next, go to the OneSignal dashboard and select your website from the list of available apps. Click on New Message in the sidebar menu. Add a title and a comment. Click on Options, select the Launch URL option, and type in a URL that you want the notification to link to.

To send the notification, click on the Preview button. If you’re happy with the preview, click the Send button at the bottom of the menu. If all goes according to plan, since you have already subscribed to notifications you should see a notification from your website in the lower right-hand portion of your computer screen.

Screenshot of notification sent by onesignal

Well done! You’re now ready to start using OneSignal to send push notifications to your subscribers.

Next Steps

There’s a lot more you can do with OneSignal notifications. From the notification creation menu take a look at the list of available options:

  • You can create user segments and send notifications to users based on the segment they belong to.
  • You can add buttons that are displayed to Chrome users who receive your notifications.
  • You can schedule notifications to go out at a later point and set notifications to be delivered based on the receiver’s time zone.
  • You can even perform A/B testing with a small random sample of subscribers, settle on the most effective notification copy, and deliver the winning notification to your entire subscriber base.

Take the time to learn your way around OneSignal and you’ll be surprised at how much notification flexibility and analytics data is at your fingertips.

Wrapping Up

Push notifications are no longer limited to smartphones and mobile apps. When used effectively, they can be a boon to website owners by driving return traffic, serving as a method to deliver time-sensitive notifications, and notifying site regulars about updates as soon as they go live.

There are several excellent web push notification systems that integrate with WordPress quickly and easily so that you can begin boosting your site’s returning visitor traffic by leaps-and-bounds.

View @ WPMU DEV

Skip to toolbar