Resources     Blog  

  1. Home
  2. WordPress Tutorials
  3. How to Implement Web Push Notifications In WordPress

How to Implement Web Push Notifications In WordPress

What’s a good way to get people to return to your website as soon as new content is created? Using push notifications.

You’ve probably seen this technology in use on sites like Facebook, YouTube and many others. It’s when you receive messages directly to your browser or computer desktop from a site that has been allowed to do so. Users have to allow push notifications in order for the messages to be received.

Most of the time, developers use this technology to send instant messages regarding new content. However, web push notifications for WordPress will allow you to send virtually any message directly to your online subscribers. This is a great addition to any set of website marketing tools.

Because these messages have an excellent open rate, especially on mobile devices, it’s a great add-on to any site.

In this tutorial, I’m going to show you how to set up OneSignal Push Notifications for WordPress. Although there are quite a few steps to the process, the end results could easily outweigh the investment of time.

I’m using OneSignal today so that I can show you how to engage mobile devices users as well as those on desktop computers. This is because more people are accessing the Internet from mobile technology than traditional systems today.

Setting Up Push Notifications for WordPress

Before we get started, it’s best that you have a Secure Sockets Layer certificate attached to your website. The use of the SSL isn’t mandatory, but Google Chrome requires it to be present for the certificate to work.

Besides, the SSL certificate helps in SEO by proving to Google you’re conscientious about visitor security. This means your site will rank higher in search results.

However, OneSignal helps you get around not having the SSL by letting you use a subdomain on their own network. I’ll cover how to do this in a moment.

Now, let’s get started pushing notifications to your audience.

Step 1: Install the OneSignal Plugin

Install and activate the plugin for OneSignal.

Install And Activate OneSignal

OneSignal will add a new function to the left admin panel. However, we can’t do anything with it yet because we need some API keys and other free accounts.

Step 2: Creating Keys for Google

Since OneSignal is essentially a Cloud-based app, we’ll need the API key from Google to push notifications to Chrome users.

Go to the Google Developers site to begin setting up the service.

Google Developers

Input the name of your new app and click the Create link under it.

Create New App

You will need an Android Package Name. This is a required field even though you will not need it for OneSignal. I simply use “test.test.” This will immediately open a new window from Google with a disclaimer for Google Mobile Developer Services.

Essentially it’s an agreement to share data for benchmarking and other services. You don’t have to agree to these terms. I don’t mind sharing data as it helps Google develop better services in the future. However, not everyone likes the idea of sharing, so this is optional.

Once you are ready, click the “Choose and configure services” link.

Configure Google Services

Cloud Messaging should already be open by default. If it’s not, click the icon with a Cloud and Bell. Now, you will click the “Enable Google Cloud Messaging” link to enable the service.

Enable Cloud Messaging

You will need to copy the Server API Key and the Sender ID to set up OneSignal. For example, I am going to paste both of these numbers in a temporary Notepad document for now. You can always access Google Developers later if you need this information again.

Scroll down and click the “Generate configuration files” button.

Google Developers Config File

In this window, you can download the .json file if you’d like, but OneSignal is not going to need it. You are now able to close this window or leave it open for reference to your API Key and Sender ID.

Now, we’ll need to set up a free account at OneSignal.

Step 3: Setting Up OneSignal Free Account

Go to the OneSignal website.

OneSignal

Scroll to the bottom of this page and click “Sign Up Free.”

OneSignal Sign Up Free

The sign up process for OneSignal lets you pick social media credentials or you can register using a completely different email address. This is completely optional, but it may be easier for some to simply use Google or Facebook to set up their accounts. It takes less time as your information is shared instantly.

When you’re ready, click the “Create account” or social media button. I’m just going to use Facebook for this example.

OneSignal Create Account

Step 4: Adding a New App

Now that we have a OneSignal Account, it’s time to add our apps.

Click the empty “Add a new app” box in your main screen.

OneSignal Add New App

Give your new app a name and click, “Create.”

OneSignal Create App

On the next screen, click the “App Settings” link in the left admin panel.

OneSignal App Settings

From this next screen, you’ll see a list of available mobile platforms for the web push. Let’s start by enabling Google Chrome and Mozilla Firefox.

Click the “Configure” button to the far right of these two web browsers.

Configure Chrome

Input your site’s URL in the text field.

OneSignal URL

