This WhatsApp chatbox widget is perfect for those of you who have selling sites such as online stores or landing pages.
Besides being able to beautify the appearance of your site, it will also seem more professional, and prospective buyers will also find it easier to contact you directly.
This widget is my modification from a widget that has been shared by www.jagodesign.com, some of my modifications include
- add profile photo
- added chat input area and send button
- add jQuery
ok if you want to make it let's see how below.
How to Make Whatsapp Chatbox Widget
make sure your template has jQuery installed, if you don't already have one, you can copy the code below and place it above the code </head> or <!--</head>--></head>
<script async='async' src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'/>further copy the css below and place it above the code ]]></b:skin>
/* CSS Chatbox Whatsapp By Jago Desain And Redesign By Anand Nawal */
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:#f89000;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:#f89000;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 #f89000;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:'Baru Saja';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}lastly copy the html and jQuery below and place it above the code </body> or <!--</body>--></body>
<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://images.fastcompany.net/image/upload/w_596,c_limit,q_auto:best,f_auto/fc/3034007-inline-i-applelogo.jpg' alt="Tedbree Logo"/>
<div class='chatTitle'>Anand Nawal<span>Biasanya membalas dalam satu jam</span></div>
</div>
<div class='chatText'>
<span>Halo, Ada yang bisa kami bantu?</span>
<span class='typing'>...</span>
</div>
</div>
<div class='chatStart'><input type='text' id='chatInput' placeholder='ketikan pesan di sini'/>
<a href='javascript:void;' id='send-it'>Kirim</a>
</div>
</div>
<script>
//<![CDATA[
//jQuery Widget Chat Box Whatsapp By Anand Nawal
$('#send-it').click(whatsappchat);
function whatsappchat() {
/* Pengaturan Whatsapp */
var walink = 'https://web.whatsapp.com/send',
phone = '6281311xxxxxx'; // No Whatsapp Kalian
/* Dukungan Smartphone */
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
var walink = 'whatsapp://send';
}
var inputChat = $('#chatInput').val(), //Mengambil Input Pesan User
input_viaUrl = location.href; //Mengambil Url saat ini
var anand_whatsapp = walink + '?phone=' + phone + '&text=' + inputChat + '%0A%0A' + 'Di kirim via : ' + input_viaUrl;
/* Buka Jendela Whatsapp */
window.open(anand_whatsapp, '_blank');
window.location.href = input_viaUrl; //Segarkan Halaman Setelah Terkirim
}
///]]>
</script>if you have, please click save and don't forget to change your whatsapp number, ok so that's how to make a whatsapp chatbox widget, hopefully it's useful, and thank you for visiting.
Reference:
www.jagodesign.com/2020/05/tutorial-widget-chat-wa.html