How to Install Whatsapp Widget on Blogger ?

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:
Www.SmartTechMukesh.Online

Our All Blog Posts Protected By DMCA.Com. Don't Copy Our Post in Other Languages Without Our Attribution Link. © 2021 Smart Tech Mukesh All Rights Reversed.

Read Also :