How to Add WhatsApp Live Chatbox to Blogger Website
Engaging with your website visitors in real-time can significantly boost user satisfaction and conversion rates. One effective way to achieve this is by adding a WhatsApp live chatbox to your Blogger website. In this guide, we will walk you through the steps to integrate this feature seamlessly, ensuring your visitors can reach out to you instantly.
Why Add a WhatsApp Live Chatbox?
- Instant Communication: Provide immediate support to your visitors.
- User-Friendly: Most users are already familiar with WhatsApp.
- Increased Engagement: Real-time chat can help reduce bounce rates.
- Higher Conversion Rates: Instant answers can lead to quicker decision-making by users.
Video Tutorial Related to This Topic
If you don’t feel like reading, then instead of reading you can watch the video below that is related to this topic.
Step-by-Step Guide to Adding WhatsApp Live Chatbox
Step 1: Login to Blogger dashboard then go to Themes.
Step 2: Click on the icon next to the Customize button.
Step 3: Make sure your template has jQuery installed. If not, add the script below above </head> tag of your template.
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'/>
Step 4: Now Press Ctrl + F and search the ]]></b:skin> tag. Then paste the following CSS code above it.
svg{width:22px;height:22px;vertical-align:middle;fill:#fff}
.chatMenu,.chatButton .svg-2{display:none}
a#send-it{color:#555;width:55px;margin:5px;font-weight:700;padding:10px;background:#f0f5fb;border-radius:15px 3px 15px 15px;text-decoration:none}
a#send-it:hover{opacity:.8}
.chatStart input[type="text"]{padding:10px;margin:0;width:80%;border:none;color:#555}
.chatStart input[type="text"]:focus{outline:none}
.chatMenu{display:none}
.chatButton{position:fixed;background-color:#ff0033;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:#fff}
.chatButton svg.svg-2{display:none}
.chatBox{position:fixed;bottom:70px;right:20px;width:320px;-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 5px 15px 0 rgba(0,0,0,.05);overflow:hidden}
.chatHeader{position:relative;display:flex;align-items:center;padding:15px 20px;background-color:#ff0033;overflow:hidden}
.chatHeader img{border-radius:100%;width:50px;float:left;margin: -2px 10px 0 0;}
.chatHeader .chatTitle{padding-left:16px;font-size:14px;font-weight:700;color:#fff}
.chatHeader .chatTitle span{font-size:11.5px;display:block;line-height:1.58em}
.chatHeader:before{content:"";bottom:14;right:0;width:12px;height:12px;box-sizing:border-box;background-color:#4dc247;display:block;position:absolute;z-index:10;border-radius:100%;border:2px solid #ff0033;left:55px}
.chatText{display:flex;flex-wrap:wrap;margin:25px 20px;font-size:12px;color:#505050}
.chatText span{display:inline-block;margin-right:auto;padding:10px 10px 10px 20px;background-color:#f0f5fb;border-radius:3px 15px 15px}
.chatText span:after{content:'Just Now';margin-left:15px;font-size:9px;color:#989b9f}
.chatText span.typing{margin:15px 0 0 auto;padding:10px 20px 10px 10px;border-radius:15px 3px 15px 15px}
.chatText span.typing:after{display:none}
.chatBox .chatStart{display:flex;align-items:center;margin-top:15px;padding:18px 20px;border-radius:10px;background-color:#fff;overflow:hidden;font-size:12px;color:#505050}
.chatMenu:checked + .chatButton{-webkit-transform: rotate(360deg);transform: rotate(360deg)}
.chatMenu:checked + .chatButton svg.svg-1{display:none}
.chatMenu:checked + .chatButton svg.svg-2{display:block}
.chatMenu:checked ~ .chatBox{bottom:90px;opacity:1;visibility:visible}
Step 5: Once more find the </body> tag and paste the code below above this tag.
<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'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAeRy4BsxTzb2pjikc46op3Uw0DdjY1RoTq3BQ-S5wxyEsDKGFQ3AOoC98UpKpmwjSOljzlsGSOsKEyQcGK695Ygz-owKNvVH9BAx8S3CsfQ4_Z0VWcDnAaqeY7lLIlIKEVhg2LwajDZd676FlbAHzVuKkWRsz2d8dOmqZb_wAILRG73tL6ftUGPRo2-LI/s460/siteguide-icon.jpg' alt="SiteGuide Logo"/>
<div class='chatTitle'>SiteGuide <span>Typically replies within hour</span></div>
</div>
<div class='chatText'>
<span>Hi there 😀 If you need any assistance, I'm always here.</span>
<span class='typing'>...</span>
</div>
</div>
<div class='chatStart'><input type='text' id='chatInput' placeholder='Type message here'/>
<a href='javascript:void;' id='send-it'>Send</a>
</div>
</div>
<script>
//<![CDATA[
//From SiteGuide.xyz
$('#send-it').click(whatsappchat);
function whatsappchat() {
var walink = 'https://web.whatsapp.com/send',
phone = '+8801xxxxxxxxx'; // Replace with your number
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
var walink = 'whatsapp://send';
}
var inputChat = $('#chatInput').val(),
input_viaUrl = location.href;
var wendy_whatsapp = walink + '?phone=' + phone + '&text=' + inputChat + '%0A%0A' + 'Sent VIA : ' + input_viaUrl;
window.open(wendy_whatsapp, '_blank');
window.location.href = input_viaUrl;
}
///]]>
</script>
Step 6: Finally, Click the icon to save the changes.
That's it! Now reload your webpage and you can see the WhatsApp Live Chatbox at the bottom right corner of your website. Make sure to replace the WhatsApp number with your actual WhatsApp number.
Best Practices for Using WhatsApp Live Chat
- Availability: Make sure someone is available to respond promptly during business hours.
- Professionalism: Maintain a professional tone in your responses.
- Quick Replies: Use WhatsApp's quick replies feature to save time and provide consistent answers.
Conclusion
Adding a WhatsApp live chatbox to your Blogger website is a straightforward process that can greatly enhance user engagement and satisfaction. By following the steps outlined in this guide, you can provide real-time support and potentially increase your conversion rates. Start engaging with your visitors today and make the most of this powerful communication tool.
