How to Add WhatsApp Chat Widget in Blogger?

How to Add WhatsApp Chat Widget in Blogger Blog

How to Add WhatsApp Chat Widget in Blogger?:

This widget does not have built-in chat capability like the Messenger chat widget, but it has a nice aesthetic and leads users to the WhatsApp chat website when they click on the WhatsApp chat button.

This widget does not offer as much functionality, but if you still want to add it to your website, follow the procedures outlined below.

If you are a blogger, you can follow the procedures outlined below.

Would You Like To Include A WhatsApp Chat Widget In Your Blog For Customer Support? Simply follow these simple steps and copy the codes below, and you'll be good to go.

METHOD-1: SIMPLE WHATSAPP BUTTON WIDGET


This Is A Simple Floating WhatsApp Chat Widget Code, A WhatsApp Chat Button That Only Takes One Click. Simply follow the steps below to add this widget.

  • 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 +923063222200 With Your Own WhatsApp Number


<!-- getbutton.io widget -->
<script type="text/javascript">
    (function () {
        var options = {
            whatsapp: "+923063222200", // 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 -->

METHOD-2: FULL WHATSAPP CHAT CHAT WIDGET

Because the integration method is the same as that of Above, we will provide you with a guide to just the necessary changes.

After copying, make sure to change all of the required codes.

  • Search For Emexee and Replace With Your Brand Name.
  • Search For BrandImg And Change The Current Url(https://www.emexee.Com/.jpg) With Your Profile Picture Url.
  • Searxh For EMEXEE And Change It With Your Name(Don’t Remove Those Stars * Symbol)
  • Now Finally Change The WhatsApp Number 923063222200 With Your Country Code+Number (For Example: Country Code Is +92 And Number Is 1234567890 Then It Will Be 923063222200).

<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":"EMEXEE",
      "brandsubtitle":"typically replies within a day",
      "brandimg":"Https://Www.Emexee.Com/.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":"923063222200"
  }
};
    s.onload = function() {
        createwhatsappchatwidget(options);
    };
    var x = document.getelementsbytagname('script')[0];
    x.parentnode.insertbefore(s, x);
</script>