How to Install WhatsApp Widget on Blogger

Whatever the CMS, comments are one type of feature provided as a method of communication among readers and authors. For example, such as the default comments or Disqus.

But the discussion service did not yield much results. Visitors tend to be lazy with all the hustle and bustle. Must use email, captcha verification, no notifications, boring display, obsolete features, etc.

What's Wrong with Blogs?

It really doesn't feel fair to look at the comparison between YouTube audiences and blogs. But whatever it is, it may be our fault that we can't provide features that are convenient and easy to use. Or, the content we present is not quality/useful.

But do you know, it turns out that WhatsApp can also be used as a communication tool on web pages. Yes, this widget is expected to be a solution amid the obsolescence of the built-in default features provided.

Who does not know WhatsApp, this social media has become one of the applications with the largest number of users in the world. Public figures only use WhatsApp, especially with netizens. Then, how to install? Easy, let's go.

 

How to Install WhatsApp Widget on Blog

1. Log in to BLOGGER
2. Select the THEME menu
3. Select EDIT HTML
4. Paste above ]]></b:skin>:

   :root{--background:#075e54;--bg-chat:#efefef;--icon:#fff;--text:#505050;--text-alt:#989b9f;--chatbox-width:320px}
   svg{width:22px;height:22px;vertical-align:middle;fill:var(--icon)}
   .chatMenu,.chatButton .svg-2{display:none}
   .chatButton{position:fixed;background-color:var(--background);bottom:20px;right:20px;border-radius:50px;z-index:20;overflow:hidden;display:flex;align-items:center;justify-content:center;width:50px;height:50px;-webkit-transition:all .2s ease-out;transition:all .2s ease-out}
   .chatButton svg{margin:auto;fill:var(--icon)}  
   .chatBox{position:fixed;bottom:70px;right:20px;width:var(--chatbox-width);-webkit-transition:all .2s ease-out;transition:all .2s ease-out;z-index:21;opacity:0;visibility:hidden;line-height:normal}
   .chatContent{border-radius:15px;background-color:#fff;box-shadow:0 0px 15px 0 rgba(0,0,0,.1);overflow:hidden}
   .chatHeader{position:relative;display:flex;align-items:center;padding:15px 20px;background-color:var(--background);overflow:hidden}
   .chatHeader svg{width:32px;height:32px;flex-shrink:0;fill:var(--icon)}
   .chatHeader .chatTitle{padding-left:15px;font-size:14px;color:var(--icon)}
   .chatHeader .chatTitle span{font-size:11.5px;display:block;line-height:1.58em}  
   .chatText{display:flex;flex-wrap:wrap;margin:25px 20px;font-size:12px;color:var(--text)}
   .chatText span{display:inline-block;margin-right:auto;padding:10px 10px 10px 20px;background-color:var(--bg-chat);border-radius:3px 15px 15px}
   .chatText span:after{content:"Just now";margin-left:15px;font-size:9px;color:var(--text-alt)}
   .chatText .typing{margin:15px 0 0 auto;padding:10px 20px 10px 10px;border-radius:15px 3px 15px 15px}
   .chatText .typing:after{display:none}  
   .chatStart{display:flex;align-items:center;margin-top:15px;padding:18px 20px;border-radius:10px;background-color:#efefef;color:var(--text);overflow:hidden;font-size:12px}
   .chatMenu:checked + .chatButton{-webkit-transform:rotate(360deg);transform:rotate(360deg)}
   .chatMenu:checked + .chatButton .svg-1{display:none}
   .chatMenu:checked + .chatButton .svg-2{display:block}
   .chatMenu:checked ~ .chatBox{bottom:90px;opacity:1;visibility:visible}

5. Paste above </body>:

   <input class="chatMenu hidden" id="offchatMenu" type="checkbox"/>
   <label class="chatButton" for="offchatMenu">
     <svg class="svg-1" viewBox="0 0 32 32"><g><path d="M16,2A13,13,0,0,0,8,25.23V29a1,1,0,0,0,.51.87A1,1,0,0,0,9,30a1,1,0,0,0,.51-.14l3.65-2.19A12.64,12.64,0,0,0,16,28,13,13,0,0,0,16,2Zm0,24a11.13,11.13,0,0,1-2.76-.36,1,1,0,0,0-.76.11L10,27.23v-2.5a1,1,0,0,0-.42-.81A11,11,0,1,1,16,26Z"></path><path d="M19.86,15.18a1.9,1.9,0,0,0-2.64,0l-.09.09-1.4-1.4.09-.09a1.86,1.86,0,0,0,0-2.64L14.23,9.55a1.9,1.9,0,0,0-2.64,0l-.8.79a3.56,3.56,0,0,0-.5,3.76,10.64,10.64,0,0,0,2.62,4A8.7,8.7,0,0,0,18.56,21a2.92,2.92,0,0,0,2.1-.79l.79-.8a1.86,1.86,0,0,0,0-2.64Zm-.62,3.61c-.57.58-2.78,0-4.92-2.11a8.88,8.88,0,0,1-2.13-3.21c-.26-.79-.25-1.44,0-1.71l.7-.7,1.4,1.4-.7.7a1,1,0,0,0,0,1.41l2.82,2.82a1,1,0,0,0,1.41,0l.7-.7,1.4,1.4Z"></path></g></svg>
     <svg class="svg-2" viewBox="0 0 512 512"><path d="M278.6 256l68.2-68.2c6.2-6.2 6.2-16.4 0-22.6-6.2-6.2-16.4-6.2-22.6 0L256 233.4l-68.2-68.2c-6.2-6.2-16.4-6.2-22.6 0-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3l68.2 68.2-68.2 68.2c-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3 6.2 6.2 16.4 6.2 22.6 0l68.2-68.2 68.2 68.2c6.2 6.2 16.4 6.2 22.6 0 6.2-6.2 6.2-16.4 0-22.6L278.6 256z"></path></svg>
   </label>
   <div class="chatBox">
     <div class="chatContent">
       <div class="chatHeader">
         <svg viewbox="0 0 32 32"><path d="M24,22a1,1,0,0,1-.64-.23L18.84,18H17A8,8,0,0,1,17,2h6a8,8,0,0,1,2,15.74V21a1,1,0,0,1-.58.91A1,1,0,0,1,24,22ZM17,4a6,6,0,0,0,0,12h2.2a1,1,0,0,1,.64.23L23,18.86V16.92a1,1,0,0,1,.86-1A6,6,0,0,0,23,4Z"></path><rect height="2" width="2" x="19" y="9"></rect><rect height="2" width="2" x="14" y="9"></rect><rect height="2" width="2" x="24" y="9"></rect><path d="M8,30a1,1,0,0,1-.42-.09A1,1,0,0,1,7,29V25.74a8,8,0,0,1-1.28-15,1,1,0,1,1,.82,1.82,6,6,0,0,0,1.6,11.4,1,1,0,0,1,.86,1v1.94l3.16-2.63A1,1,0,0,1,12.8,24H15a5.94,5.94,0,0,0,4.29-1.82,1,1,0,0,1,1.44,1.4A8,8,0,0,1,15,26H13.16L8.64,29.77A1,1,0,0,1,8,30Z"></path></svg>
         <div class="chatTitle">Please chat with our team<span>Admin will reply in a few minutes</span></div>
       </div>
       <div class="chatText">
         <span>Hello, Is there anything we can help you with?</span>
       <span class="typing">...</span>
       </div>
     </div>
     <a class="chatStart" href="https://api.whatsapp.com/send?phone=91xxxxxxxxxx&text=Hello,%20I%20want%20to%20ask!" rel="nofollow noreferrer" target="_blank">
       <span>Start chat...</span>        
     </a>
   </div>

6. Select SAVE
7. Done.

Customize the display and WhatsApp number that will be used to receive messages. All have been marked based on their respective display type.

Improving the interaction between readers and writers can actually be done in a variety of ways. There are already many plugins or widgets available to use. Please choose the one that suits your needs.

You can think for yourself why this interaction is so important for the future of the blog.

Enough of the article on how to install whatsApp widgets on a blog, hopefully it's useful for you. Thank you and good luck.