How to Add Web Push Notification to Your WordPress Site?

Affiliate disclosure: In full transparency – some of the links on our website are affiliate links, if you use them to make a purchase we will earn a commission at no additional cost for you (none whatsoever!).

The internet has become advanced enough and hence the possibilities too have expanded beyond just browsing and downloading. With the advent of hundreds of new marketing strategies, today I’ll be showing you How to Add Web Push Notification to Your WordPress Site?

A decade back, owning your own website seemed like a dream, only companies and firms used to do so, today? Every kid around the corner has his own. Similarly, just couple of years back Push Notifications were one such luxury for website owners.

But today? With the help of so many third party pieces of codes and stuff, answers to questions like How to Add Push Notifications to WordPress site, have become as easy as a couple clicks.

What are Push Notifications?

Before asking your questions like Best Way to Add Push Notifications to Your WordPress Site, I think it’s fair of me to explain to you a bit what Push Notifications exactly are, right?

Have you ever subscribed to price-comparison websites? Which compares the price of certain products you’re looking for from various websites and then display a little tab at either corner of your desktop, even when you aren’t browsing any website?

Let me just show you:-

How-to-Add-Push-Notifications-to-WordPress-site

So yeah those are Push Notifications.

Why do You Need Push Notifications?

There are a couple of benefits you’ll be getting with Push Notifications, and so it’s fast taking over the traditional marketing methods.

1. Push Notifications don’t need you to be browsing the Internet. They can be delivered to you directly on your Desktop /Laptop Homescreens.

2. They can also be delivered to you if you’re browsing something else, watching a movie, or anything else.

3. They don’t need the user to do anything! Like with E-mail marketing the user needs to open his Email account, and then from the thousands of mails, needs to click on your mail to get the information, well with Push Notifications it’s not so.

4. The combination of Text+Image kind of makes the notifications clickable. If the content is good and the image you’ve used is lucrative enough, you’re bound to get yourselves some clicks.

5. They can also be displayed on Mobile Devices!

6. A recent survey declared that Push Notifications have 51% more Open rates compared to the traditional SMS, Internet and Email methods.

How to Add Web Push Notification to Your WordPress Site:-

In order to Add Web Push Notifications to WordPress, you’d be needing a plugin (the god-solution to all WordPress Problems isn’t it?)

So Go to your WordPress Dashboard, and click on Plugins>Add new

How-to-Add-Push-Notifications-to-WordPress-site

And search for OneSignal and install it.

How-to-Add-Push-Notifications-to-WordPress-site

Once you’ve installed the plugin, just click on the “OneSignal” tab on the left sidebar and you’d be taken to the plugin’s page.

How-To-Make-Your-Blog-Push-Notification-Ready-in-easy-steps

Once you’re on this page, you’d need a couple of API’s and Key’s, which I’ll show in detail how to create. (Worry not it’s no rocket science!)

So okay now you should head over to Add Google Services Page.

How-to-Add-Web-Push-Notification-to-Your-WordPress-Site

Basically just Name your project, and in the second box, give your android package a name. Don’t worry the service won’t be using any kind of android package, it’s just a requirement for advanced users who might have different needs than us, but for us, we just need a name nothing else.

And then click on Choose and Configure Services.

The next screen would look something like this.

How-to-Add-Web-Push-Notification-to-Your-WordPress-Site

As you can see, there are three options out there, and you’d want to click on the “+” button that’s on top of the “cloud messaging” option.

And then Click on Enable Google cloud Messaging option.

How-to-Add-Web-Push-Notification-to-Your-WordPress-Site

Then you’d be provided with your Server API Key and Sender ID, copy the sender ID and go to your OneSignal plugin’s “configuration” tab and paste it there under “Google Project Number” tab

How-to-Add-Web-Push-Notification-to-Your-WordPress-Site

Step #2:- How To Make Your Blog Push Notification Ready in Easy Steps:-

So by now, I gather you’ve your Sender ID (which is pasted in your plugin’s configurations tab!) and your Server API key (which we will use later), right?

Now move on to OneSignal’s Official Website, and create a free account over there.

Once you’re logged in to your Free account on OneSignal, you should click on the Add a new App Tab.

How-to-Add-Web-Push-Notification-to-Your-WordPress-Site

A popup would come up asking you for a name, enter just about any name there and you’re good to proceed.

 Best-Way-to-Add-Push-Notifications-to-Your-Wordpress-Site

On the next screen, you would want to select Google Chrome and Mozilla Firefox as the platforms.

 Best-Way-to-Add-Push-Notifications-to-Your-Wordpress-Site

And then just click on Configure. Once you do so, another popup would come up which would look something like this.

How-To-Make-Your-Blog-Push-Notification-Ready-in-easy-asteps

Now here’s the tricky part. You can enter your URL in the URL box, and then the URL of the image you want to display with the notifications in the Default Notifications Icon URL.

Now you see the option that says “My site is not fully HTTPS”, right? And I’m considering the majority of you reading this piece don’t have SSL on their websites.

The bad news is that Google Chrome doesn’t support Non-SSL sites or plain HTTP sites for push notifications. Worry not that problem is solved as OneSignal will give you one of their own subdomains with the SSL certificates for this purpose.

So if you do not have SSL, just click that box, and then enter the subdomain you’d want to use, and click on save.

How-To-Make-Your-Blog-Push-Notification-Ready-in-easy-steps

Done! Now for the last part!

You just need to get your OneSignal Keys, and for that, click on App Settings > Keys and ID.

How-To-Make-Your-Blog-Push-Notification-Ready-in-easy-steps

Now for the final part, just copy-paste both of these keys and paste them in your WordPress OneSignal Plugin’s configurations tab.

How-To-Make-Your-Blog-Push-Notification-Ready-in-easy-steps

Final Step:-

Now just login to your OneSignal account once again, and you’d see this box. You should click on the “select SDK” option.

How-To-Make-Your-Blog-Push-Notification-Ready-in-easy-steps

Now select “WordPress” from the SDKs.

Best-Way-to-Add-Push-Notifications-to-Your-Wordpress-Site

Finally, just click on “Test Notifications” to test if your notifications are working which they should.

How-To-Make-Your-Blog-Push-Notification-Ready-in-easy-steps

You would get your notifications preview meaning you successfully setup Push Notifications for your WordPress site.

Final Words:-

So that was all I had on How to Add Web Push Notification to Your WordPress Site folks. I made sure to use as many images and illustrations as possible.

So I doubt any step would still be confusing you, right? But if you’re not getting something right, make use of the comment box and I’m here to your aid.

Also, if this piece helped you, I wouldn’t mind if you hit the share buttons.

evanderek

1 thought on “How to Add Web Push Notification to Your WordPress Site?”

  1. Well being honest, we are trying a more professional approach rather than popping up on desktops with our next articles. If we’re good, you guys will come back to us and leave feedback like this anyway, thanks for that. 🙂
    And I believe these notifications are real help for companies with more than just “articles”, like maybe price-comparison things or new releases and stuff. Afterall not many people appreciate desktop notifications about random topics, do they? Although I’m happy you show a positive vibe for this 🙂

    Reply

Leave a Comment