How to Install Whatsapp Widget on Blogger ?

Hello Friends, Welcome to all of you in this New post of Ours today. In today's new post I will tell you all that how you can install WhatsApp chat widget on blogger in a very easy way. So read the post till the end. I am the host of this blog Mukesh Kumar so let's start this post.

WhatsApp Widget For Blogger ?

Whatever the CMS, comments are a type of feature provided as a method of communication between readers and writers. Like built-in comments and Disqus, for example. But the discussion service did not give much results. Visitors get lazy with all the fuss. Email, captcha verification, no notification, boring display, must use outdated features etc.

What's Wrong With the Blog ?

If you look at the comparison between YouTube and blog audience, it is not fair. But whatever it is, it's probably our fault that we can't provide features that are comfortable and easy to use. Or, the content we offer is not of good quality/useful.

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

Who does not know WhatsApp, this social media is one of the most user-friendly applications in the world. Only public figures use WhatsApp, especially with netizens.

How to Install Whatsapp Widget on Blogger ?

Step 1 :- First Login To Your Blogger Account.

Step 2 :- Then Select The Theme Menu.

Step 3 :- Then Click On Edit HTML.

Step 4 :-  Then Paste Above ]]></b:skin> on Css Files.

: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}

Step 5 :- Then Paste Above </body> on HTML.

<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&amp;text=Hiii%2C%20Admin.%20Good%20Morning.%20" rel="nofollow noreferrer" target="_blank">
    <span>Start Chat...</span>   
  </a>
</div>

Step 6 :- Then Don't Forget to Click on Save and See The Result.

Conclusion :-

Increasing interaction between readers and writers can actually be done in various ways.There are already a lot of plugins or widgets vailable for use. Please choose the one that suits your needs.

You can think for yourself why these interactions are very important for the sustainability of the blog going forward. Enough articles about How to Install Whatsapp Widget on Blogger , Thank you.

Refrence :
Smart Tech Carry

Go to Link

Rate This Article

Thanks for reading: How to Install Whatsapp Widget on Blogger ?:)

Conclusion

In this article, I have shared How to Install Whatsapp Widget on Blogger ?. I hope you have liked it Please do share it with your friends and follow our blog for more.

Join our Telegram Channel to get the lastest posts updates daily. Thank you!