How to attach Web Push Notifications in WordPress website?

How to attach Web Push Notifications in WordPress website?

Have you seen that the Web Push Notifications are used on popular websites like Facebook? And if you are facing problem to add Web Push Notification in WordPress Website? Keep reading this guide.

Here in this guide, we will illustrate you how to add web push notification in WordPress site.

Why do we add Web Push Notifications in WordPress site?

Web push notifications are clickable messages that are displayed at the top of the user’s desktop. They can be shown even when user’s browser is not open.

webpushnotifications
Apart from desktops, web push notifications work on mobile browsers.

Although, the popular websites like LinkedIn, Pinterest, Facebook etc. are already using web push notifications. However, this is proving to be more appealing than SMS, email marketing, and other social media. According to a survey, push notifications have 50% open rate on mobile devices.

This means that more engaged audience for your WordPress website and a significant increase in your overall page views and returning to visitors.

Read Also: Top 10 WordPress Plugins For Push Notification – 2018

Now let’s take a look at:

How to add web push notifications to a WordPress site

Setting up Web Push Notifications in WordPress with OneSignal

However, OneSignal is a free service that permits you to add push notifications to any site, web, or mobile application.

First, you have to install the OneSignal plugin and then activate it. To know more, read our guide how to install a plugin in WordPress.

When the plugin is activated, this will add a new menu item labeled OneSignal in the WordPress Admin Bar.

By clicking on it you will go to the plugin’s settings page.

onesignal-wp-settings
The settings page is broken into Setup and Configuration tabs. The setup tabs actually a detailed documentation on how to set up OneSignal push notifications in WordPress. This is the same step that we will show you in this tutorial.

To set up OneSignal, you will have to add different API keys and application IDs in plugin settings.

Let’s get cracking!

Step 1: Create Google Keys

First, you have to go to the Google Services Wizard website.

googleservicesapp
Just provide a name for your app and add an Android package name. OneSignal does not use an Android package name, but it is a required field.

After this, select your country and region, then click the ‘Choose and Configure Services’ button.

It will bring you to the next screen where you will be asked to choose the Google services that you want to use with your app. You have to click the ‘Enable Google Cloud Messaging’ button.

enablecloudmessaging
Now you will see your server API key and sender ID.

gkeys
You have to copy your Sender ID and paste it into the WordPress Plugin’s Configuration tab under the Google Project Number field.

Also, you have to copy your server API key and paste it into a text file on your computer. Later in this tutorial, you will need this API key.

Step 2: Setting up Chrome and Firefox Push Notifications

Now we will set up push notifications on Firefox and chrome.

First, you have to go to OneSignal website and then create your free account.

Once you’ve created your account, you have to log in and click on the ‘Add new app’ button.

addnewap
You will be asked to enter a name for your app. You can use the name that you want and then click the ‘Create’ button to continue.

appname (2)
On the next page, you will be asked to choose a platform to configure. You have to choose ‘Website push’ and then click on the next button to continue.

websitepush
After this, you will be asked to choose a browser platform. You will see Google Chrome and Mozilla Firefox and Safari in a box in another box.

You have to click the Google Chrome and Mozilla Firefox box. We will show you how to setup Safari later in this post.

browserplatform
Click the next button to continue.

In the next step, you will be asked to entering your website URL. However, the Google server API key and URL for your default notification icon image.

appsettings

If your site does not support SSL/HTTPS, then you need need to check the box that is next to ‘My Site Fully HTTPS’ option. Also, if you want, you can set up SSL on your website.

However, web push notifications do not support by Google chrome for https sites or non-SSL. OneSignal resolves this problem by subscribing users to subdomains on their own https domains.

Checking the ‘My site is not fully HTTPS’ option will show the HTTP fallback option.

You have to select a subdomain for your app and enter the Google Project Number or Sender ID generated in the first step.

httpfallback
Click the Save button to continue. You can now exit this dialog box. You will be prompted with a notice that your setup has not yet been completed and it can be resumed later. Click Yes to close the dialog box.

