Chat with us, powered by LiveChat

This website uses cookies

Our website, platform and/or any sub domains use cookies to understand how you use our services, and to improve both your experience and our marketing relevance.

Faster WordPress Hosting: An Experiment for the Best Load Time (79ms). SEE HOW

How to Enable WordPress Push Notifications Using OneSignal

Updated on December 25, 2018

7 Min Read
Push-Notification-in-WordPress-Banner
Reading Time: 7 minutes

WordPress offers endless opportunities for building awesome projects that could include social networking websites, community forums, blogging resources, ecommerce online stores and much more.

Almost every WordPress website produces content quite regularly. However, this is just where the game starts. Every single piece of content should be marketed to the right audience in order to generate the right response. Can you think of a better way of marketing your content than showing a pop-up at the bottom right of the screen, every time you take a blog to live?

Let’s dig a bit deeper and learn how you can add WordPress push notification to your website.

What Is WordPress Push Notification?

WordPress push notifications help in pushing blog updates to subscribers when you post a new blog or update one. These notifications resemble desktop notifications and fit right into the UI preferred by the user.

A very good example of a web-based notification is used by Facebook. When the Facebook tab is closed, you might see a pop-up from the bottom right corner of the screen, with notification of a new post in your Facebook stream.

In today’s article, I’ll show how you can enable desktop notifications for WordPress and redirect more traffic to your website. WordPress plugins directory has several plugins that can automatically provide/enable desktop notifications for your users/subscribers. While I urge you to experiment with the plugins to discover the best fit for your website, for the purpose of this tutorial, I will use OneSignal – Web Push Notifications plugin.

When you publish/update a post (and checked where it says, send notification on post update just above the Publish button), OneSignal will send a desktop notification to the subscribers even if they have left your website.

So, here we go!

At this point, I am assuming that your website is hosted on Cloudways, a very powerful managed WordPress Hosting Platform. If that’s not the case, I would suggest you host your WordPress websites on Cloudways for the best performance.

WordPress Push Notifications Plugin

Let’s start with installing the OneSignal WordPress Notification plugin.

Navigate to WordPress Dashboard → Plugins → Add New. From the top right search box, search for “onesignal” (without space). Once found, click the Install Now button and then activate the plugin.

plugin-installation

Navigate to OneSignal Push from the left admin menu of the WordPress Dashboard. You will see the default dashboard of the plugin, that offers tips on how you can quickly set up the plugin.

setup-confiigure

Enable Desktop Notifications for WordPress

Enabling the plugin and setting up desktop notifications for Chrome and Firefox browsers is a simple matter.

Start by creating an account at the OneSignal website. After successful registration, you will be redirected to the OneSignal dashboard, where you need to add a new app. Click the Add App tab and enter the App Name. For the purpose of this tutorial, I am naming the app “Testing Web Push”.

add application

Next, click the Add App button and it will redirect you to Select Platform. Choose Web Push from the available options, and click the Next button.

edit app push

On the next screen, choose WordPress plugin or Website Builder and then select WordPress as shown in the screenshot below.

choose integration

Scroll down a bit and enter the necessary details like site name and URL. If your website is not on HTTPS, remember to set the toggle labeled My site is not fully HTTPS.

Note: Google highly recommends adding SSL certificates to WordPress sites.

wordpress site setup

Click Save at the bottom of the page. Next, you will be provided the App ID and the API Key that would be in OneSignal WordPress plugin.

configure wordpress pugin

Get back to your WordPress Dashboard → OneSignal Push → Configuration and paste the above keys.

account settings

And now, you have a long list of options that need to be enabled or disabled.

Subscribe to WordPress Desktop Notification

Now, whenever someone visits your website, OneSignal will show a bell at the bottom left or right side of your website. A visitor can click this bell icon to subscribe to your content.

subscribe to notifications

A new pop-up will appear seeking permission from your visitor for delivering and displaying desktop notifications.

