Create a bell notification icon for your blogger blogs or websites - TechyTalks: Let's talk about tech


Today in this article I am going to show you how to create a bell notification icon for your Blogger blog or website.

A bell notification plays an important role in gaining subscribers for your blog or website and ultimately it boosts traffic of your website or blog.

This article can help you to add subscribe bell icon on your bloggers blog or website.


Create a bell notification icon for your blogger blogs or websites

Create a bell notification icon for your blogger blogs or websites:


To create a bell push notification icon, first of all, you have to visit onesignal.com.


Once you visit onesignal.com you will get three options “Mobile push”, “Email” and “Web push”.



Since you want to create notification bell icon for your website, so you have to select “Web push” and then click on “Get started”.





How to add subscribe bell icon on blogger




Now you need to signup for an account. You can either create an account or simply signup with your Facebook or Google+ account.


How to add subscribe bell icon on blogger



Once you are logged in successfully you will see an option “Add a new app”, just click on it.


How to add subscribe bell icon on blogger



Now put your website name or anything that you like in the box “App name” and click on “Next”.





Now select “Web push” from the given options and click on “Next”.


How to add subscribe bell icon on blogger



Now from the “Choose integration” option click on “Wordpress plugin or website builder” and select “Blogger”.


Create a bell notification icon for your blogger blogs or websites



Now in “Blogger site setup” box fill out your website name and Url, then in “Permission Prompt setup” box click on “Add a prompt” button.


add web push notification on bloggers blogs



Now “Permission prompt editor” will open, select “Subscription bell” option and then select the size, location and color of the bell and click on “Save” button.


add web push notification on bloggers blogs



Now you will get a code from One signal and also your App id, you don’t need to copy the code, just copy the App id from the given code.


add web push notification on bloggers blogs



Now open blogspot.com and login to your blog, in which you want to place notification bell icon.

Then go to “Layout” and click on “add a gadget”.
Now select “HTML/Java Script”


add web push notification on bloggers blogs



Now copy the following code and paste this code into the “Content” box.


<script src="https://cdn.onesignal.com/sdks/OneSignalSDK.js" async='async'></script>
  <script>
  var OneSignal = window.OneSignal || [];
  OneSignal.push(["init", {
  appId: "YOUR_APP_ID",
  autoRegister: false, /* Set to true to automatically prompt visitors */
  httpPermissionRequest: {
  enable: true
  },
  notifyButton: {
  enable: true /* Set to false to hide */
  }
  }]);
  </script>


add web push notification on bloggers blogs



Now Just remove “YOUR APP ID” and place your own app id that you have got from One signal.

That’s it, now refresh your website or blog you will see a bell icon at the bottom of your website.

If you still have any doubts comment below. If you like this article, don’t forget to share this with your friends.












5 comments:

  1. Replies
    1. Just follow the steps properly, it will work.

      Delete
  2. in preview it is visibal but not on actual site

    ReplyDelete
  3. Thanks in support of sharing such a pleasant opinion, piece of writing
    is nice, thats why i have read it fully

    ReplyDelete
  4. you are in reality a just right webmaster. The site loading pace is incredible.
    It sort of feels that you're doing any unique trick. In addition, The
    contents are masterwork. you've performed a magnificent process in this subject!

    ReplyDelete