So you’ve been wondering how to set up push notification on your website and decided to look it up. Well, you’ve come to the right place on the web because I’m going to show you how to do exactly that in this article. But before we continue, let me explain to a few of us who don’t know what a website push notification is.
What Is Website Push Notification
When you have push notification enabled on your website, visitors will get a pop-up on their screen and they’ll be asked to allow or don’t allow the notifications of your website. if the visitor decides to allow it by clicking on the ‘Allow‘ button, then the visitor will become a subscriber of your website and you can then automatically send a notification to their device whenever you publish a new post in your website.
So in this way, you can bring your visitors coming back to your website content, much like how subscribers on other platforms like YouTube work. So now that we all have an idea of what push notification on a website is, here’s how to set it up on your website.
There are different services that offer push notification for your website but the one we’ll be using in this article is called OneSignal. With OneSignal you can enable Push Notification on your website for almost any platform, but we’re only going to cover how to implement it on Blogger and WordPress in this article.
If you’d like to know how it’s done on other platforms, leave a comment and we’ll make a dedicated article on the topic.
As you can see in the image below, OneSignal offers a lot of features most of which are available for both paid and free users.
• Mobile Push Notifications
• Web Push Notifications
• In-App Messages
OneSignal supports a lot of different web development environments and the good thing is that it has a free version for getting started with OneSignal.
When you go to Pricing, we can see there is a free version and it has some limitations but you can get started with the free version and as your website grows you can upgrade to different plans of OneSignal.
Go ahead and read through the different features that comes with a plan and you’ll be able to understand which one is right for you.
How to set up Push Notification on Blogger with OneSignal
Once you’ve done that you’ll get the welcome screen, and the next thing you have to do is to add your app or website name in the box, select a platform: for our Blogger website we’ll select web then hit Next: configure your platform
Once you have done that, the next screen you’ll see will look like the image below.
1. So the first option is Typical Site. Select this option for typical websites, but if you are unsure you can go ahead and click on the second option and here you can see different website builder and cms are displayed.
We want to select Blogger, and once you’ve done that just scroll down and we can see different options we have to fill out.
2. The next option is the Sites Setup as shown in the image above.
Fill in your details by adding your Site Name and then your Site URL. We also have the option of adding an icon that will display on the notification, so go ahead and upload your site’s Favicon, then next thing is to Choose a Label.
3. The third option is the Permission Prompt Setup as shown in the image below.
Here you can select how you want the notification pop-up to display. The first one we have over here is the Push Slide Prompt which will slide from the top of we choose to go with the option, and we will have two options ‘Allow‘ and ‘No Thanks‘ but you can go ahead and customize them to whatever you want and you can also play around with the timer.
4. The fourth option as seen in the image below is what should be displayed when the user successfully subscribes for our service.
the first option is the title we can just type anything over here, and also for the message you can just have any message over here. But by default, it has the Thanks for subscribing message and you can also add a link over here whenever the visitor has subscribed you can send him to a specific link if You want.
5. The fifth option as shown in the image can be left can default. But you can also play around with the settings if you know what you’re doing.
lastly we have the save button let’s click on that and our settings have been saved. The next thing is that we have to add the generated code to our blogger website.
Adding The Code to our Blogger Website
After clicking Save in the previous option, a code will be generated for you which you’re to add to your Blogger website.
Just click on Copy Code and Finish to save. Now go to your Blogger dashboard and then go to Theme then click on the arrow next to Customize and click on Edit HTML.
Next you have to paste the copied code from OneSignal inside the Head Section of our website, and then just click on save and that’s basically it.
How to set up Push Notification on WordPress with OneSignal
Setting up OneSignal push notification for WordPress is just as simple as it is on Blogger.
You can simply add your OneSignal generated code to the header of your WordPress website like we did on Blogger, but if you don’t like messing around with your website coding, then you can have OneSignal Push Notification enabled on your website with the OneSignal Plugin.
Setting Up OneSignal For WordPress with Plugin
To begin with, we have to go to the plugins section from our WordPress dashboard. Here search and install the OneSignal plugin.
Next, go back to your Onesignal Dashboard, and you should see the options in the image below, from which you’ll click on the options that says ‘All Browsers’
It’ll take you back to where you would select a platform, now select WordPress and click save.
Now copy all three codes (App ID, API Key, Safari Web ID) and hit Save.
Now paste them in their respective fields inside the OneSignal Plugin.
You can further customize the Pop Up notification to best suit your taste from the many other options available inside the OneSignal Plugin, after which hit the Save Button and that’s it.
Sending Push Notifications is one of the many ways you can get your website visitors to keep visiting your site.
With OneSignal service, any new content you publish on your website is automatically sent to all visitors who opt in to receive notification from your site.