How to Make WhatsApp widget in HTML code for blogger

Hello to everyone, on this occasion I will share how to create a WhatsApp chatbox widget.

in a previous post I've shared an order form to whatsapp on blogger and an order form to email on blogger, you can check it if you want to make it too okay.

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 research based widget and some functions i search from google if you like it please mention in comment and let me know what your want more from us we are always here for you

add profile photo
added chat input area and send button
add jQuery

ok if you want to make it let's see how below.

DEMO

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>

<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 design By Blogger Store */
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>

<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://1.bp.blogspot.com/--4AGFjMx_eg/YKyfo4EPV0I/AAAAAAAACtQ/28sjfRyidXwzoaj9hPqvucp12bID7geEACNcBGAsYHQ/s320/wendy%2Bcode.jpg' alt="Tedbree Logo"/>
      <div class='chatTitle'>Blogger Store <span>Usually we reply within one hour</span></div>
    </div>
    <div class='chatText'>
      <span>Hello, or salam, how can we 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'>Send</a>
  </div>
  </div>
  
  <script>
//<![CDATA[
//jQuery Widget Chat Box Whatsapp By Blogger Store
$('#send-it').click(whatsappchat);

function whatsappchat() {
    /* Arrangement Whatsapp */
    var walink = 'https://web.whatsapp.com/send',
        phone = '+923318397764'; // Number Whatsapp You
    /* Support Smartphone */
    if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
        var walink = 'whatsapp://send';
    }
    var inputChat = $('#chatInput').val(), //Take Input Message User
        input_viaUrl = location.href; //Take Url This moment
    var wendy_whatsapp = walink + '?phone=' + phone + '&text=' + inputChat + '%0A%0A' + 'Sent via : ' + input_viaUrl;
    /* Open Window Whatsapp  */
    window.open(wendy_whatsapp, '_blank');
    window.location.href = input_viaUrl; //Refresh Page After Sent
}
///]]>
</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.

SUBSCRIBE OUR YOUTUBE CHANNEL 👉

Blogger store

How to Make WhatsApp widget in HTML code for blogger

How to Make Whatsapp Chatbox Widget

Post a Comment