How to Setup OneSignal Push Notifications in WordPress [Explained]

In this article I will show you how to Setup OneSignal Push Notifications in WordPress website.

There are other push notification plugin for WordPress websites but am going to explain in details (with screenshots) how to properly setup OneSignal Push Notifications.

• Recommended – Freelancer – Complete Guide that will make you Successful

OneSignal is a Push Notification service for Web Push, iOS, Android, Huawei, Chrome, Unity 3D, Amazon, Windows Phone, PhoneGap, Marmalade, etc.

They are trusted by 1 million+ developers to send 8 billion+ push notifications.

Push notifications at their core are simply a way of alerting users to information that they have opted-in to from services as well as apps.

They are the market leader in customer engagement, powering mobile + web push, email, SMS & in-app messages.

OneSignal is an easy way to increase user engagement. In your WordPress website, use OneSignal to send visitors targeted push notifications such as; alerting them of new posts or updated post so that they will keep coming back.

Their Free plan includes unlimited mobile, up to 10K web push subscribers, email, SMS & 1 in-app message. No credit card required. OneSignal make it simple for every developer to re-engage their users.

Pros of OneSignal Push Notifications

• Easy to setup using plugin for WordPress users
• You can send push notification to thousands of people
• OneSignal supports mobile and web push notifications, in-app messaging etc.
• It helps in re-engaging your website visitors
• Their services is FREE (No credit card required) unless you want more features

Steps on how Setup OneSignal Push Notifications in WordPress

I’m glad that you find your way to my website and am going to provide all the steps you need to follow in order to properly setup OneSignal push notifications in every WordPress website.

Here are some articles relating to → WordPress development which may be useful to you.

 Jonakyblog is sharing this knowledge with you because I started this website in order to share useful knowledge to the world.

Below I will show you in detailed form (using screenshots) all the steps you have to follow for you to have OneSignal Push Notifications properly installed in your website.

Step 1: Sign Up at OneSignal

Go to OneSignal and register an account with them. Use a functional Email address. You can also use your GitHub, Google and Facebook account for your registration.

Once you register, they will send you a message to your email to activate your account.

Now login to your email and activate your account. After a successful activation, login to OneSignal with the details you used during your registration.

Step 2: Configure your platform

Once you have logged in, you will be directed to a welcome page to get you started.

In the option provided, enter the name of your website. For example JonakyBlog. From what platform do you wish to use this app, select “Web Push”.

Click on Configure Your Platform.

Step 3: Configure Web Push

1 Choose integration – Click on “WordPress Plugin or Website Builder”. Next select WordPress.

2 WordPress Site Setup – In the input field provided, enter your site name and URL. If your site uses https, thick the box AUTO RESUBSCRIBE (HTTPS ONLY).

Next is DEFAULT ICON – You can either upload from your PC or you can as well paste your icon URL.

3 Click on SAVE.

Step 4: Configure Web Push

This page contains APP ID and API KEY that you will use while configuring your OneSignal plugin in your WordPress dashboard.

Next you need to install OneSignal WordPress plugin on your WordPress website.

Once installed, copy both these keys into Configuration > Account Settings.

Step 5: Install OneSignal Plugin

Login to your WordPress dashboard, go to Plugins > Add New. In the search field, type “onesignal”.

When the auto search is complete, you will see OneSignal – Web Push Notifications plugin.

Then click on “Install Now” to install the plugin. After your installation, click on “Activate” to activate the plugin.

From your dashboard left side bar menu, scroll down and click on OneSignal Push.

Step 6:  Configure OneSignal Plugins

From the new page that will open, click on CONFIGURATION (leave the SETUP tab).

In the configuration page, you have to follow below guidelines in order to have an awesome OneSignal push notification.

⚙ Account Settings –

If your site uses https connection (SSL) then leave the check button as default.

App ID – This is your 36 character alphanumeric app ID. You can find this in App Settings > Keys & IDs.

REST API Key – This is your 48 character alphanumeric REST API Key. You can find this in App Settings > Keys & IDs.

Note: Step #4 and the image that it contains described everything about how to copy your APP ID & REST API KEY.

Safari Web ID – To get your Safari Web ID, from the screen in step #4 > click on settings > Platforms. You will find out that “All Browsers (except Safari)” is already Active.

Now click on “Apple Safari”. Under Configure Platform (Safari Web Push Configuration) – Enter your site URL and leave the two check boxes unchecked. See screenshot below

Click on Next button to continue with other configurations. On the next page select “Web Push”.

Click on Next to install SDK. The page that will open contains your Safari Web ID.

Now copy your Safari Web ID and paste in the required field above. Your Safari Web ID looks like this web.onesignal.auto.1234567a…

After you’ve copied your Safari Web ID, hit save.

A prompt pop up will be displayed asking you if you want to Leave platform setup. Now click on Leave Setup button.

Your OneSignal webpage will reload by itself and you will find out that all Web Push Platforms are all active. They are – All Browsers & Apple Safari.

All the images in step 6 is to make sure that you filled your Account Settings correctly. Below image shows how your account settings should look like.

Step 7: Sent Notification Settings

Under this, you can change the Notification Title – The notification title to use for all outgoing notifications. If you leave it untouched, your site’s title will be used as default.

Leave other settings as default under this section. (That is – the way you see it)

Step 8: Prompt Settings & Subscription Bell

Note: thick the first check box that said – Automatically prompt new site visitors with OneSignal Slide Prompt before Native Browser Prompt (recommended)

Leave all the initial check boxes as default.

Scroll down and – thick “Customize the Subscription Bell offset position & Customize the Subscription Bell theme colors”

Size: select – medium (you can select small or large if you wish).

Position: Am using bottom left. This is because am using bottom right for my back to top button.

Theme: select red – that is if red suits your website.

Leave other configuration under this section as default.

Step 9: Prompt Customization

In the Action Message field, write a message that you want to show your visitors for them to subscribe to your push notifications. For example – JonakyBlog wants to send you push notification for our latest blog posts.

You can leave the field default if you don’t want to customize it.

Go to Site Name – HTTP Only and type in your website URL (e.g. http://jonakyblog.com)

Then leave other configurations under this subdivision as default.

Step 10: Hit Save button

If you wish you can make few changes to Welcome Notification Settings and leave other fields below this section untouched.

Finally click on SAVE to save all the changes you’ve made. The webpage will reload and all your changes will be saved.

OneSignal Push Notifications Preview

This is how the OneSignal Push Notifications will be displayed to every visitor that have not subscribed to your website OneSignal push notification once they visit your website.

Have in mind that the image below was taken from the desktop version of my website. But it will still display to mobile users when they visit your website.

Conclusion

I’m certain that you’ve learnt a lot from this article and I know that you love other articles that I published in this website.

OneSignal Push Notifications is a means of re-engaging visitors to your website. This happens when they subscribe to your push notification.

If you successfully followed all the steps above and you now have OneSignal Push Notifications prompting to all your users asking them to subscribe, drop a comment with your website URL so that I can review it.

In case you encountered any challenges, notify us using the comment section so that we can resolve it.

Help distribute this information to your friends. You can spread it to social media too.

These are some articles you need to read:

1. How to create WordPress contact form without plugin (ultimate guide)
2. Add Share Buttons to WordPress without Plugin
3. Learn how you can View the Source Code of Any Website [ultimate guide]
4. How to Upload Apk and Other Files in WordPress sites [100% working]
5. Best way to Download YouTube Videos in All Devices [the easy way]