How to Make Awesome Whatsapp Chat Widget on Blogger

How to Make Awesome Whatsapp Chat Widget on Blogger

Bloggerbyte - If you are looking for ways to Awesome Whatsapp Chat button on your blog you can find it here. By installing a WhatsApp chat on the blog it is very useful for visitors to contact you directly through WhatsApp Whatsapp is mostly used App and almost everyone have installed it on their phone.

How to Make Awesome Whatsapp Chat Widget on Blogger

  1. Please login to blogger, and enter the dashboard.
  2. Enter the menu Theme, then click EDIT HTML.
  3. Search Code ]]></b:skin>, Put the CSS code below just above ]]></b:skin> code.
  4. /* WA Chat by bloggerbyte.net */
    #goomsubscribe,.box5{display:block;position:relative}
    .list-feature{text-align:center;width:14.5%;float:left;padding:15px;background:#fff;margin:15px;box-shadow:rgba(218,218,218,.85) 0 0 29px}
    .box5{background:#c300be}
    .box-feature h2{font-size:15px;margin:15px 0 5px}
    .box-feature h3{margin:0;font-size:13px;color:#9a9a9a;line-height:1.5em;font-weight:400;letter-spacing:.8px}
    .box5,.color-wite h3,.color-wite p{color:#fff}
    .list-icon{width:70px;padding:15px;margin:-45px auto 20px;background:#c300be}
    .list-icon svg{font-size:30px;padding:0;text-align:center;margin:0;width:45px;height:auto;fill:#fbdc03;position:relative}
    .box5{overflow:hidden;padding:4rem 0;height:250px}
    .color-wite{margin-bottom:20px}
    .color-wite h3{font-size:27px}
    #goomsubscribe{width:500px;height:auto;margin:auto;padding:0;z-index:10}
    .footer-menu ul li,.goomedia li{display:inline-block}
    #goomsubscribe .email{position:relative;border-radius:50px}
    #goomsubscribe .email button{position:absolute;cursor:pointer;right:-6%;color:#000;outline:0;font-size:24px;top:0;width:55px;background:#fbdc03;border:none;bottom:0}
    #goomsubscribe .email button svg{width:30px;height:auto}
    #goomsubscribe .email form{width:100%;border-radius:50px;background:#fff}
    #goomsubscribe input.email{line-height:1.5em;width:100%;border:none;padding:15px 0 15px 30px;font-size:12px;text-align:left;outline:0}
    .goomedia li a,.goomedia ul,.sidebar h3,.nabil-live{text-align:center}
    .goomedia{margin:20px 0;overflow:hidden}
    .goomedia ul{margin:10px auto}
    .goomedia li{margin:10px;background:#fff;box-shadow:0 1px 2px #3f688c;width:48px;border-radius:50px;line-height:48px;height:48px}
    .goomedia li a{padding:0;color:#c300be;border-radius:50px}
    .goomedia li svg{width:20px;height:auto;fill:#c300be;text-align:center;padding-top:13px}
    .bx{position:relative;background:#fff;overflow:hidden;z-index:2}
    .fixed-wrapper{width:100%;position:sticky;left:0;bottom:0;z-index:0}
    .footer-menu,.footer-menu ul{margin:0 auto;padding:0;text-align:center;position:relative}
    .info-chat span,.informasi{display:block}
    .footer-menu li a{display:block;font-size:13px;text-transform:uppercase;font-weight:500;position:relative;padding:0 10px}
    #whatsapp-chat,.nabil-live{background:white;position:fixed;z-index:100;right:30px}
    #whatsapp-chat{width:350px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:0 8px 25px -5px rgba(45,62,79,.15);-moz-box-shadow:0 8px 25px -5px rgba(45,62,79,.15);box-shadow:0 8px 25px -5px rgba(45,62,79,.15);bottom:80px;overflow:hidden;}
    #btn-chat,#tooltip i,.nabil-live svg{vertical-align:middle}
    .nabil-live{color:white;background:linear-gradient(45deg,#029abd 0,#05c537 100%);background:-webkit-linear-gradient(45deg,#029abd 0,#05c537 100%);bottom:25px;line-height:30px;font-size:15px;padding:0;-webkit-border-radius:50px;-moz-border-radius:50px;border-radius:50px;-webkit-box-shadow:0 1px 5px rgba(154,154,154,.2);-moz-box-shadow:0 1px 5px rgba(154,154,154,.2);box-shadow:0 1px 5px rgba(154,154,154,.2);}
    .nabil-live .svg{margin:0;position:absolute;top:0;padding:5px 8px;-webkit-border-radius:0 50px 50px 0;-moz-border-radius:0 50px 50px 0;border-radius:0 50px 50px 0;right:-10px;background-color:white;color:#31c73a;width:39px;height:39px;line-height:30px;overflow:hidden;text-align:center;z-index:10}
    .box-live,.goomwhats,.info-avatar{position:relative}
    .box-live a,.info-chat{color:white}
    .box-live{padding:4px 20px}
    .box-live span{margin-right:40px;font-size:13px}
    .info-chat{padding-top:3px}
    .info-chat span.chat-label{font-size:15px;font-weight:700}
    .info-chat span.chat-text{font-size:13px;line-height:1.3;color:#d7ffee}
    .info-avatar{width:48px;height:48px;float:left;margin:5px 15px 0 0}
    .info-avatar img{-webkit-border-radius:100%;-moz-border-radius:100%;border-radius:100%;width:100%;height:auto}
    .informasi{padding:15px;overflow:hidden;position:relative;background:linear-gradient(45deg, 0,#05c537 100%);background:-webkit-linear-gradient(45deg,#029abd 0,#05c537 100%);z-index:1;-webkit-box-shadow:0 1px 5px rgba(0, 0, 0, 0.35);-moz-box-shadow:0 1px 5px rgba(0, 0, 0, 0.35);box-shadow:0 1px 5px rgba(0, 0, 0, 0.35);}
    .goomwhats{color:#444;padding:5px 15px;background-color:white;font-size:14px;display:flow-root}
    .goomwhats a{color:#1856c7}
    .boxmsg{margin:8px 0 0;float:left;width:74%;display:block}
    .goophone{position:absolute;right:45px;top:10px;font-size:13px;z-index:10}
    .goophone a{color:#e6f9d2;margin-left:15px}
    .goophone a svg,a.close-chat svg{width:16px;height:auto;fill:#e6f9d2}
    .jamwa{display:block;float:right;font-size:11px;color:#717171}
    .jamwa div{display:inline-block}
    #btn-chat{float:right;margin-top:15px}
    .first-msg{background-color:#e6ddd4;position:relative;padding:20px 20px 20px 10px}
    .first-msg::before{display:block;position:absolute;content:"";left:0;top:0;height:100%;width:100%;z-index:0;opacity:.08;background-image:url(https://goomsite.github.io/img/wa-min.webp)}
    #tooltip:after,.box-msg:before{content:''}
    .box-msg{background:#e4fec8;box-shadow:0 1px 5px rgba(0,0,0,.13);color:#333;font-size:14px;line-height:1.7;border-radius:0 7.5px 7.5px;position:relative;margin-left:30px;padding:10px 20px;z-index:1;display:inline-block}
    .box-msg:before{position:absolute;border-width:17px;border-style:none solid solid none;border-color:#e4fec8 #e4fec8 transparent transparent;top:0;left:-16px}
    .box-msg span{display:block}
    .box-msg span.chat-nama{font-size:13px;line-height:18px;color:rgba(0,0,0,.4)}
    .box-msg span.chat-cript{margin-bottom:5px}
    #tooltip{text-align:center;color:#fff;background:#333;position:absolute;z-index:100;padding:10px 20px;border-radius:4px;font-size:90%;box-shadow:0 1px 10px rgba(0,0,0,.6)}
    #tooltip i{display:inline-block;margin:5px}
    #tooltip:after{width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid #333;position:absolute;left:50%;bottom:-10px;margin-left:-10px}
    #tooltip.top:after{border-top-color:transparent;border-bottom:10px solid #333;top:-20px;bottom:auto}
    #tooltip.left:after{left:10px;margin:0}
    #tooltip.right:after{right:10px;left:auto;margin:0}
    .formtamv *{outline:0;text-decoration:none}
    .formtamv .focus{box-shadow:inset 0 0 0 1px #36c83f}
    .formtamv label{position:relative;display:block;width:100%;margin:0;padding:0}
    .formtamv label>input,.formtamv label>select,.formtamv label>textarea{position:relative;z-index:1;border:none;background:#f9f9f9;box-shadow:inset 0 0 0 1px rgba(0,0,0,.02),inset 1px 1px 5px rgba(0,0,0,.05);width:100%;border-radius:50px;padding:10px 20px 0}
    .formtamv label>i{position:absolute;z-index:0;display:inline-block;vertical-align:top;width:40px;text-align:center;font-size:20px;height:auto;background:none;box-shadow:none;top:3px;left:0;color:rgba(0,0,0,.2)}
    .formtamv label small{position:relative;display:block;margin-top:10px;z-index:3}
    .formtamv label small>a.tooltip{margin-left:10px;font-size:20px;vertical-align:middle;display:inline-block;color:rgba(0,0,0,.4)}
    .formtamv label small>a.tooltip:hover{color:rgba(0,0,0,.6)}
    .formtamv label small a{font-weight:700}
    .formtamv select::-ms-expand{display:none}
    .formtamv select{-moz-appearance:none;-webkit-appearance:none;appearance:none}
    .formtamv select option{font-size:18px;background:#edf8f5;color:rgba(0,0,0,.7);text-shadow:none}
    .formtamv .nomor_whatsapp[type=number]::-webkit-inner-spin-button,.formtamv .nomor_whatsapp[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
    .nomor_whatsapp[type=number]{-moz-appearance:textfield}
    .formtamv label> :focus{background:none}
    .formtamv label textarea{min-height:20px;resize:none;margin-bottom:0}
    .formtamv label .validasi{position:absolute;z-index:2;right:-30px;background:#36c83f;color:#fff;padding:5px 10px;border-radius:3px;font-size:80%;box-shadow:0 5px 10px rgba(0,0,0,.1);transition:.4s;visibility:hidden;opacity:0;display:inline-block!important}
    .formtamv label .validasi.show{visibility:visible;opacity:1;bottom:100%}
    .formtamv label .validasi:after{position:absolute;top:100%;right:10px;content:"";border:8px solid;border-color:#36c83f transparent transparent}
    a.close-chat{position:absolute;top:10px;right:13px;color:#c3ffc7;font-size:18px;z-index: 10;}
    .nime{position:absolute;display:block;width:10px;height:10px;border-radius:100%;background-color:#05d436;right:-2px;bottom:8px}
    .nime:after,.nime:before{content:"";position:absolute;width:24px;height:24px;opacity:0;border-radius:100%;top:-8px;left:-8px;background:#05d436}
    .nime:before{-webkit-animation:nime 2s ease-out infinite;animation:nime 2s ease-out infinite}
    .nime:after{z-index:1;-webkit-animation:nime 2s .4s ease-out infinite;animation:nime 2s .4s ease-out infinite}
    @-webkit-keyframes nime{0%{opacity:0;-webkit-transform:scale(0);transform:scale(0)}
    5%{opacity:1}
    100%{opacity:0}}
    @keyframes nime{0%{opacity:0;-webkit-transform:scale(0);transform:scale(0)}
    5%{opacity:1}
    100%{opacity:0}}
    @keyframes showhide{from{transform:scale(.5);opacity:0}}
    @keyframes showchat{from{transform:scale(0);opacity:0}}
    .hide,.show{animation-name:showhide;animation-duration:1.5s;transform:scale(1);opacity:1}
    @media screen and (max-width:480px){#whatsapp-chat{width:auto;left:5%;right:5%;font-size:80%}}
    .postmeta a,.sidebar-wrapper{font-size:14px;overflow:hidden}
    .hide{display:none}
    .show{display:block}
    
  5. Still on EDIT HTML. Now we make the Whatsapp Chat button. Please put the code above </body>. you can adjust the location yourself in css.
  6. 
    <div class='hide' id='whatsapp-chat'>
    <div class='home-chat'>
    <!-- Info Contact Start by bloggerbyte.net -->
    <div class='informasi'>
    <div class='info-avatar'><img alt='avatar' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiq9C4YyzWPWlk0FQxHStraEBTIDgExucVRHpP4sALhUeqLp0wIHSFWRYeFRLRcUg9Gdg6_TAK8v46EW1MhWzA3BW1dy6Z_IOoc4mLg2vCr24_w7Zp3hZG-inSi6IjCzCeln_Dh4Z696lFg/s1600/cs.png' title='avatar'/>
    <span class='nime'></span>
    </div>
    <div class='info-chat'>
    <span class='chat-label'>Admin</span>
    <span class='chat-text'>Welcome to Destroyer Theme, if you have anything to ask please via our WhatsApp</span>
    </div>
    </div>
    <div class='goophone'>
    <a href='tel:+91 XXXXXXXXXX' title='call us'><svg viewBox='0 0 384 384'><path d='M353.188,252.052c-23.51,0-46.594-3.677-68.469-10.906c-10.719-3.656-23.896-0.302-30.438,6.417l-43.177,32.594 c-50.073-26.729-80.917-57.563-107.281-107.26l31.635-42.052c8.219-8.208,11.167-20.198,7.635-31.448 c-7.26-21.99-10.948-45.063-10.948-68.583C132.146,13.823,118.323,0,101.333,0H30.813C13.823,0,0,13.823,0,30.813 C0,225.563,158.438,384,353.188,384c16.99,0,30.813-13.823,30.813-30.813v-70.323C384,265.875,370.177,252.052,353.188,252.052z'></path>
    </svg></a>
    <a href='mailto:[email protected]' title='sent to mail'>
    <svg viewBox='0 0 512 512'>
    <path d='M10.688,95.156C80.958,154.667,204.26,259.365,240.5,292.01c4.865,4.406,10.083,6.646,15.5,6.646     c5.406,0,10.615-2.219,15.469-6.604c36.271-32.677,159.573-137.385,229.844-196.896c4.375-3.698,5.042-10.198,1.5-14.719     C494.625,69.99,482.417,64,469.333,64H42.667c-13.083,0-25.292,5.99-33.479,16.438C5.646,84.958,6.313,91.458,10.688,95.156z'></path>
    <path d='M505.813,127.406c-3.781-1.76-8.229-1.146-11.375,1.542c-46.021,39.01-106.656,90.552-152.385,129.885 c-2.406,2.063-3.76,5.094-3.708,8.271c0.052,3.167,1.521,6.156,4,8.135c42.49,34.031,106.521,80.844,152.76,114.115     c1.844,1.333,4.031,2.01,6.229,2.01c1.667,0,3.333-0.385,4.865-1.177c3.563-1.823,5.802-5.49,5.802-9.49V137.083     C512,132.927,509.583,129.146,505.813,127.406z'></path>
    <path d='M16.896,389.354c46.25-33.271,110.292-80.083,152.771-114.115c2.479-1.979,3.948-4.969,4-8.135     c0.052-3.177-1.302-6.208-3.708-8.271C124.229,219.5,63.583,167.958,17.563,128.948c-3.167-2.688-7.625-3.281-11.375-1.542     C2.417,129.146,0,132.927,0,137.083v243.615c0,4,2.24,7.667,5.802,9.49c1.531,0.792,3.198,1.177,4.865,1.177     C12.865,391.365,15.052,390.688,16.896,389.354z'></path>
    <path d='M498.927,418.375c-44.656-31.948-126.917-91.51-176.021-131.365c-4-3.26-9.792-3.156-13.729,0.24     c-9.635,8.406-17.698,15.49-23.417,20.635c-17.563,15.854-41.938,15.854-59.542-0.021c-5.698-5.135-13.76-12.24-23.396-20.615     c-3.906-3.417-9.708-3.521-13.719-0.24c-48.938,39.719-131.292,99.354-176.021,131.365c-2.49,1.792-4.094,4.552-4.406,7.604     c-0.302,3.052,0.708,6.083,2.802,8.333C19.552,443.01,30.927,448,42.667,448h426.667c11.74,0,23.104-4.99,31.198-13.688     c2.083-2.24,3.104-5.271,2.802-8.323C503.021,422.938,501.417,420.167,498.927,418.375z'></path>
    </svg>
    </a>
    </div>
    </div>
    <div class='first-msg'>
    <div class='box-msg'>
    <span class='chat-nama'>Destroyer Theme</span>
    <span class='chat-cript'>Hi there!</span>
    <span>Hello, Can I help you?</span>
    <div class='jamwa'>
    <div id='hours'></div>:<div id='minutes'></div>
    </div>
    </div>
    </div>
    <div class='goomwhats'>
    <div class='poptamv' id='konsultasi'>
    <div class='formtamv formWA'>
    <div class='boxmsg'>
    <label><textarea class='pesan wajib' placeholder='Type a message'></textarea></label>
    </div>
    <div id='btn-chat'>
    <a class='submit' href='javascript:void;'>
    <svg height='24' viewBox='0 0 24 24' width='24'><path d='M1.101 21.757L23.8 12.028 1.101 2.3l.011 7.912 13.623 1.816-13.623 1.817-.011 7.912z' fill='#263238' fill-opacity='.45'></path></svg></a>
    </div>
    </div>
    </div>
    </div>
    <a class='close-chat' href='javascript:void' title='close'><svg viewBox='0 0 413.348 413.348'><path d='m413.348 24.354-24.354-24.354-182.32 182.32-182.32-182.32-24.354 24.354 182.32 182.32-182.32 182.32 24.354 24.354 182.32-182.32 182.32 182.32 24.354-24.354-182.32-182.32z'></path></svg></a>
    </div>
    <div class='nabil-live'>
    <div class='box-live'>
    <a href='javascript:void' title=''>
    <span>Chat WhatsApp</span>
    <span class='svg'>
    <svg viewBox='0 0 418.135 418.135'>
    <path d='M198.929,0.242C88.5,5.5,1.356,97.466,1.691,208.02c0.102,33.672,8.231,65.454,22.571,93.536   L2.245,408.429c-1.191,5.781,4.023,10.843,9.766,9.483l104.723-24.811c26.905,13.402,57.125,21.143,89.108,21.631   c112.869,1.724,206.982-87.897,210.5-200.724C420.113,93.065,320.295-5.538,198.929,0.242z M323.886,322.197   c-30.669,30.669-71.446,47.559-114.818,47.559c-25.396,0-49.71-5.698-72.269-16.935l-14.584-7.265l-64.206,15.212l13.515-65.607   l-7.185-14.07c-11.711-22.935-17.649-47.736-17.649-73.713c0-43.373,16.89-84.149,47.559-114.819   c30.395-30.395,71.837-47.56,114.822-47.56C252.443,45,293.218,61.89,323.887,92.558c30.669,30.669,47.559,71.445,47.56,114.817   C371.446,250.361,354.281,291.803,323.886,322.197z' style='fill:#7AD06D;'></path><path d='M309.712,252.351l-40.169-11.534c-5.281-1.516-10.968-0.018-14.816,3.903l-9.823,10.008   c-4.142,4.22-10.427,5.576-15.909,3.358c-19.002-7.69-58.974-43.23-69.182-61.007c-2.945-5.128-2.458-11.539,1.158-16.218   l8.576-11.095c3.36-4.347,4.069-10.185,1.847-15.21l-16.9-38.223c-4.048-9.155-15.747-11.82-23.39-5.356   c-11.211,9.482-24.513,23.891-26.13,39.854c-2.851,28.144,9.219,63.622,54.862,106.222c52.73,49.215,94.956,55.717,122.449,49.057   c15.594-3.777,28.056-18.919,35.921-31.317C323.568,266.34,319.334,255.114,309.712,252.351z' style='fill:#7AD06D;'></path>
    </svg>
    </span>
    </a>
    </div>
    </div>
    
    Note: Change The Following
    -Change your logo
    -Admin Name
    -Admin Text
    -WhatsApp Number with your numbers, respectively,
    -Please Change your Email
  7. Now add the following JS script just avobe </body> code
  8. <script type='text/javascript'>
    //<![CDATA[
    function kirimWA(e){var t=!0;if(jQuery("#"+e+" .wajib").each(function(){""!=$.trim(jQuery(this).val())&&"default"!=$.trim(jQuery(this).val())||jQuery(this).addClass("focus")}),jQuery("#"+e+" .wajib").each(function(){return""==$.trim(jQuery(this).val())?(t=!1,jQuery(this).parents("label").find(".validasi").addClass("show"),jQuery(this).focus(),!1):"default"==$.trim(jQuery(this).val())?(t=!1,jQuery(this).parents("label").find(".validasi").addClass("show"),!1):void 0}),t===!0){var i="",a="https://web.whatsapp.com/send";if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)&&(a="whatsapp://send"),"konsultasi"===e)var s=91,r=9414157486,n="Admin",o="Hello",l=(jQuery("#"+e+" .title-content").text(),jQuery("#"+e+" .pesan").val()),i=a+"?phone="+s+r+"&text=*"+o+" "+n+"...* %0A%0A"+l;jQuery(this).attr("href",i);var u=960,h=540,c=Number(screen.width/2-u/2),d=Number(screen.height/2-h/2),y=window.open(this.href,"","toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=1, copyhistory=no, width="+u+", height="+h+", top="+d+", left="+c);return y.focus(),!1}}window.addEventListener("load",function(){var e=jQuery("title").text();jQuery(".waFix").on("click",function(){jQuery(this).removeClass("show"),jQuery("title").text(e)}),jQuery(".formWA input, .formWA textarea").on("keypress",function(){13===event.keyCode&&jQuery(this).parents(".formWA").find(".submit").trigger("click")}),jQuery(".formWA .wajib").each(function(){title=jQuery(this).attr("placeholder"),label=jQuery(this).parents("label"),jQuery('<span class="validasi">(Required)</span>').appendTo(label)}),jQuery(".formWA .wajib").keyup(function(){""!=jQuery(this).val()&&(jQuery(this).removeClass("focus"),jQuery(this).parents("label").find(".validasi").removeClass("show"))}),jQuery(".formWA select").change(function(){jQuery(this).removeClass("focus"),jQuery(this).parents("label").find(".validasi").removeClass("show")})},!1),jQuery(".formWA .submit").on("click",function(){return kirimWA(jQuery(this).parents(".poptamv").attr("id")),!1}),$(document).on("click",".close-chat",function(){$("#whatsapp-chat").addClass("hide").removeClass("show")}),$(document).on("click",".nabil-live",function(){$("#whatsapp-chat").addClass("show").removeClass("hide")});
    //]]>
    </script>

    Warning!
    Change Your Country Code +91 and Whatsapp No. 9414157486

  9. Then Save Theme

for DEMO - Click Here

About the Author

“Hustle in silence and let your success make the noise.”

8 comments

  1. Very good content, but did you block the site how to copy the codes?
  2. good but unblock copying the code area or provide a button to copy the code.
  3. not working
    1. It's working brother, just follow the simple steps
    2. working...
  4. https://www.bloggerbyte.net/2020/04/whatsapp-live-chat-for-blogger.html
  5. https://i.ibb.co/k575Ynj/IMG-20220101-WA0000.jpg
Check the "Notify me" box to get an email notification if someone replies to a comment.
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.