Step 3: Getting OneSignal Keys

Now you have to get the OneSignal key for your site. Click the app settings from your app dashboard.

appsettingslink
It will take you to your App Settings page. You have to click the key and the IDs tab.

keysandids
Also, it will display your Rest API key and OneSignal App ID.

onesignalkeys
Now you have to copy and paste them into OneSignal WordPress plugin’s configuration tab on your website.

Step 4: Setting up Safari Web Push Notifications

Remember that we have left Safari Web Push Notification Settings. Now we will show you how to set up Safari Web Push Notifications.

Log in to your OneSignal account and go to your App Settings page. Scroll down on the web platform and click the Configure button next to Apple Safari.

configapplesafari
Also, it will bring a dialog box where you will be asked to enter your site’s name and site URL.

safarisettings

After that, you have to check the box that is next to the ‘I’ d like to upload my own notification icons option.

Now, you will see the option to upload different icon sizes. These are square images, use Photoshop or any image editing program to create icons inaccurate shape.

Click the choose the file button to upload all your icons.

safarinotificationicons
Click the Save button and then close the dialog box. Refresh the App Settings page and scroll down to the Web Platform section. This time you will see ‘Web ID’ under Apple Safari.

safariwebid
You have to copy this web ID and paste it into the OneSignal plugin’s configuration tab on your site.

That’s all!

Now you have successfully setup OneSignal Web Push Notifications for your WordPress site.

Step 5: Testing Web Push Notifications on Your WordPress Site

By default, This OneSignal plugin will add a subscription icon to your WordPress website. To do this, go to your site in the supported browser and then click the Subscribe button.

subscribepushnotif

You will see the default ‘Thank you for subscribing’ message. Now login to OneSignal account. Click on your app name and then app settings.

Scroll down to the Web Platform section. And press the Configure button that is next to Google Chrome and Firefox.

cofigwebpush
You will see the platform configuration screen that you previously filled out. Just click the save button and then click on Continue.

testingwebpush1
Also, you will be asked to choose the target SDK. You need to choose WordPress and then click the next button.

testingwebpush2

Since only you have one subscriber at the time of your subscriber ID will be automatically filled.

Press the next button, and you’ll reach the ‘Test Settings’ step. Now, click the ‘Send Test Notification’ button.

sendtestnotif
Now One Signal will send a web push notification.

However, the notifications appearance may vary depending on the browser that you used to subscribe. you have to click on it when a notification appears on your computer screen.

web push notifications
Although this will take you to the confirmation screen, indicating that you have successfully set up OneSignal Web Push notifications for your website.

web push notifications

Thereafter, return to the configure screen on the OneSignal site and click the ‘Check notification status’ button.

Web Push Notifications
Now you will see another success message that indicates you have successfully added web push notifications to your WordPress website.

How to Send Web Push Notifications in WordPress with OneSignal

When you publish a new post, the OneSignal Web Push Notification plugin will automatically send a notification to all subscribers on your WordPress site.

From your OneSignal app dashboard, you can also manually send notifications. Log in to your OneSignal account and click your app name.

From your left menu, press the ‘New Message’ button.

newmessage
Furthermore, it will bring you to new messages screen. You can enter a title and some content for your notification.

Also, you can press Segments, Options, Schedule/Send Later to further customize your web push notification.

For example, you can link it to a specific page on your website. And send it to a particular segment of your users, or schedule it to be sent at a specific time.

CONCLUSION

Here we have discussed How to attach Web Push Notifications in WordPress website? Often we concluded Why we add Web Push Notifications in WordPress site?

We hope this post helped you to learn how to add it. If you have any query to attach it, let me know in the comment section below. We are here to help you.

If you liked this post, then please share it with your peers.

You can contact our WordPress support team Dial  +1 888 614 0555 (Toll-Free). Our WordPress customer service will always help you. We will happy to help you and solve your problem related to WordPress.

Read more blogs:



Leave a Reply