Maybe your WordPress website is among the significant number of the sites that regularly publish new content. In order to get the right eyeballs in a healthy number, every single content piece should be marketed to the right audience.
Can you think of a better way of marketing your content than showing a web push notification that pops up on your subscriber’s screen, every time you update or take a new blog live?
Let’s dig a bit deeper and see how you can add WordPress push notification to your website via OneSignal.
- What Is WordPress Push Notification?
- WordPress Push Notifications Plugin
- Enable Desktop Notifications for WordPress
- Subscribe to WordPress Desktop Notification
- Send Desktop Notification to Subscribers
- Unsubscribe from WordPress Push Notifications
- Customize the OneSignal WordPress Notification Bell
- What More Can You Find in OneSignal Push Notifications?
- Explore Subscribed Users
- Track Web Push Notifications
- More WordPress Push Notification Plugins
What Is WordPress Push Notification?
WordPress push notifications kick in every time a blog is updated or published on a blog. These notifications resemble desktop notifications and are a great tool for re-engaging your existing audience. If used smartly, Web push notifications can potentially become the top referral source for your websites.
Facebook is one of the many products/platforms that have elevated the use of web push notification to a fine art. If you have enabled chrome push notifications, and the Facebook tab is closed, you usually see a pop-up notification of a new post in the bottom right corner of the screen.
Why Use WordPress Push Notifications?
WordPress push notifications come handy when brands want to re-engage their audience. In particular, web push notifications are useful for:
- Special Offers: Promoting special discounts or limited time offers to drive more sales.
- Announcements: Inform and educate the audience about key events, products updates, etc.
- Onboarding: Welcome new visitors, notifications about a purchase, requests for product reviews, abundant cart, upsell, etc.
In today’s guide, I’ll show how you can enable chrome push notifications for WordPress and redirect more traffic to your website. WordPress plugin directory has several plugins that can automatically provide/enable desktop notifications for your visitors/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.
In a nutshell, here’s how the plugin works: When you publish/update a post (and marked the checkbox where it says, send notification on post update just above the Publish button), OneSignal will send a web push 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, learn how easy is to host a WordPress website on Cloudways for the best performance.
WordPress Push Notifications Plugin
Let’s start with installing the OneSignal WordPress Push Notifications plugin.
Login to the WordPress Dashboard, Navigate to → Plugins → Add New. In the top right search box, search for “onesignal” (without space). Once found, click the Install Now button, and then activate the plugin.
Navigate to OneSignal Push from the left admin menu. You will see the default OneSignal dashboard, that offers tips on how you can quickly set up OneSignal to start sending out WordPress push notifications.
Enable Web Push Notifications for WordPress
Enabling the OneSignal WordPress plugin and setting up desktop notifications for Chrome and Firefox browsers is a simple matter.
Start by creating an account on 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”.
Next, click the Add App button and it will redirect you to Select Platform. Since I am setting up web push notifications, I will choose Web Push from the available options and click the Next button.
On the next screen, choose WordPress plugin or Website Builder and then select WordPress as shown in the screenshot below.
Scroll down a bit and enter the necessary details like site name and URL. If your website is not using HTTPS, remember to set the toggle labeled My site is not fully HTTPS.
Note: Google highly recommends securing WordPress websites with SSL certificates.
Click Save at the bottom of the page. Next, you will be provided the App ID and the API Key that would be used in setting up the OneSignal WordPress plugin.
Get back to your WordPress Dashboard → OneSignal Push → Configuration and paste the above keys.
And now, you have a long list of options that needs to be enabled or disabled.
Subscribe to WordPress Push 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 web push notifications from your website.
A new pop-up will appear seeking permission from the visitor for delivering and displaying push notifications.
If a user clicks the Allow button, he will see a pop-up at the bottom of the page.
And, the visitor is now subscribed to receive web push notifications successfully.
Send Push Notification to Subscribers
Okay, so now you have configured everything correctly and the visitors can subscribe to receive WordPress push notifications.
Let’s test this!
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.
Unsubscribe from WordPress Push Notifications
The best part about OneSignal push notification is it allows the 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 web push notifications.
Alternatively, visitors can change subscription preferences by going to the Site Settings.
Here, visitors can choose their preference to get chrome push notifications for your website.
Find Websites You Have Already Subscribed
Every browser maintains a list of the websites a person visits and subscribed to. In this tutorial, I will focus on chrome push notifications. To see the list, follow these steps:
- Open Chrome.
- In the top right, click the three vertical dots (⋮), and then Settings.
- At the bottom, click Advanced.
- Look for “Privacy and Security,” click Site settings.
- Click Notifications to see the list of Blocked or Allowed websites.
- To block a site: Next to “Block,” click Add. Enter the site and click Add.
- To allow a site: Next to “Allow,” click Add. Enter the site and click Add.
- To edit a site: Click (⋮), Edit and choose your preference.
For other browsers, check out their official docs about web push notification.
Customize the OneSignal Notification Bell
OneSignal push notification plugin allows you to customize the notification icon. This is a great way to ensure that the OneSignal icon matches the installed WordPress theme.
For this, navigate to WordPress Dashboard → OneSignal Push → Configuration. There, you will find the following WordPress notification 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
Explore Subscribed Users
The best thing about OneSignal web push notification is the 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.
To know more about your WordPress push notification subscribers, click View Users.
And, you will see how well OneSignal organizes data on subscribers.
If you wish, you can also remove/delete a subscriber by clicking the OPTIONS and select Delete.
Track Web Push Notifications
From the top menu bar, navigate to Delivery. All your WordPress pushed notifications are available in this section. Not only this, you can get more insights about each pushed notification by clicking the push notification title. In my case, it’s the ‘New Post’.
More WordPress Push Notification Plugins
As I mentioned earlier, there are a lot of options in WordPress plugins for sending out web push notifications. If you are not comfortable with what OneSignal has to offer, you can test the following plugins:
Since this guide was focused on using OneSignal, I would suggest you explore more about OneSignal push notification for WordPress.
Now comes the BIG question: is it FREE? Yes, it is!
OneSignal’s 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 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.
Start Growing with Cloudways Today!
We never compromise on performance, security, and support.
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 firstname.lastname@example.org