Among other Content Management Systems, WordPress is used in abundance in the current era of the Internet world. It comes with endless opportunities for web users. You can use WordPress for creating social networking websites, community forums, blogging resources, ecommerce online stores and much more.
When we blog, we create new content quite regularly. All that content creation needs to be marketed to generate some interest among viewers. What is the better way to market it than showing a pop-up at the bottom right of the screen, whenever a blog post is live?
WordPress push notifications help in pushing blog updates to our visitors as and when they happen. They are just like Desktop Notifications but are more primarily used for websites on the Internet. For example, when you are not accessing Facebook, and suddenly your browser prompts you up with a small window on the bottom right corner of the screen based on any activity on your social profile, it is an example of a Push Notification.
In today’s article, I’ll show how you can enable Push Notifications at your WordPress website and direct extra traffic to your website. In WordPress directory, you can find many plugins that can automatically provide/enable desktop notifications for you. You can make use of any of them as per your preferences. However, for this tutorial, I will use “OneSignal Web Push Notifications”.
When you publish a post, this push notification will send notifications to your subscribers even if they have left your website.
So, here we go!
I am assuming that your website is hosted on the most optimized, Managed WordPress Hosting Platform, Cloudways. If it is not, I would suggest you host it for best performance.
Installing “OneSignal Web Push Notification” Plugin
Navigate to “Plugins > Add New”. From the top right search box, search for “OneSignal”. Click on “Install Now”. After successful installation, click on “Activate”.
Navigate to “OneSignal Push” from the left pane of WordPress Admin Dashboard. You’ll see the default dashboard of the plugin, guiding on how you can quickly set up the plugin.
Steps for Enabling Desktop Notification for WordPress Website
Let me cover the necessary steps to configure and enable desktop notifications on Chrome and Firefox. Navigate to Chrome and Firefox tab and follow the on-screen instructions like described below.
First of all, you need to create an account on OneSignal. After successful registration, it will take you to OneSignal dashboard, where you need to add a new app. Click on Add a new app. It will ask the name of the application, name it accordingly. In my example, I’m calling it as “Testing Web Push”.
Click on Create button, and it will take you to Select Platform. Choose Website Push from available options.
Then click on Next button, at the bottom right of the popup. Then select Google Chrome & Mozilla Firefox icon.
After selecting the platform, it will ask the URL of your website.
Note: If your site in not fully HTTPS secured, enter URL with HTTP:
Don’t use a forward slash at the end of the domain name. http://domain.com/
Since Google Chrome requires a website functional via HTTPS to send WordPress push notifications, OneSignal allows you to create HTTPS subdomain, which will be used to send notifications. If you scroll down a bit, you will see OneSignal automatically suggested a subdomain. You can rename it, but be sure before choosing a name. That’s because as many a time you will prefer to rename it, your visitors will again be asked to accept notification permissions.
I would suggest installing FREE SSL Certificate to the WordPress site, as Google is pushing it forcefully. If your website already has an SSL certificate installed, follow-on screen instructions guided by OneSignal.
To get the first subscribed user, OneSignal setups SDK which you will need before you send out your first test notification. Here, choose WordPress from available options.
Now we need to install the SDK. Click on the Next button, and it will generate a Rest API Key and APP ID.
Now, from WordPress Admin Dashboard navigate to OneSignal Push -> Configuration, copy and paste above keys one by one in their respective text field and also enter the subdomain provided by OneSignal.
Click on the Save button provided at the very bottom of your screen.
Subscribe to Web Push Notifications
After setting up, visit your website and you will see a notification icon at the right bottom of your site like the image below.
Click on the icon to subscribe to web push notifications. It will open a new window asking to allow permissions for your subdomain to send push notifications. Click on the Allow button.
Once allowed, go back to OneSignal dashboard, and click on the Check Subscribed Users option.
You have now successfully added a subscriber. The Done button will now become visible describing that your push notifications are working fine!
Send Push Notification to Subscribers
Okay, so we have configured everything correctly and also subscribed to get push notifications. Let’s test it, I have created a new post from my WordPress website titled as “New Post”, and published it. 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.
Customize Notification Icon
OneSignal allows you to customize notification icon that can be matched with your theme. From WordPress admin dashboard, navigate to OneSignal Push -> Configuration. There, you will find a lot of configuration settings like below:
- Account Settings
- Sent Notification Settings
- Prompt Settings & Notify Button
- HTTP Permission Request Settings
- Popup Settings
- Welcome Notification Settings
- Automatic Notification Settings
- UTM Tracking Settings
- Advanced Settings
What more can you find in OneSignal Push Notification?
OneSignal Push Notifications is all in one solution for all kind of desktop and mobile notifications. Here are some of the most highlighted features listed, you can find the complete list here.
- Third Party Integrations
- Free & Unlimited
- Real Time Tracking
- A/B Test Messages
- Segmentation Targeting
And you’re done!
I would further suggest you explore more about OneSignal push notifications for WordPress. You might be thinking, is it FREE? Yes – It is! But, you still might be worried, how they earn? They sell subscribers data to advertisers and research companies. However, if you are concerned about the data, you can get the premium version. Also, you can access the complete documentation from here.
I suppose you have learned how to successfully integrate “Desktop Notifications” using “OneSignal Web Push Notifications” WordPress plugin. So, whenever someone visits your website and clicks on the notification icon, he will be asked to allow desktop notifications for your site. Subscribed users will now be notified, as of when you publish a post.
If you have any queries about the procedure as mentioned earlier, then feel free to ask me using the comments section below.
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
Be the first to check out WordPress 5.0
Use our Staging feature before upgrading your website to WordPress 5.0.