How To Add Web Push Notification On Blogger Blog For Free (Step By Step Tutorial)

5/5 - (2 votes)

How to Add Web Push Notification on Blogger Blog for Free (Step by step Tutorial): Add Web Push Notification on Blogger is very important for a professional blog. This will send Push Notification to the visitors when they are Off-Page. I personally prefer Push Notification because it is the best way to interact with your blog visitors. In this article, I will show you how to add Web Push Notification to Blogger Blog with a 100% Free method and you can send unlimited Numbers of push notifications.

For adding Web Push Notification to Blogger Blog For Free on your Blog follow the step by step tutorial given below:

Step 1. First, go to One Signal website.

Step 2. Now Click on Get Start on Web Push Section. A new pop-up window will appear now Sign up or Register with this site and verify it.

Step 3. Now, sign in to your one signal dashboard and click on “Add New App “.

Step 4. Write the blogger website name which you want to add and click on Create.

Step 5. A new pop-up window will open. Here you need to choose web push and click on next.

Step 6. Now a new page will open. Here from the ” Choose Integration ” section select “blogger”.

Step 7. On “Blogger Site Setup” we need to provide site name, site URL, and the site icon.

Step 8. On “Permission Prompt Setup” click on add prompt as your wish.

Step 9. On “Welcome Notification” write anything as a welcome notification.

Step 10. Now on the “Advance” option enable HTTPS if it is enabled on your blog. After all, this done save it up.

Step 11. A new page will open with configuration code which we need to add on the blogger. For this copy the code.

Step 12. Go to the blogger and click on a theme.

Step 13. Click on Edit HTML and paste the code after <head>

Step 14. Finally, save the template and on signal site Click on finish and that’s it.

You can also watch Our blogging Hindi Video Tutorial on how to Add Web Push Notification on Blogger Blog for Free (Step by step Tutorial) given below.

Read:

Finally, we hope this article can help you to understand “How to Add Web Push Notification on Blogger Blog for Free (Step by step Tutorial)” .If you really think this article help you then don’t forget to appreciate our efforts in the comments below. For more blogging and technology-related tutorials, stay connected with us.

For the latest tech news & blogging Tutorials, follow TECH FOR U on Twitter, Facebook, and subscribe to our YouTube channel.

1 thought on “How to Add Web Push Notification on Blogger Blog for Free (Step by step Tutorial)”

Kishore
December 12, 2023 at 2:22 pm
OneSignal stopped supporting new apps from using Blogger, Bubble, Squarespace, Webflow, Weebly, Wix, HTTP sites, and website builders that don’t support uploading Service Workers to a server (which are required for web push).
We used to provide a workaround subdomain like https://LABEL_HERE.os.tc so we would host the Service Worker files for you, but this isn’t going to be supported anymore for several reasons, the most important being:
This doesn’t work for iOS Web Push
It provides a bad User Experience for your users
Chrome is making a change detailed in their storage partitioning plans / CHIPS which when enabled prevents our SDK from checking unsubscribe stats when using the https://LABEL_HERE.os.tc/unsubscribe page.
If you currently use the the os.tc subdomain, you can continue to use it but will no longer be able to prompt for push notifications. Your existing subscriptions will continue to receive notifications. Starting September 8th, Chrome’s change will prevent users from being able to unsubscribe when they visit the https://LABEL_HERE.os.tc/unsubscribe page. They will need to unsubscribe from the browser notification settings.
Sorry for the inconvenience. We know a lot of people want this. Especially for blogger, hopefully the Google Team will support this someday: Is it possible that I can build progressive web app for my Blogger blog
If you use one of these types of site builders, you may be able to work around this by following our Typical Website setup and put a CDN in front of your domain to host the OneSignalSDKWorker.js Service Worker file. But this is quite technical and we don’t have any guidance on how to setup the CDN.