How to set up OneSignal Web Push notifications on WordPress

4 min


How to set up OneSignal Web Push notifications on WordPress
How to set up OneSignal Web Push notifications on WordPress

How to set up OneSignal Web Push notifications on WordPress

Push notifications are clickable messages shown on a computer’s desktop or in the notifications on a mobile device. They let you easily notify subscribers of new content on your website even when they’re not online, and can be enabled on computers, tablets, and even smartphones.

Enabling push notifications is a great way to get your audience to return to your site to check out your new content. You can use them to make sure your readers are notified in a timely manner.

Why add Push notifications?

Since over 70% of your site visitors will never return, it’s essential that you try to convert them into subscribers.

Huge websites like Facebook, LinkedIn, and Pinterest have started using push notifications because they realize how unbelievably effective they are. And also Web push notifications are more engaging than email marketing, SMS, and social media sharing.

How to set up OneSignal Web Push notifications on WordPress

If you’re looking to add web push notifications to your WordPress, OneSignal is the way to go. It is a free service that makes it super simple to add push notifications to any website.

1. Install the OneSignal plugin

OneSignal Web Push Notifications

To get started, you’ll need to install the OneSignal plugin. Go to Plugins > Add New and search for OneSignal. Then click on install. After completed the installation clicks on Activate button.

OneSignal Web Push Notifications Setup dashboard

Once you install and activate the plugin, you’ll see a new menu item in the sidebar of your WordPress dashboard called OneSignal Push. Click on it to configure settings for OneSignal, which are divided into Setup and Configuration tabs.

2. Create a OneSignal account or log in to your existing account.

Create a OneSignal account

Visit onesignal.com and create a new account or log in to your existing account. Once you complete the signup process, you’ll be taken to the OneSignal dashboard.

3. Configuring OneSignal push notifications

Choose a name for your app

Choose a name for your app which helps you identify it (you can simply use your domain name to keep things simple). Then, choose the platform and Click on “Configure Your Platform“.

  • Name – domain name
  • Platform – Web

Web Configuration OneSignal

On the next screen, you’ll need to Choose Integration for your push notification app. Select WordPress Plugin or Website Builder and Choose WordPress.

4. WordPress Site Setup

WordPress Site Setup

Site Name – Choose a site name. It’ll be used as a default notification title.

Site URL – Enter your site URL. Your web push app can only be used on this URL.

AUTO RESUBSCRIBE – This allows users to automatically resubscribe upon returning to the site without being prompted if they clear their browser cache or if you are transferring to OneSignal from another push provider. (Enable this option if you use HTTPS)

My site is not fully HTTPS – If you are not using HTTPS enable this. Web Push works best with sites that fully support HTTPS. OneSignal recommends using HTTPS for Web Push when possible.

5. Advanced Push Settings (optional)

Advanced Push Settings

OneSignal automatically provides the necessary certificates to work with Safari Browsers at no additional cost. If you already have your own Safari Web Push Certificates, you may upload it here.

Scroll Down and Click on SAVE.

6. Configure WordPress Plugin

onesignal keys ids

Copy and Paste these keys into your WordPress plugin Configure tab in the appropriate inputs.

The App ID and REST API Key only let you send push notifications using Chrome and Firefox browsers. In order to send push notifications in Safari, you’ll need to get a Safari Web ID.

Account Settings Wp OneSignal

Customize Settings you want and remember to enable Automatically prompt new site visitors with OneSignal Slide Prompt before Native Browser Prompt (recommended).

Automatically prompt Enable

Go back to the OneSignal site, and click on Settings at the top. Next, click the pencil icon.

Web Push Platforms

Now click on Apple Safari under Web Push Platforms.

Web Push Platforms 1

Add your Site name, Site URL and upload your notification icon and save. Once you click the Save button, you’ll see your Safari Web ID which you’ll need to copy and paste in the OneSignal configuration tab in WordPress.

Once you’ve pasted the Safari Web ID in the configuration tab of the OneSignal plugin in your WordPress dashboard, don’t forget to save your changes.

onesignal show nitify

Now all things are correct. To make sure push notifications are working, you can visit your site in an incognito window in Chrome, Firefox, or Safari. You should see the OneSignal Slide and Subscription Bell on your site. You may need to clear any cache plugins you have and refresh the page.

If you have any problems click here to get support from TechEdutricks Community. And also share your ideas with us!!


Like it? Share with your friends!

Danushka Sanjeewa
Danushka Sanjeewa is a Software engineer with more than 5 years of experience in Android App Development, Web Development, Marketing, Graphic design, Video editing, and WordPress. And also Writer/Founder of TechEduTricks.com.

0 Comments

Your email address will not be published. Required fields are marked *