Halo sobat blogger, kali ini saya akan membahas tentang tutorial cara memasang widget chat whatsapp dengan nomor dan akun ganda. Setelah sebelumnya saya juga sempat membahas tentang cara membuat widget pricing plans. Widget ini cocok untuk website atau blog yang bertemakan jasa atau berjualan produk. Widget ini juga dapat digunakan di segala macam platform hanya dengan HTML, CSS dan Javascript. Tentu saja juga cocok untuk digunakan pada Wordpress.
 |
| Sumber gambar by idblanter.com |
Dari gambarnya pasti sudah terbayang bagaimana fungsi dan cara kerja widget chatbox ini. Kamu bisa menambahkan 2 hingga jumlah yang tidak terbatas pada akun yang akan terhubung pada whatsapp. Setelah memilih, pengunjung bisa mengetik pesan sebelum akhirnya masuk pada aplikasi whatsapp secara otomatis. Widget ini wajib kamu pasang jika membutuhkan lebih dari 2 Customer Service.
Untuk cara memasang dan juga menambakan akun whatsapp, kamu hanya perlu salin salah satu kode yang sebelumnya sudah terpasang. Begitu juga untuk warna dan posisi, semua bisa dilakukan dengan mudah.
TUTORIAL MEMASANG WIDGET CHAT WHATSAPP GANDA
Panduan ini untuk pemasangan pada Blogger/Blogspot.
- Silahkan kamu masuk ke Blogger > Tema > Edit HTML
- Letakan CSS berikut ini tepat di atas kode ]]></b:skin> atau </style>
/* CSS Multiple Whatsapp Chat */
#whatsapp-chat{position:fixed;background:#fff;width:350px;border-radius:10px;box-shadow:0 1px 15px rgba(32,33,36,.28);bottom:90px;right:30px;overflow:hidden;z-index:99;animation-name:showchat;animation-duration:1s;transform:scale(1)}
a.blantershow-chat{background:linear-gradient(to right top,#6f96f3,#164ed2);color:#fff;position:fixed;z-index:98;bottom:25px;right:30px;font-size:15px;padding:10px 20px;border-radius:30px;box-shadow:0 1px 15px rgba(32,33,36,.28)}
a.blantershow-chat i{transform:scale(1.2);margin:0 10px 0 0}.header-chat{background:linear-gradient(to right top,#6f96f3,#164ed2);color:#fff;padding:20px}
.header-chat h3{margin:0 0 10px}.header-chat p{font-size:14px;line-height:1.7;margin:0}
.info-avatar{position:relative}.info-avatar img{border-radius:100%;width:50px;float:left;margin:0 10px 0 0}
.info-avatar:before{content:'\f232';z-index:1;font-family:"Font Awesome 5 Brands";background:#23ab23;color:#fff;padding:4px 5px;border-radius:100%;position:absolute;top:30px;left:30px}
a.informasi{padding:20px;display:block;overflow:hidden;animation-name:showhide;animation-duration:2.5s}
a.informasi:hover{background:#f1f1f1}.info-chat span{display:block}#get-label,span.chat-label{font-size:12px;color:#888}
#get-nama,span.chat-nama{margin:5px 0 0;font-size:15px;font-weight:700;color:#222}#get-label,#get-nama{color:#fff}span.my-number{display:none}
.blanter-msg{color:#444;padding:20px;font-size:12.5px;text-align:center;border-top:1px solid #ddd}
textarea#chat-input{border:none;font-family:'Arial',sans-serif;width:100%;height:20px;outline:none;resize:none}
a#send-it{color:#555;width:40px;margin:-5px 0 0 5px;font-weight:700;padding:8px;background:#eee;border-radius:10px}
.first-msg{background:#f5f5f5;padding:30px;text-align:center}
.first-msg span{background:#e2e2e2;color:#333;font-size:14.2px;line-height:1.7;border-radius:10px;padding:15px 20px;display:inline-block}
.start-chat .blanter-msg{display:flex}#get-number{display:none}a.close-chat{position:absolute;top:5px;right:15px;color:#fff;font-size:30px}
@keyframes showhide{from{transform:scale(.5);opacity:0}}@keyframes showchat{from{transform:scale(0);opacity:0}}
@media screen and (max-width:480px){#whatsapp-chat{width:auto;left:5%;right:5%;font-size:80%}}
.hide{display:none;animation-name:showhide;animation-duration:1.5s;transform:scale(1);opacity:1}
.show{display:block;animation-name:showhide;animation-duration:1.5s;transform:scale(1);opacity:1}Untuk HTML ini kamu bisa letakan pada Tata Letak > Widget > HTML/Javascript, sebenarnya bisa diletakan dimana saja, jika di Edit HTML, kamu bisa letakan di atas kode Javascript pada langkah selanjutnya.
<div id='whatsapp-chat' class='hide'>
<div class='header-chat'>
<div class='head-home'><h3>Hello!</h3>
<p>Click one of our representatives below to chat on WhatsApp or send us an email to rioblanter@gmail.com</p></div>
<div class='get-new hide'><div id='get-label'></div><div id='get-nama'></div></div></div>
<div class='home-chat'>
<!-- Info Contact Start -->
<a class='informasi' href='javascript:void' title='Chat Whatsapp'>
<div class='info-avatar'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdwDc9yaZ4Cmm7CdapR21wGq3MNtSTT0SVEd2u9GAfaAlfM46i2no35QBBgp6awEeBnSMx2K90FxY_uP7c5o5LseHNlBtHkae20HXro4bWhNLB3qFnnWuqLJd33_T5ex7-pRO4wFhY2bk/s70/supportmale.png'/></div>
<div class='info-chat'>
<span class='chat-label'>Support</span>
<span class='chat-nama'>Customer Service 1</span>
</div><span class='my-number'>6281900000080</span>
</a>
<!-- Info Contact End -->
<!-- Info Contact Start -->
<a class='informasi' href='javascript:void' title='Chat Whatsapp'>
<div class='info-avatar'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisYzoUa_HglU0AEh1aZgn10_MoF9QKq86UmAVouOxQQyaYth-jv5wVP-ws6vXf8RMn54I9O_wJbbha81vWQXrqB3eDT-5Vb40Xz-9L67RYv50JCK_a2jOGvjxHCVXeYxfg88n0_DLQ8VU/s70/supportfemale.png'/></div>
<div class='info-chat'>
<span class='chat-label'>Sales</span>
<span class='chat-nama'>Customer Service 2</span>
</div><span class='my-number'>6281111111122</span>
</a>
<!-- Info Contact End -->
<div class='blanter-msg'>Call us to <b>+62123456789</b> from <i>0:00hs a 24:00hs</i></div></div>
<div class='start-chat hide'>
<div class='first-msg'><span>Hello! What can I do for you?</span></div>
<div class='blanter-msg'><textarea id='chat-input' placeholder='Write a response' maxlength='120' row='1'></textarea>
<a href='javascript:void;' id='send-it'>Send</a></div></div>
<div id='get-number'></div><a class='close-chat' href='javascript:void'>×</a>
</div>
<a class='blantershow-chat' href='javascript:void' title='Show Chat'><i class='fab fa-whatsapp'></i>How can I help you?</a>Kode yang di markup biru adalah kode yang wajib untuk di ubah sesuai dengan data kontak.
Untuk nomor whatsapp, jangan gunakan tanda plus +, hanya kode negara saja seperti 62.
- Letakan Javascript di bawah ini tepat di atas kode </body>
<script type='text/javascript'>
//<![CDATA[
/* Whatsapp Chat Widget by www.idblanter.com */
$(document).on("click","#send-it",function(){var a=document.getElementById("chat-input");if(""!=a.value){var b=$("#get-number").text(),c=document.getElementById("chat-input").value,d="https://web.whatsapp.com/send",e=b,f="&text="+c;if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent))var d="whatsapp://send";var g=d+"?phone="+e+f;window.open(g, '_blank')}}),$(document).on("click",".informasi",function(){document.getElementById("get-number").innerHTML=$(this).children(".my-number").text(),$(".start-chat,.get-new").addClass("show").removeClass("hide"),$(".home-chat,.head-home").addClass("hide").removeClass("show"),document.getElementById("get-nama").innerHTML=$(this).children(".info-chat").children(".chat-nama").text(),document.getElementById("get-label").innerHTML=$(this).children(".info-chat").children(".chat-label").text()}),$(document).on("click",".close-chat",function(){$("#whatsapp-chat").addClass("hide").removeClass("show")}),$(document).on("click",".blantershow-chat",function(){$("#whatsapp-chat").addClass("show").removeClass("hide")});
//]]>
</script>- Simpan Template.
Perlu di perhatikan, font widget ini akan otomatis mengikuti font default dari template yang kamu gunakan. Pastikan kamu sudah memasang font khusus dan juga CSS Eksternal seperti Font Awesome dan juga jQuery.
Jika belum menggunakan Font Awesome dan jQuery, bisa menambahkan kode berikut di atas kode </head> biasanya template versi terbaru sudah menggunakan Font Awesome (Icons) dan jQuery.
Font Awesome
<link href='https://use.fontawesome.com/releases/v5.8.2/css/all.css' rel='stylesheet' type='text/css'/>
jQuery
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
Widget chat whatsapp ini sangat cocok jika dipadukan dengan template Toko Online, yaitu template toko online dengan fitur checkout whatsapp otomatis, tidak perlu lagi mengirim list data pada pembeli, semua formulir yang pembeli isi akan langsung terkirim ke penjual.
Sekian dulu pembahasan saya kali ini tentang cara pasang widget chat whatsapp dengan nomor dan akun ganda. Semoga bermanfaat dan sampai jumpa pada artikel saya selanjutnya.
