Membuat Widget Chat Whatsapp Dengan Nomor dan Akun Ganda

10 September 2019

Widget Chat Whatsapp Dengan Nomor dan Akun Ganda

Halo sobat Blanter, kali ini saya akan membagikan sebuah tutorial menarik yang cocok sekali untuk website atau blog yang bertemakan jasa atau berjualan produk. Widget ini dapat digunakan di segala macam platform hanya dengan HTML, CSS dan Javascript. Tentu saja juga cocok untuk digunakan pada Wordpress.

Dari gambarnya pasti sudah terbayang bagaimana fungsi dan cara kerja widget chatbox ini. Anda 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 Anda pasang jika membutuhkan lebih dari 2 Customer Service.

Sangat Mudah

Untuk cara memasang dan juga menambakan akun whatsapp, Anda hanya perlu salin salah satu kode yang sebelumnya sudah terpasang. Begitu juga untuk warna dan posisi, semua bisa dilakukan dengan mudah. Panduan ini akan disertai video agar mudah untuk memahami tutorial ini.

Whatsapp Chat Widget with Multiple Accounts

Contoh Kirim Pesan (Bahasa Indonesia)

Tutorial Memasang Widget Chat Whatsapp Ganda

Panduan ini untuk pemasangan pada Blogger/Blogspot.

Silahkan 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 Anda bisa letakan pada Tata Letak > Widget > HTML/Javascript, sebenarnya bisa diletakan dimana saja, jika di Edit HTML, Anda 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/AVvXsEi8b11SkKpxmpMiyBd4MJUBvIESt_aaezR7Df0e0p2ysfzL8SYRLADvu4rHxcVIEu-QO7ORvXzKwC7YyRnoZjT3hYXAjpOr_pXXfv2TI7hW3AcQxLqj9Z0vc4w0gnSz61tB1oYARraE3mc/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'>6281977094280</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/AVvXsEgcHhxsA6GcvXZs9UwVBp5Nad7ZNbMmPHaK5-5QoXHwD3L8ijWW4DFI0czofvgBWjNbamF4D7n4P3e_EbEn_F6aRytmORs69tRECbFC1J47S2AXp4YWsfMBp1nwr8S26P7mL_BcBvG7zjw/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'>6222222222</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 Anda gunakan. Pastikan Anda sudah memasang font khusus dan juga CSS Eksternal seperti Font Awesome dan juga jQuery.

Results

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>

Lihat Juga : Blanter Tokoshop, Template Toko Online dengan Checkout Whatsapp

Cek Video lengkap cara memasang Whatsapp Chat Widget with Multiple Accounts.

Widget chat whatsapp ini sangat cocok jika dipadukan dengan template Blanter Tokoshop, 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.

Itulah tutorial yang bisa saya bagikan kali ini, jangan lupa untuk Bookmark, Subscribe dan Komentar untuk tutorial selanjutnya. Terima kasih.

Dunia Blanter