show notifications

If the user click the Allow button, your visitor will see a pop-up like below at the bottom of the page.

just another wordpress site

And, your visitor is subscribed successfully.

you are subscribed

Send Desktop Notification to Subscribers

Okay, so now you have configured everything correctly and are also subscribed to for WordPress push notifications. Let’s test it!

I have created and published a new post on my WordPress website titled ‘New Post’.

Here is the notification icon at the right bottom of my screen. As you can see, the default image, site name, post title and the subdomain name are already there.

new post

Unsubscribe from WordPress Push Notifications

The best part about OneSignal web push notification is it allows your visitors to unsubscribe easily. Simply click on the Bell icon at the bottom of your screen and it will present a message to unsubscribe from push notifications of your WordPress site.

manage site notification

Alternatively, visitors can change subscription preferences by going to the Site Settings.

site settings

Here, users can choose their preference for subscribing to your WordPress website’s content.

ask default

Customize the OneSignal Notification Bell

OneSignal allows you to customize the notification icon. By opting for this option, you can match the icon to the installed WordPress theme. For this, navigate to WordPress Dashboard → OneSignal Push → Configuration. There, you will find the following configuration settings:

    • Account Settings
    • Sent Notification Settings
    • Prompt Settings & Notify Button
    • HTTP Pop-Up Settings
    • Welcome Notification Settings
    • Automatic Notification Settings
    • UTM Tracking Settings
  • Advanced Settings

What More Can You Find in OneSignal Push Notification?

OneSignal Push Notification is an all-in-one solution for all kind of WordPress desktop and mobile notifications. What follows is a list of the most popular features. If you wish, you can read the full list here.

  • 15 Minute Setup
  • Third Party Integrations
  • Free & Unlimited
  • Real-Time Tracking
  • A/B Test Messages
  • Segmentation Targeting

And you’re done!

Explore Subscribed Users

The best part in OneSignal is that you have extensive data on the subscribers that you can analyze for ‘connecting the dots’.

For this, login to your OneSignal account, navigate to Users and see all the data.

OneSignal account,

To know more about your WordPress push notification subscribers, click View Users.

And, you will see how well OneSignal organizes data on subscribers.

OneSignal organizes

If you wish, you can also remove/delete a subscriber by clicking the OPTIONS and select Delete.

add test users

Track Notifications

From the top menu bar, navigate to Delivery. All your pushed notifications are available in this section. Not only this, you can get more insights about each notification by clicking on the push notification title. In my case, it’s ‘New Post’.

Track Notifications

More WordPress Push Notification Plugins

As I said earlier, there are a lot of options in WordPress plugins for sending out push notifications. If you are not comfortable with what OneSignal is offering, you can test the following plugins:

Since this guide was focused on using OneSignal, I would suggest you explore more about OneSignal push notifications for WordPress.

Now comes the BIG question: is it FREE? Yes, it is!

Their business model involves selling subscriber data to advertisers and research companies. However, if you are concerned about the privacy of your subscribers (and you should be!), get the premium version.

In case you run into any issues, check out the official documentation of the plugin to discover a solution. If you have any queries about the plugin integration or functionality, feel free to ask me through the comments section below.

Share your opinion in the comment section. COMMENT NOW

Mustaasam Saleem

Mustaasam is the WordPress Community Manager at Cloudways - A Managed WordPress Hosting Platform, where he actively works and loves sharing his knowledge with the WordPress Community. When he is not working, you can find him playing squash with his friends, or defending in Football, and listening to music. You can email him at mustaasam.saleem@cloudways.com

Start Growing with Cloudways Today!

We never compromise on performance, security, and support.

Get Our Newsletter
Be the first to get the latest updates and tutorials.

Do you like what you read?

Get the Latest Updates

Share Your Feedback

Please insert Content

Thank you for your feedback!

THERE’S MORE TO READ.