Guide to setup push notification system in blogger using OneSignal

Guide to setup push notification system in blogger using OneSignal

Traffic is the only thing all the bloggers need. Without traffic, a blog is of no use. But gaining traffic is the toughest part. You get traffics from the search engines and different sources, but there is a high chance that most of them will never return to your blog again. Some people want to follow your blog, but they don’t get notifications of your new posts. These are the returning visitors of your blog. They may not remember your blog name, so you have to give them proper notifications about your new blog posts. If they can subscribe to your blog, it will be helpful for both.

I think you are familiar with the push notification system. In your smartphone (Android/ iOS), you get notifications from the different apps you have installed. Similarly, web push notification work. You can send notifications whenever you publish a new post and whenever you want to send notifications manually.

So, in this post, we will be discussing setting up of OneSignal web push notification system in blogger.

Let’s start.

Complete Guide to Setup Push Notification System in Blogger

Step 1: Create an Account on OneSignal

Creating an account on OneSignal is very easy. You just have to go to OneSignal and click on the Sign-Up button. In the signup page, you will have to fill the signup form with your email ID, password and your company or business name.
push notification
Click on the activation link you have received through your email. At first, go with the free plan. The free plan allows sending unlimited web push notifications and 30 K subscribers. I think that’s enough for a beginner. You can upgrade your plan later on with your need.

Step 2: Add App

Add app is an option to add your website name. After signing in Click on the Add App button. You will see there a field named App Name. Fill up this field with your website name or whatever name you want to enter. The next thing to do is to click on the next Add App button.
Note: Remember the App Name you have entered or write it down. Because, whenever you want to delete your app, it will ask you the full name of your app you have written at the time of the creation of the app.
push notification
The next step to do is to select your platform. As you want to set up the push notification system on your website or blog, so choose Web Push from the list and click on the Next button.

Step 3: Choose Integration

In the next step, you have to go to the Choose Integration section. Here you have to go to the WordPress Plugin or Website Builder. As we are setting up the web push notification system in blogger, so you have to select Blogger from the Select Your Website Builder/CMS section. You have to follow almost the same steps to integrate the notification system in WordPress.
push notification

Step 4: Blogger Site Setup

Fill the details as the blogger site setup field asks. Put your Site name, URL and Logo, etc. The push notification will be sent to your subscribers with the site name you have provided here.

Note: If you do not have an SSL in your blogger blog (i.e your blog is not https://), OneSignal will send the notifications from a domain with extension. You just have to choose the label of

push notification

Step 5: Set up the Permission Prompt

Go to the next section and click on Add Prompt. The Add prompt button will open up the Permission Prompt Editor. Select the prompt type you want and click on the Save button. In this section, you will be able to select different prompt types, but only one at a time. You just have to click on the Add Prompt button again.
push notification
After editing the Permission Prompt section, you can edit the Welcome notification and Advanced settings. Both of these fields are optional. Now you just have to click on the Save button to get the codes.

Step 6: Get the Codes

As you customized and edited all the requirements, now it’s time to get the codes. After clicking on the Save button in the previous step, you will be taken to the Add Code to Site section. In this section, you will get the codes with a unique app id, which you will have to add to your blogger theme. Copy all the codes from there.
push notification

Step 7: Insert the Codes in Blogger Theme

Go to your blogger dashboard by signing in. Go to Theme and click on Edit HTML button. Find the <head> tag and paste the codes below the <head> tag.

push notification

Next, click on the Save theme button.

Return to OneSignal and click on the Finish button below.

Step 8: Finish!

In this step, you just have to check your blog if the setup is done perfectly or not.

push notification


Done! Right?

If you face any problem during the setup of the push notification, let me know in the comment section below. 
Thank You.

This Post Has One Comment

Leave a Reply