How to Add Push Notification on WordPress Website?
Do you want to add push notification on your WordPress website?
Push notification lets you send the notification to your users even when they are not visiting your website. This will not only help you notify your users about the new release and the updates that you are working on your website but can also increase their page views.
In this tutorial, we will discuss how you can add push notification on your WordPress site.
- Why Add Push Notification to your WordPress Website?
- Setting up Push Notification in WordPress Website
- Send a Welcome Push Notification to New Subscribers
Why Add Push Notification to your WordPress Website?
As we have discussed what a push notification is and what it will do to your website. Now its time to discuss why you should add it on your WordPress website.
You might have already known about 70% of visitors who leave your website never return back. This is why it is important to convert those audiences into subscribers or customers.
You can do this by utilizing multiple channels like email marketing, social media marketing, mobile or SMS marketing etc.
While email lists are still the dominant marketing tool, a push notification can also quite effective as well.
Here are the reasons why:
- Users need to give their explicit permission to receive the push notification. This means they are already interested in your offers and are likely to engage with notifications.
- Push notifications are shorter and demand less attention than emails and social media updates.
- There is no algorithm, so almost 100% of the messages are delivered.
- User will have control over the devices to display notifications. They can snooze them, or turn them off entirely.
- There is less number of companies using it.
Many popular websites like Facebook, Pinterest, LinkedIn, etc understand the importance of push notification and are already using push notifications.
These notifications are more engaging than SMS, email marketing, and social media platforms.
With that being said, let’s take a look at how to add push notification to your WordPress website:
Setting up Push Notification in WordPress Website
Step 1: Installation and Activation
The first thing you need to do is install and activate OneSignal plugin. If you need any help for the installation of the plugin, you can check out the article: How to install plugins in your WordPress website
Upon activation, you can see a new label “OneSignal Push” on the left menu of your WordPress dashboard.
Click on it to continue.
You will land to the setup page of the plugin. Click on “OneSignal” to create or login to the OneSignal account.
Step 2: Setting Up OneSignal Push Notification App
You will be asked to provide your email address and password to create a free account.
On the dashboard, click on “Add App” to create your 1st app.
You will be asked to provide the name for your new app. You can use anything here to easily identify it.
Next, you will need to select a platform for your app. You can select multiple platforms. For now, we recommend you to select “Web Push”.
Then, click on the “Next” button.
In the next step, you will be asked to choose an integration method. Go ahead and choose “WordPress plugins or Web Builder” then select “WordPress”.
Now, scroll down a bit and you will see “WordPress Site Setup” section.
You need to enter your website name, URL and upload a logo. This logo will appear on your notifications.
Below that, you can see a toggle that you can turn on for the WordPress websites if they are not SSL/HTTPS. You can only send push notifications from a secured HTTPS URL. If your website is not HTTPS, then you need to turn on the settings and enter the label.
Once you are done, click on the “Save” button to store your settings.
Then, you will see API Keys that you need to copy.
Now, switch back to the OneSignal plugin settings page on your WordPress website and switch to the “Configuration” tab. Paste the APP ID and API Keys there.
These API Keys will allow you to send push notifications via Chrome and Mozilla FireBox browsers.
Now visit your website in a new incognito browser tab. You will see the push notification popup on the top and a bell icon on the bottom right corner of your page.
Step 3: Customizing the Push Notification Popup Prompt
The basic push notification popup is quite simple. It uses generic language to display the logo of your website. You can customize as per your need.
Simply go to the configuration tab under the OneSignal plugin’s settings page on your WordPress website and scroll down to “HTTP Pop-Up Settings” section.
You will need to toggle next to the “Customize the HTTP Popup Prompt Text” and then start adding your own text.
Step 4: Customize Bell Notification Icon
Normally, the browser prompt for the notification and the popup disappears when the user dismisses it.
But what if your audience may want to subscriber your website after some time.
You can add the subscription bell in OneSignal to keep showing a prompt to subscribe push notification on your WordPress website.
The bell icon is also highly customizable from the plugin settings page. You can scroll down to “Prompt Settings & Subscription Bell” section and turn on the customizations as per your choice.
You can also change the color of the bell to add the subscription bell matching the overall design of your template.
Step 4: Sending Push Notification from your WordPress Website
By default, the OneSignal plugin automatically sends push notification for all new posts published on your WordPress website. If you want to turn off this feature from “Prompt Settings & Subscription Bell” section.
You can also manually send the push notification when you publish a custom post type or update your posts. Simply edit the WordPress post or page and you will see OneSignal Push Notification box under the document settings column on the right side of your site screen.
If you are using the old WordPress editor, then you can see the meta box like the one in the screenshot below.
Tick on the box to send notification on post update/publish and then, click on update or publish button.
Send a Welcome Push Notification to New Subscribers
You can also send a welcome push notification to your new subscribers.
Go to OneSignal plugin’s settings page in your WordPress admin dashboard and scroll down to the “Welcome Notification Settings” section.
Now when a new subscribes push notifications, they will receive a welcome notification on their devices.
Depending upon the browser and the device, the notification will look different.