Some popular websites are using web push notifications. Have you noticed that? Many sites have implemented the Web Push Notification systems for reaching out to their readers. It’s a fantastic technique to get readers for your newly published post.
What is a Web Push Notification?
A Web Push Notification is a notification that is displayed on the top right of your web browser. The websites send These notifications that user has allowed showing on his desktop. These notifications are clickable and visible even when the web browser is in minimized mode.
How to Add Web Push Notification on Your WordPress Website?
Well, the Web Push Notifications is a wonderful way to reach to your audience in a unique way. Instead of doing email outreach for your newly published post, this way of sending Web Push notifications is fantastic.
If you have a WordPress website, then you can install the Web Push Notification system on your site. In this post, I will share the exact procedure to install web push notification on your WordPress Website. Before proceeding to the tutorial, don’t forget to subscribe to our Web Push Notifications.
To install Web Push Notifications on our WordPress site, we need to use a third-party service to provide push notifications. The OneSignal is one such website which provides the Push Notifications service. We are using the OneSignal for sending push notifications for this tutorial.
To start using the OneSignal service, you need to install “OneSignal” Plugin on a WordPress site. This plugin is available on WordPress Repository. Install this plugin and open its Settings Page.
On the Settings Page, you’ll have to add the Application ID and Application API to make this plugin work. Now, we’ll create the API and Application ID actually to use this plugin.
Generate Google Keys
- We need the Google Keys in the OneSignal Plugin. To get Google Keys and API, just open the “Google Services Wizard” page.
- On the Page, you’ve to create a new simple app and name it. Just give the name to the Application and Click “Next.”
- On the Next Page, you’ll need to Select the Country and region. Select the appropriate Country and Region then click on “Choose and Configure Services.”
- On the Next page, you’ve to select the Google Service you are willing to use with this app. Just choose the “Cloud Messaging” service and click on “Enable Google Cloud Messaging” option.
- After Enabling the Google Cloud Messaging, you’ll see the Server API Key and Sender ID on the next page. You’ve to Copy the Sender ID and Paste it into the OneSignal WordPress Plugin into the “Google Project Number” Field.
- For next steps, just copy the Server API Key and save it into the separate Text file. You’ll be needing this Server API key in next steps.
Setting up OneSignal Account
- For showing the notifications, we need a OneSignal account. Just go to OneSignal and create a free account.
- After creating an account, just verify the email and login into the account. There, you have to click on the “Add New App.”
- After clicking on the “Add New App,” name your app anything you want and click “Create.”
- On next page, you’ve to configure the app and select the platform. There, select the “Website Push.”
- Again, on next page, you’ll see options for the desired browser. First one is “Google Chrome” and “Mozilla Firefox.” Another option is Safari browser. Select the “Google Chrome and Mozilla Firefox.”
- Now, you’ve to configure the app for enabling the Push Notifications. On the next page, enter essential details like Your Website URL, Google Server API Key, and Default Notification Icon URL. If your site does not have an SSL certificate installed, then choose the option “My Site is not Fully HTTPS” and click NEXT.
- If you choose “My Site is not fully HTTPS” then you’ve to choose a Subdomain of the App created by OneSignal. As the Chrome Doesn’t support the Push Notifications from Non-HTTPS sites, the OneSignals creates a Secure URL for the page. Once choosing the Subdomain, enter “Sender ID” we set up in the first step and clicked “Save.”
- At this stage, you can exit the Setup.
Getting and Configuring OneSignal Keys
- This is the Last stage for enabling the Web Push Notifications. To fully enable the Web Push Notifications, you’ll need the OneSignal Keys. To get those keys, click on “App Settings” tab on Dashboard.
- In the App Settings Tab, you’ve to open a Sub-Tab, which is “Keys and IDs.” In this tab, you’ll see the OneSignal API key and Rest API key.
- Copy and Paste the API Keys in the WordPress Plugin to activate the Web Push Notification on Chrome and Firefox.
Configuring and Testing the OneSignal Push Notifications
To check if you followed every step correctly, open your WordPress site and see if you can see the Subscription bell icon on the Lower Left side of the site. Click on it and Subscribe to the notifications.
After subscribing, open your OneSignal account and click on “App Settings” tab. In the Tab, you’ve to click on the “Configure” button just next to the Google Chrome and Firefox app that we’ve created earlier.
Now, you’ll see the page to configure the app. Just click “Save” for, and you’ll see the second page to configure. On this page, You’ve to select the Target SDK. Just select the “WordPress” and click “Next.”
Just click “Next” till you reach the “Test Settings” option. On this page, click on “Send Test Notification” option. If you did everything correctly, you’d receive a Notification on the computer. Click on the notification, and you’ll see a Confirmation message.
Now, return back to the OneSignal page and click on “Check Notification Status”. It’ll show you another success message.
Send Push Notification to Subscribers
You’ve successfully installed the OneSignal Web Push Notifications. Whenever you publish a New Blog post, your subscribers will get a Push Notification.
- If you are willing to send manual notification, then just follow these steps.
- To send manual notifications to your subscribers, open your OneSignal Account Dashboard and click on your App Name.
- On the App Dashboard, you’ll see the “New Message” option on the Left side. Click on it.
- Now, you can compose and send the Web Push Notification to your users. You can configure and customize the Message and schedule it as per your convenience.
Conclusion
So, this is how you can enable the Web Push Notifications on your WordPress website. It is a quite tedious task if you are doing it for the first time. I hope this tutorial helped you to setup the Web Push Notifications on WordPress.
