Add Browser Push or Web Push Notification to Your WordPress Site-You have probably heard about web push notifications or browser push notifications. It is one of the effective ways to increase your website traffic like email marketing, social media marketing. Nowadays, all the popular sites Facebook, Pinterest, LinkedIn use push notifications to get their visitor back again and again on their websites.
In this article, quickly we will show you step by step guide on how to add web push notifications to your WordPress website. And not only that, but we will also discuss what is web push notifications or browser push notifications, what are re benefits of using web push notifications etc. So, Let’s get started!
What are Web/Browser Push Notifications?
Web push notifications or browser push notifications are messages that directly come from a website and displayed on your desktop or mobile screen even when the web browser is not open. The small notifications usually about important updates, new contents, news, about sales etc.
How Web Push Notifications Work
When a new visitor visits your site the first time, they will be asked to subscribe or allow your site through a pop-up message. Once they subscribe to your site, you will able to send them notifications on their desktop or mobile.
Why Should You Add Web/Browser Push Notifications to Your WordPress Site?
One frequently asked questions about Web Push Notifications is that what are the advantages of adding web push notifications to a WordPress Site. Here, we are going to discuss a few benefits of adding web push or browser push notifications to a WordPress Site.
1. Increase User Loyalty Rate
You may have probably noticed the user loyalty rate in your Google analytics report as you see in the picture below. It is an important factor for your website growth.
User loyalty means how many of your website visitors used to come back to your site, again and again. If your’s site user loyalty rate decreases, it will affect your website ranking. However, it is a fact that most of a website visitors not used to come back again. Therefore, to increase your website user loyalty rate, you have to convert your website users into subscribers to connect them later. The ‘Push notifications’ is one of the effective ways to increase your website subscriber to connect them later.
2. Website Traffic
Besides, user loyalty rate, Push notifications also help to increase site traffic a lot.
3. High Click-Through Rate
Push notifications are more effective, and they show high click-through rates.
4. Easier to Subscribe for Your Users
To subscribe to your site through web push notifications, visitors don’t have to provide any personal information like name, email address, their website etc. Therefore, push notifications to help you to convert your website visitors to subscribers much faster than email subscription.
5. Easy to Send Notification
To send Push notifications, you don’t have to write a complete message like email.
6. More Engaging
Push notifications are more engaging than emails and social media notifications.
WordPress Push Notification Plugins
To enable web push notifications in your WordPress site, you need a WordPress plugin that offers push notification service. There are many awesome WordPress plugins available for push notifications. However, before choosing any plugin you have to be very careful as it may slow your site. In this particular article, we use ‘OneSignal’ plugin to show you how to add web push notifications in your WordPress site. ‘OneSignal’ is a completely free plugin that offers up to 30K subscribers for free and allows to send unlimited push notifications.
Check other top WordPress plugins for web push notifications: Best WordPress Push Notification Plugins for Mobile Push & Desktop Push
HOW TO Setup Web Push Notifications in WordPress With ‘OneSignal’ Plugin
To setup OneSignal web push notification on your WordPress site, follow the step by step instructions here.
Step-1: Install OneSignal WordPress Plugin
- Login to your WordPress dashboard
- Navigate to ‘Plugins’ >> ‘Add New’
- Search for ‘OneSignal’ plugin using the search box of WordPress theme directory
- Click on ‘Install Now’ button
- Click on ‘Activate’ button
After activation, ‘OneSignal Push’ tab will appear under your WordPress left admin bar. Click on it to open the OneSignal settings page. The settings page has two sections; one is setup tab and another is configuration tab as you see in the picture below.
Now, to configure the ‘OneSignal’ push notification service, you need REST API Key, App ID (for all the browsers except Safari browser), and Safari Web ID (for Safari browser).
Following steps will walk you through to set up ‘OneSignal’ account and to configure ‘OneSignal’ WordPress plugin with REST API Key, APP ID, and Safari Web ID.
Step-2: Create OneSignal Account
1. Visit the official website of ‘OneSignal‘
2. Click on ‘GET STARTED’ button next to ‘Web Push notifications’ as you see in the picture below.
3. Next, on the sign-up page, enter your email, password, company name and click on ‘Create account’ button.
Once are done, you will get access to your OneSignal notification dashboard.
Step-3: Setting up ‘OneSignal’ Push Notification App for All the Browsers Including Chrome, Firefox (Except Safari)
1. On the ‘OneSignal’ dashboard, click on ‘ADD APP’ button.
2. Next, enter the name of your app. You can choose any name you like. It is also possible to edit your App Name later.
3. On the next screen, you will be asked to choose a platform for push notification. Choose ‘Web Push’ and click on next as you see in the picture below. The ‘Web Push’ platform will work for all the browsers including Chrome, Firefox (except Safari browser) on both desktop and Android. Note: Apple still does not currently web push on ios devices like iPhone and iPad. So, for sending push notifications to iPhones and iPad, you will need to configure iOS mobile app. If you want, you can do it later after configuring web push notifications.
4. Next step is the integration step. Select ‘WordPress Plugin or Website Builder’ and then select WordPress as shown in the picture below.
5. Scroll down to the ‘WordPress Site Setup’ section. There, you will have to enter your website name, URL, and you have to upload a logo. The logo will display in your notifications. On the same screen, there is an option called ‘My site is not fully HTTPS’. You have to turn on toggle if your site does not have an SSL certificate. Once you have done this, click on ‘SAVE’ button. Note: If your site does not have SSL/HTTPS, then you need to select a unique label that will display in your notifications. However, we strongly recommend you to use an SSL certificate for your domain.
6. On the next screen, you will see your APP ID and API KEY. You need to copy both APP ID and API KEY.
7. Now, go back to the ‘OneSignal’ plugin settings page on your WordPress site and open the ‘Configuration’ tab. Under the ‘Configuration’ tab paste APP ID and API KEY that is shown in the picture below. Don’t forget to save settings.
This configuration is for all the browsers except Safari web browser on both desktop and Android. Now, to configure safari web push notifications on your WordPress site, follow the steps below.
Step-4: Setting up Safari Web Push Notifications on Your WordPress Site
1. To enable Safari web push notifications, go back to the ‘OneSignal’ website once again and log in to your account. Next, go the settings page of ‘OneSignal’ dashboard. Click on the edit icon next to Apple Safari (See the picture below).
2. On the next screen, enter your website name, URL, and upload a site logo or icon. Click on the ‘Save’ button.
3. Now to see Safari API key, go back to the settings page and click on the edit icon once again next to Apple Safari. Once you click on the edit icon, you’ll see your Safari Web ID on the screen. You need to copy the Safari Web ID.
4. Now, go back to the ‘OneSignal’ plugin settings page on your WordPress site and open the ‘Configuration’ tab. Under the ‘Configuration’ tab, paste the Safari Web ID as shown in the picture below. Don’t forget to save settings.
Step-5: Additional Settings of ‘OneSignal’: Send Notification Settings, Customization of Bell Notification Icon
1. Send Notification Settings:
Under the ‘Configuration’ tab of your ‘OneSignal’ plugin settings dashboard, you have ‘Send Notification Settings’ section. If you want to replace your default site logo or OneSignal logo on the notifications, click on the toggle button next to ‘Use the post’s featured image’. The first option is for small featured image on notifications and Chrome and Firefox Desktop supported. The second option is for the large featured image on notifications and Chrome browser supported.
Next, if you want to hide notification after few second, select the Yes. You have also an option to set notification title. If you want to send notifications to Android and iOS platform in addition to your web push users, you have to enable the ‘OneSignal’ app for iOS or an Android platform in your ‘OneSignal’ account.
2. Customize the Prompt Settings & Subscription Bell Notification Icon:
Next, under the ‘Configuration’ tab of ‘OneSignal’ plugin’s settings page on your WordPress site, scroll down to the Prompt Settings & Subscription Bell section. You have several options to customize the bell notification icon. You have simply turned on the option that you need for your site. If you don’t understand, follow the settings shown in the following picture.
If you scroll down to a little bit more, you will find the options to customize subscription bell Offset position. Change the options according to your needs or keep the default settings.
You have options to customize subscription bell icon color that options are shown in the following picture.
Under the bell notifications text customization, enter the texts based on your website type.
3. Push Notification Popup Settings:
Below to the ‘Prompt Settings & Subscription Bell’ section, you have ‘HTTP Pop-Up Settings’ section. Turn on the ‘Customize the HTTP Pop-Up Prompt text’ option and enter the texts below to customize the push notification popup.
3. Welcome Push Notification and Automatic Push Notification Settings:
Follow the Welcome Push Notification and Automatic push notification Settings in the picture below.
Now your job is done! Hope, this article is helped you to add web push notifications to your WordPress site. Now, to send push notifications to your subscribers, go to the edit post. Under the post edit section, you will have a meta box called ‘Send notification on post update / publish’. Using this option, you can manually send the push notifications when you publish or update a post. If you want to send automatic push notifications to your subscribers when you publish a new post, you have to turn on the automatic push notification option as shown in the above step.