OneSignal will automatically detect whether your URL is secured or not simply because of the difference from HTTP and HTTPS. The system will automatically assign a subdomain you can use for free on OneSignal’s domain.

You can change the subdomain if you want to use something different. However, it may be easier to remember if you leave it as your domain name as you can set up several accounts in OneSignal.

NOTE: This only appears if you do not have a certificate for SSL on your website.

OneSignal Change Subdomain

Now, let’s configure Android devices to receive the push. Click on the “Configure” button to the far right of Google Android.

Google Android Configure

Here is the screen where you’ll input the Server API Key and the Project Number you copied from earlier. Once you have these numbers placed, click the “Save” button.

Android GCM Save

You can activate any number of these elements each with their own entry into the OneSignal system. It may be a good idea to include Apple elements such as Safari as it is such a widely used platform.

Click on the “Keys & IDs” tab on the top of the settings window.

OneSignal Keys

Copy both the OneSignal App ID and the REST API Key. These are needed for the next step.

OneSignal Key And ID

Now, you will need to set up the SDK. Go into your Apps window from OneSignal.

OneSignal Apps Window

You will see that the app needs the SDK before it goes live. It will also show icons of all the connections the app has, such as Android, Chrome and Firefox – the three we just installed.

Click the app to finish the setup process.

OneSignal Finish Setup

In this next window, select the SDK for WordPress.

OneSignal SDK WordPress

Click the “Next” button on the bottom right to continue.

OneSignal SDK Next

This next screen explains that you need to add the REST API Key and App ID to the WordPress plugin. Leave this window open in your browser as you will need it in the final step.

WordPress SDK Installation

Step 5: Setting Up OneSignal in WordPress

Go back to the WordPress dash board and click the OneSignal Push control on the left.

WordPress OneSignal Push

Click the Configuration tab at the top.

OneSignal Configuration

If your site uses SSL connections, click the switch next to “My site uses an HTTPS connection (SSL)” option. Otherwise, input the information from OneSignal. This includes the App ID, REST API Key, the subdomain if you needed one and the Safari Web ID if you created one.

OneSignal Information

Make adjustments to your Sent Notification Settings. Here is where you modify how the notifications behave. This controls whether to use the post’s featured image, dismissing notifications after 20 seconds on Chrome Desktops and the title. You can also set the messages to be sent to iOS and Android platforms.

Since we entered in the API key for Android, we’ll turn this option on by clicking the switch.

OneSignal Notification Settings

Customize the prompt settings and the notify button. In this section, you can customize how the prompt button behaves on your site. This includes everything from prompting new visitors to subscribe to controlling the default messages that are delivered.

OneSignal Prompt Settings

Modify your Popup Settings to show when new users are detected. Here is where you can further customize the text that is delivered for notifications. You can have separate content for desktop and mobile visitors, change the “Accept Button” text and change the “Cancel Button” text.

OneSignal Popup Settings

Set your welcome message for new subscribers. In this area, you can set a custom message to appear when people subscribe for your web push notifications in WordPress. Title, message and the default URL are displayed to newcomers. However, you can disable this feature if you wish.

OneSignal New Subscriber Message

The remaining settings can be left at default for now. These consist of the automatic notifications to show when you create a post, UTM tracking and custom post types if you have a separate manifest.json file.

Click the “Save” button at the bottom.

OneSignal Save

Step 6: Finishing Up OneSignal Setup

Visit your website and click to allow it to send notifications to you when there is new content. You’ll be the first subscriber.

Go back to OneSignal and click the “Check Subscribed Users” button.

OneSignal Check Users

You should receive a “congratulations” message telling you about your first user – which is you.

Click the “Done” button on the bottom.

OneSignal Done

Your website is now able to accept subscribers and send notifications when you create new content.

OneSignal has a lot of tools for creating web push notifications for WordPress. You can view the number of subscribers you have, what platforms they are using and even send messages to all your subscribers from within the system. You can even set schedules of when to contact your subscribers. It’s an incredibly flexible system when you need something to help market your WordPress web hosting platform. Now all you need is engaging content.

What kind of additions do you use on your website to engage visitors? What marketing methods have you tried connecting to WordPress?

Author: Kaumil Patel

Kaumil Patel is the Chief Operating Officer of GreenGeeks and has over 13 years of experience in the web hosting industry working for and owning web hosting companies. Kaumil’s expertise is in marketing, business development, operations, acquisitions and mergers.

Was this article helpful?

Related Articles

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.