How To Add WhatsApp Chat HTML Code On Blogger Website?
To add a WhatsApp Live Chat Widget to your blogger website, you have to follow 3 simple and easy steps:
- Add The HTML Code Of WhatsApp Live Chat
- Add The CSS Code Of WhatsApp Live Chat
- Add The JavaScript code Of WhatsApp Live Chat So, let's see in detail How To Add WhatsApp Chat HTML Code On the Blogger Website from the below step-by-step guide.
WhatsApp Chat HTML Code For Blogger:
<!-- WhatsApp Live Chat HTML By imamuddinwp --><div class='hide' id='whatsapp-chat'><div class='home-chat'><!-- Info Contact Start --><div class='info_box'><div class='info-avatar'><a href='https://imamuddinwp.blogspot.com'><img alt='imamuddinwp' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilCfU4CnwT_V5w5d_wotMKrg5hpB5nj2Ctwm0pTdCXsMmNUaZGrmjkHhafLLFIzbccP2FUrkQKEKMIhK5Piq7yDUYpoyB-vXlvl_tE3uBHRCvI-HqY85nZ44VrXtnAd_r-otV-l2Gwl3k0H3l4P1mPya8fftmJayW1HWsldsVQ_y-_yPt2Oc7QsgC9eaHx/s1600-rw/whatsapp-live-chat-imamuddinwp.png'/></a><span class='nime'/></div><div class='info-chat'><span class='chat-label'><a href='https://imamuddinwp.blogspot.com' target='_new'> NextGen Digital</a> </span><span class='chat-text'>Welcome to WhatsApp Live Chat. </span></div></div><div class='goophone'><a href='tel:+8801815682307' 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'/></svg></a><a href='mailto:imamuddinwp@gmail.com' 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 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 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 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'/></svg></a></div></div><!-- WhatsApp Box --><div class='first-msg'><div class='box-msg'><span class='chat-nama'>Imam Uddin...</span><span class='chat-cript'>Howdy!!</span><span>How can I help you today?</span><div class='jamwa'><div id='hours'/>:<div id='minutes'/></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'/><span class='validasi'>(Required)</span></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'/></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'/></svg></a></div><div class='imam-live'><div class='box-live'><a href='javascript:void' title=''><span>Chat with 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 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;'/></svg></span></a></div></div>
WhatsApp Chat CSS Code For Blogger:
/* WhatsApp Live Chat CSS By imamuddinwp.blogspot.com *//* Pase below CSS codes before/above ]]></b:skin> in blogger theme */.box-live a,.imam-live,.info-chat{color:#fff}.box-msg span,.info-chat span,.info_box,.show{display:block}#whatsapp-chat,.imam-live{background:#fff;position:fixed;z-index:100;right:20px}.imam-live,.info_box{background:linear-gradient(45deg,#029abd 0,#05c537 100%)}.box-live,.goomwhats,.info-avatar,.info_box{position:relative}#whatsapp-chat{width:350px;border-radius:4px;box-shadow:0 8px 25px -5px rgba(45,62,79,.15);bottom:17%;overflow:hidden}#btn-chat,#tooltip i,.imam-live svg{vertical-align:middle}.imam-live{bottom:10%;line-height:30px;font-size:15px;padding:0;border-radius:50px;box-shadow:0 1px 5px rgba(154,154,154,.2)}.imam-live .svg{margin:0;position:absolute;top:0;padding:6.5px 15px;border-radius:0 50px 50px 0;right:-2px;background-color:#fff;color:#31c73a;width:25%;height:100%;line-height:18px;overflow:hidden;text-align:center;z-index:10}.box-live{padding:3px 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:2.3;color:#d7ffee}.info-avatar{width:48px;height:48px;float:left;margin:5px 15px 0 0}.info-avatar img{border-radius:100%;width:100%;height:auto}.info_box{padding:15px;overflow:hidden;z-index:1;box-shadow:0 1px 5px rgba(0,0,0,.35)}#tooltip,#tooltip:after,.box-msg:before,.goophone{position:absolute}.goomwhats{color:#444;padding:5px 15px;background-color:#fff;font-size:14px;display:flow-root}.goomwhats a{color:#3bc743}.boxmsg{margin:8px 0 0;float:left;width:74%;display:block}.goophone{right:45px;top:10px;font-size:13px;z-index:10}.box-msg,.first-msg,.formtamv label{position:relative}.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}#tooltip i,.box-msg,.formtamv label>i,.jamwa div{display:inline-block}#btn-chat{float:right;margin-top:15px}.first-msg{background-color:#e6ddd4;padding:20px 20px 20px 10px}#tooltip,.box-msg{padding:10px 20px}.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;margin-left:30px;z-index:1}.box-msg:before{border-width:17px;border-style:none solid solid none;border-color:#e4fec8 #e4fec8 transparent transparent;top:0;left:-16px}.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;z-index:100;border-radius:4px;font-size:90%;box-shadow:0 1px 10px rgba(0,0,0,.6)}#tooltip i{margin:5px}#tooltip:after{width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid #333;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{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;vertical-align:top;width:40px;text-align:center;font-size:20px;height:auto;background:0 0;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:0 0}.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}.nime,.nime:after,.nime:before{position:absolute;border-radius:100%}a.close-chat{position:absolute;top:10px;right:13px;color:#c3ffc7;font-size:18px;z-index:10}.nime{display:block;width:10px;height:10px;background-color:#05d436;right:-2px;bottom:8px}.nime:after,.nime:before{content:"";width:24px;height:24px;opacity:0;top:-8px;left:-8px;background:#05d436}.nime:before{-webkit-animation:2s ease-out infinite nime;animation:2s ease-out infinite nime}.nime:after{z-index:1;-webkit-animation:2s ease-out .4s infinite nime;animation:2s ease-out .4s infinite nime}@-webkit-keyframes nime{0%{opacity:0;-webkit-transform:scale(.80);transform:scale(.10)}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%}}.hide{display:none}
JavaScript Code Of WhatsApp Chat To Blogger Website
<!-- WhatsApp Live Chat JavaScripts code By imamuddinwp.blogspot.com --><script language='javascript' 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=880,r=1406070407,n="Admin:- ",o="Howdy! I need your help, please...",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",".imam-live",function(){$("#whatsapp-chat").addClass("show").removeClass("hide")});//]]></script>
WhatsApp Chat HTML Code For Website - Preview & Test
Browse newly or reload your homepage. Now you will see the WhatsApp Chat option in the right-bottom corner of your website. Attached picture for your reference.
Full Guidelines are here:
WhatsApp Chat HTML Code For Website
Top comments (0)