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

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

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.