How to Add WhatsApp Chat Button in Blogger Website | Whatsapp Chat Widget on Website html code

How To add Whatsapp Chat widget on Website by  HTML Code

In this article, I will guide you about how to add a WhatsApp chat widget icon to your Blogger by putting it in HTML code. 

Want to add a WhatsApp chat widget to your blog for visitor support to contact you easily? Just follow these easy steps and copy and paste the codes below and you are good to go.

This tool does not have a built-in chat functionality like a messenger chat widget because that is free HTML code, not a WordPress, but it has a nice look and redirects its users to the WhatsApp chat page when the user clicks on the WhatsApp chat button.

Method #1: Simple Add WhatsApp Button Widget in Blogger

This is a simple floating WhatsApp chat widget icon, 1 click on the WhatsApp chat button. To open your Whatsapp profile, just follow the steps below. Blogger Course 2022

1. Go to Blogger Panel > Layout > Javascript
2. Now add a new code anywhere.
3. Select the JavaScript code.
4. Copy the codes below and paste them into the layout 

Don't forget to change the "word Put your number" with your WhatsApp number

 If You Read More Article:

•  Click On It ☛ Best Youtube Course
• Click On It ☛ 5 Premium Free Theme 

<!-- getbutton.io widget -->
<script type="text/javascript">
    (function () {
        var options = {
            whatsapp: "Put Your Number", // 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 #1: Add Professional Whatsapp Button In Blogger

This Second method is the same as above, so we will give you a guide for only the necessary changes in the second HTML code.

After copying, be sure to change all necessary codes mentioned below.

• Find Faisal Bhutta and replace it with your brand name.
• Find branding and change the current URL (https://www.seekhlotech.blogspot.Com/2021/11 / false jpg. html) with your profile picture URL.
• Find the word put the name and change it to its name (don't remove the star symbol *)
• Now finally change your WhatsApp number with the demo number  (for example demo number is 92xxx-xxxxxxx).

<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":"Faisal bhutta",
      "brandsubtitle":"wecome to our profile",
  "brandimg":"https://www.seekhlotech.blogspot.com/2021/11/faisu.jpg.html",      "welcometext":"hi, there!\nhow can i help you?",
      "messagetext":"hello,*put name* bro give me answer.%0a%0a{{page_link}}",      "backgroundcolor":"#008a73",
      "ctatext":"start chat",
      "borderradius":"25",
      "autoshow":false,
      "phonenumber":"92xxx-xxxxxxx"
  }
};
    s.onload = function() {
        createwhatsappchatwidget(options);
    };
    var x = document.getelementsbytagname('script')[0];
    x.parentnode.insertbefore(s, x);
</script>

After adding the source code to your website, you can now visit your website and you will see a floating WhatsApp chat button. when you click on that button, you will be redirected to your messaging profile.