WhatsApp Chat HTML Code For Website

WhatsApp Chat HTML Code For Website, WhatsApp Chat Button On Website HTML Code, How To Add WhatsApp Chat HTML Code On Blogger Website? WhatsApp Tips And Tricks.

WhatsApp Chat HTML Code For Website

The WhatsApp Live Chat functionality will add extra value to your website. It also includes extra facilities for your website traffic. If you are looking for the WhatsApp Chat HTML Code For the Website, we hope today you will get a full solution from this article.

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 JavaScripts Code Of WhatsApp Live Chat

WhatsApp Chat To Blogger Website

<!-- 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='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 To Blogger Website

/* 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}

Adding 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>

Preview & Test

The full guidelines are here:

WhatsApp Chat HTML Code For Website