How to Add WhatsApp Chat Widget in Blogger Blog

Want to Add a WhatsApp Chat Widget in your Blog for Customer Support? Just follow these simple steps and Copy pest below codes and you will good to go.

#1 Method: Simple WhatsApp Button Widget

This is a Simple floting WhatsApp Chat Widget Code, a 1 click WhatsApp Chat Button. To Add this widget simply follow below steps.

  • Go To Blogger Dashboard>Layout
  • Now Add a New Widget anywhere.
  • Select the HTML/JavaScript Widget.
  • Copy Below Codes and past there

Don’t forget to change the demo number +910011223344 with your own WhatsApp Number

<!-- GetButton.io widget -->
<script type="text/javascript">
    (function () {
        var options = {
            whatsapp: "+910011223344", // WhatsApp number
            call_to_action: "Message us", // Call to action
            position: "left", // Position may be 'right' or 'left'
        };
        var proto = document.location.protocol, host = "getbutton.io", url = proto + "//static." + host;
        var s = document.createElement('script'); s.type = 'text/javascript'; s.async = true; s.src = url + '/widget-send-button/js/init.js';
        s.onload = function () { WhWidgetSendButton.init(host, proto, options); };
        var x = document.getElementsByTagName('script')[0]; x.parentNode.insertBefore(s, x);
    })();
</script>
<!-- /GetButton.io widget -->

#2 Method: Full WhatsApp Chat Chat Widget

Full WhatsApp Chat Chat Widget for Blogger

The Integration method is same like abhove, So we will give you guide to only required changes.

Also, Read  Automatic Related Post in Blogger

After Copy Make sure You cahnge all the codes that required.

  • Search for BloggingMafia and Replace with Your Brand Name.
  • Search for brandImg and Change the current url(https://www.bloggingmafia.com/wp-content/uploads/2020/10/RipoN.jpg) with your Profile Picture url.
  • Searxh for Mafia word and Chnag it with Your Name(don’t remove those Stars * Symbol)
  • Now Finally Change the WhatsApp Number 910011223344 With your Country Code+Number (for Example: Country code is +92 and Number is 1234567890 then it will be 921234567890).
<script>
    var url = 'https://wati-integration-service.clare.ai/ShopifyWidget/shopifyWidget.js?43370';
    var s = document.createElement('script');
    s.type = 'text/javascript';
    s.async = true;
    s.src = url;
    var options = {
  "enabled":true,
  "chatButtonSetting":{
      "backgroundColor":"#4dc247",
      "ctaText":"",
      "borderRadius":"25",
      "marginLeft":"0",
      "marginBottom":"50",
      "marginRight":"50",
      "position":"right"
  },
  "brandSetting":{
      "brandName":"BloggingMafia",
      "brandSubTitle":"Typically replies within a day",
      "brandImg":"https://www.bloggingmafia.com/wp-content/uploads/2020/10/RipoN.jpg",
      "welcomeText":"Hi, there!\nHow can I help you?",
      "messageText":"Hello, *Mafia* I have a question.%0A%0A{{page_link}}",
      "backgroundColor":"#008a73",
      "ctaText":"Start Chat",
      "borderRadius":"25",
      "autoShow":false,
      "phoneNumber":"910011223344"
  }
};
    s.onload = function() {
        CreateWhatsappChatWidget(options);
    };
    var x = document.getElementsByTagName('script')[0];
    x.parentNode.insertBefore(s, x);
</script>

Feel free to ask if you are facing any issue with this in the comment box below.

Thank You.

About RipoN

Hi This is RipoN.. I’m not really interested in building a reputation for myself. But I do care for what the company stands for. I believe in work and being connected to the world we live in....

5 thoughts on “How to Add WhatsApp Chat Widget in Blogger Blog”

Leave a Comment