Hi friend, I'm Rayan. Today, I'll show you how to add a WhatsApp chatbox to any template in Blogger.
What is Whatsapp Chatbox?
If you want to add a WhatsApp chatbox to your Blogger website, this is a feature that helps visitors connect with you directly on WhatsApp. Basically, when a visitor comes to your blog and wants to ask you a question directly, they can click on the WhatsApp icon and message you instantly. This is especially helpful if your blog is related to business, support, or services where you need to give visitors quick responses.WhatsApp Chatbox Benefits
- Real-time Communication: Visitors get the chance to ask you questions in real-time, which boosts both website engagement and user satisfaction.
- User-Friendly: A small WhatsApp icon appears on the side of the blog, allowing users to feel instantly connected with you on WhatsApp with a single click.
- Better Conversion: If your blog promotes a product or service, the WhatsApp chatbox is very effective in increasing leads and conversions.
How to Add Whatsapp Chatbox?
Before we start adding codes in XML, I will recommend you to take a Backup of your current theme. By chance if any problem occurs, you can restore it later.- Go to Blogger Deshboard
- Now click on Theme
- Click the arrow down icon next to 'Customize' button.
- Now click on Edit HTML
- Now search the code </head> or <!--</head>--></head> Paste the following Codes just above to it.
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'/>
<style>
/* CSS Chatbox Whatsapp By Action Coded And Color Grading by Tecky AaryaN */
svg{width:22px;height:22px;vertical-align:middle;fill:#fff}.chatMenu,.chatButton .svg-2{display:none}.chatStart input[type="text"]{padding:10px;margin:0;width:80%;border:1px solid #ddd;border-radius:10px;color:#555}.chatStart input[type="text"]:focus{outline:none;border-color:#25D366}.chatButton{position:fixed;background-color:#25D366;bottom:20px;right:20px;border-radius:50px;z-index:20;overflow:hidden;display:flex;align-items:center;justify-content:center;width:50px;height:50px;transition:all 0.3s ease}.chatButton:hover{background-color:#20c45d}.chatBox{position:fixed;bottom:70px;right:20px;width:320px;transition:all 0.3s ease;z-index:21;opacity:0;visibility:hidden}.chatContent{border-radius:15px;background-color:#fff;box-shadow:0 5px 15px rgba(0,0,0,0.1);overflow:hidden}.chatHeader{display:flex;align-items:center;padding:15px 20px;background-color:#25D366}.chatHeader img{border-radius:50%;width:50px;margin-right:10px}.chatHeader .chatTitle{padding-left:5px;font-size:14px;font-weight:700;color:#fff}.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:#505050}.chatText span{display:inline-block;margin-right:auto;padding:10px 10px 10px 20px;background-color:#f0f5fb;border-radius:3px 15px 15px;max-width:80%;word-wrap:break-word}.chatText span.typing{margin:15px 0 0 auto;padding:10px 20px 10px 10px;border-radius:15px 3px 15px 15px;max-width:90%;word-wrap:break-word}.chatBox .chatStart{display:flex;align-items:center;margin-top:15px;padding:18px 20px;border-radius:10px;background-color:#fff;font-size:12px;color:#505050}.chatStart a#send-it{width:40px;height:40px;background:#25D366;display:flex;justify-content:center;align-items:center;border-radius:50%;margin-left:10px;transition:background 0.3s ease}.chatStart a#send-it:hover{background:#20c45d}.chatStart a#send-it svg{fill:#fff;width:20px;height:20px}.chatMenu:checked + .chatButton{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}</style><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/AVvXsEg_1k0vQLa9IIjdc0hZubCxfkXgjUaSEuehyphenhyphenR8RD8OppblWR_1b3KmOmahzWFLCVdUd1xpMJqlYHDz0U2wIhZEvdCfAxcJxulFLEFIm9mMtjleYCo-oIyj8AmpXbdTMy7sKJj_cykp_QvQZoCfgVZxGA7lhzKcT3_apy9yd7clOJFmmuo7Zt1_MEUdzfsxr/s1600/20231231_193644.jpg' alt="Tecky AaryaN Logo"/>
<div class='chatTitle'>Tecky AaryaN <span>Usually reply within one hour</span></div>
</div>
<div class='chatText'>
<span>Hello, How can I help you?</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'>
<svg fill="#000000" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 24 24" xml:space="preserve">
<style type="text/css">
.st0{fill:none;}
</style>
<g id="surface1">
<path d="M2,3v7.8L18,12L2,13.2V21l20-9L2,3z"/>
</g>
<rect class="st0" width="24" height="24"/>
</svg>
</a>
</div>
</div>
<script>
//<![CDATA[
//jQuery Widget Chat Box Whatsapp By Tecky AaryaN
$('#send-it').click(whatsappchat);
function whatsappchat() {
/* Whatsapp Settings */
var walink = 'https://web.whatsapp.com/send',
phone = '91847******'; // Your Whatsapp Number
/* Mobile Support */
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
var walink = 'whatsapp://send';
}
var inputChat = $('#chatInput').val(), //Get User Input Message
input_viaUrl = location.href; //Get Current URL
var teckyaaryan_whatsapp = walink + '?phone=' + phone + '&text=' + inputChat + '%0A%0A' + 'Sent via: ' + input_viaUrl;
/* Open Whatsapp Window */
window.open(teckyaaryan_whatsapp, '_blank');
window.location.href = input_viaUrl; //Refresh Page After Sent
}
///]]>
</script>- Replace our Mobile Number with Country Code.
- Now Click on Save Button
Conclusion
I hope your WhatsApp chatbox has been added successfully. Please use the comment box to ask us any questions or to report any issues you are having with any of the sections.
Post a Comment
0Comments