Hello Friends, in this post, I'm going to guide you step by step on adding the WhatsApp live chat button on the blogger. So, follow the easy steps and learn more about how to add a chat button in the Blogger.
Why do you need to add a WhatsApp chat button on your blog?
You may know why a live chat button important for your blog, but unfortunately, if you have not heard before about it, so, do not worry! I'm here to help you.
These days WhatsApp is one of the easiest and popular messenger applications in the world. Its popularity almost in all countries except China. And according to researches, Whatsapp will be more popular, in the future, here only reasons that it provides the easiest way of communication in different ways. Such as text messages, video calling, Audio call and audio recorded clips, etc.
In a blog, a WhatsApp chat button can help in many ways-
- Your readers can easily connect to you and quickly solve their particular problems with it instead of a contact us page.
- It generates a funnel where you can keep in touch with your clients.
- It also helps to collect information such as phone number and location. That means it helps in retargeting your clients.
- It brings traffic and subscribers.
- It helps to generate more sales on your blog.
In the technological era, people like an easy way to communicate with others. So, having a Whatsapp chat button, messenger chat button, or any other social media chat button on your blog is the haven way to connect with your clients and helps them.
Steps to add WhatsApp Chat button in blogger
Step 1 - CSS
First you have to do is go to the Edit HTML template menu and add the CSS code just above ]]></b:skin>.
/* CSS Multiple Whatsapp Chat */
#whatsapp-chat{position:fixed;background:#fff;width:350px;border-radius:10px;box-shadow:0 1px 15px rgba(32,33,36,.28);bottom:90px;right:30px;overflow:hidden;z-index:99;animation-name:showchat;animation-duration:1s;transform:scale(1)}
a.blantershow-chat{background:linear-gradient(to right top,#6f96f3,#164ed2);color:#fff;position:fixed;z-index:98;bottom:25px;right:30px;font-size:15px;padding:10px 20px;border-radius:30px;box-shadow:0 1px 15px rgba(32,33,36,.28)}
a.blantershow-chat i{transform:scale(1.2);margin:0 10px 0 0}.header-chat{background:linear-gradient(to right top,#6f96f3,#164ed2);color:#fff;padding:20px}
.header-chat h3{margin:0 0 10px}.header-chat p{font-size:14px;line-height:1.7;margin:0}
.info-avatar{position:relative}.info-avatar img{border-radius:100%;width:50px;float:left;margin:0 10px 0 0}
.info-avatar:before{content:'\f232';z-index:1;font-family:"Font Awesome 5 Brands";background:#23ab23;color:#fff;padding:4px 5px;border-radius:100%;position:absolute;top:30px;left:30px}
a.informasi{padding:20px;display:block;overflow:hidden;animation-name:showhide;animation-duration:2.5s}
a.informasi:hover{background:#f1f1f1}.info-chat span{display:block}#get-label,span.chat-label{font-size:12px;color:#888}
#get-nama,span.chat-nama{margin:5px 0 0;font-size:15px;font-weight:700;color:#222}#get-label,#get-nama{color:#fff}span.my-number{display:none}
.blanter-msg{color:#444;padding:20px;font-size:12.5px;text-align:center;border-top:1px solid #ddd}
textarea#chat-input{border:none;font-family:'Arial',sans-serif;width:100%;height:20px;outline:none;resize:none}
a#send-it{color:#555;width:60px;margin:-5px 0 0 5px;font-weight:700;padding:10px;background:#eee;border-radius:05px}
.first-msg{background:#f5f5f5;padding:30px;text-align:center}
.first-msg span{background:#e2e2e2;color:#333;font-size:14.2px;line-height:1.7;border-radius:10px;padding:15px 20px;display:inline-block}
.start-chat .blanter-msg{display:flex}#get-number{display:none}a.close-chat{position:absolute;top:5px;right:15px;color:#fff;font-size:30px}
@keyframes showhide{from{transform:scale(.5);opacity:0}}@keyframes showchat{from{transform:scale(0);opacity:0}}
@media screen and (max-width:480px){#whatsapp-chat{width:auto;left:5%;right:5%;font-size:80%}}
.hide{display:none;animation-name:showhide;animation-duration:1.5s;transform:scale(1);opacity:1}
.show{display:block;animation-name:showhide;animation-duration:1.5s;transform:scale(1);opacity:1}Step 2 - JavaScript
Paste the JavaScript Codes above to </body> tag.
<script type='text/javascript'>
//<![CDATA[
$(document).on("click","#send-it",function(){var a=document.getElementById("chat-input");if(""!=a.value){var b=$("#get-number").text(),c=document.getElementById("chat-input").value,d="https://web.whatsapp.com/send",e=b,f="&text="+c;if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent))var d="whatsapp://send";var g=d+"?phone="+e+f;window.open(g, '_blank')}}),$(document).on("click",".informasi",function(){document.getElementById("get-number").innerHTML=$(this).children(".my-number").text(),$(".start-chat,.get-new").addClass("show").removeClass("hide"),$(".home-chat,.head-home").addClass("hide").removeClass("show"),document.getElementById("get-nama").innerHTML=$(this).children(".info-chat").children(".chat-nama").text(),document.getElementById("get-label").innerHTML=$(this).children(".info-chat").children(".chat-label").text()}),$(document).on("click",".close-chat",function(){$("#whatsapp-chat").addClass("hide").removeClass("show")}),$(document).on("click",".blantershow-chat",function(){$("#whatsapp-chat").addClass("show").removeClass("hide")});
//]]>
</script>Step 3 - HTML Codes
There are two options for placing this HTML code, the first is the easiest one on the Blogger Layout menu, add a new HTML widget in the sidebar and paste all the HTML code below. The second is to paste all the HTML code below before the tag </body>, it's all the same, it's up to you to choose which method.
<div id='whatsapp-chat' class='hide'>
<div class='header-chat'>
<div class='head-home'><h3>Hello!</h3>
<p>Click one of our representatives below to chat on WhatsApp or send us an email to yourname@gmail.com</p></div>
<div class='get-new hide'><div id='get-label'></div><div id='get-nama'></div></div></div>
<div class='home-chat'>
<!-- Info Contact Start -->
<a class='informasi' href='javascript:void' title='Chat Whatsapp'>
<div class='info-avatar'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiH2Eg49q7qGzLGsCL_TJW0fxru12D4jUTy-zgCXDZCPuZPIPM6UHxxOnFpzSLdeY3UM29QGalgLtqRsRCyAyl7Xi6ZD4rDsXZl2axzDClArYYJmljaGDmJUCLa420tSdockdw2XkzGTTA/s70/supportmale.png'/></div>
<div class='info-chat'>
<span class='chat-label'>Support</span>
<span class='chat-nama'>Customer Service 1</span>
</div><span class='my-number'>910000000000</span>
</a>
<!-- Info Contact End -->
<!-- Info Contact Start -->
<a class='informasi' href='javascript:void' title='Chat Whatsapp'>
<div class='info-avatar'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhReXCGUEnIi75ZvjZdPqtyW8tD-sTvIzcV7kq7d9sVOKnhBedTSS5urWWec2aZS75VProZHq-mwjvV2poIPfkFD2HSUgi4r641CID_pm9kcn2rQV2eQj-PeHnlgfWGfdTwE4p8QBz72OM/s70/supportfemale.png'/></div>
<div class='info-chat'>
<span class='chat-label'>Sales</span>
<span class='chat-nama'>Customer Service 2</span>
</div><span class='my-number'>910000000000</span>
</a>
<!-- Info Contact End -->
<div class='blanter-msg'>Call us to <b>+91 0000000000</b> from <i>0:00hs a 24:00hs</i></div></div>
<div class='start-chat hide'>
<div class='first-msg'><span>Hello! What can I do for you?</span></div>
<div class='blanter-msg'><textarea id='chat-input' placeholder='Write a response' maxlength='120' row='1'></textarea>
<a href='javascript:void;' id='send-it'>Send</a></div></div>
<div id='get-number'></div><a class='close-chat' href='javascript:void'>×</a>
</div>
<a class='blantershow-chat' href='javascript:void' title='Show Chat'><i class='fab fa-whatsapp'></i>How can I help you?</a>- Change the part marked with your Whatsapp number, also change the message text on WhatsApp according to your wishes.
- For WhatsApp Number don't use + sign , add WhatsApp number with country code only.
Step 4 - Adding Font Awesome & jQuery
Note: This is an optional step, if Font Awesome is already installed on your blog then don't add these codes to your blog.
Look for the code </head> on your blog and place the following code just above the code </head>:
Font Awesome
<link href = 'https: //use.fontawesome.com/releases/v5.8.2/css/all.css' rel = 'stylesheet' type = 'text / css' />jQuery
<script src = 'https: //ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'> </script>Video Tutorial
Coming Soon ☺️At this point, your whatsapp chat button has been completely created, if you follow all the steps correctly we can guarantee that the Whatsap chat button is working properly. If there are questions or sections that are not understood, please write down questions through the comments column provided.