Buat Widget Obrolan Whatsapp Dengan Banyak Nomor dan Akun

Widget ini dapat digunakan di semua jenis platform hanya dengan HTML, CSS, dan Javascript. Tentunya juga cocok untuk digunakan di Wordpress.

Dari gambar pasti sudah terbayang bagaimana fungsi dan cara kerja widget chatbox ini. Anda dapat menambahkan 2 ke jumlah akun yang tidak terbatas yang akan terhubung ke WhatsApp. Setelah memilih, pengunjung dapat mengetik pesan sebelum akhirnya masuk ke aplikasi whatsapp secara otomatis. Anda harus menginstal widget ini jika Anda membutuhkan lebih dari 2 Layanan Pelanggan.

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

Panduan ini untuk instalasi di Blogger / Blogspot.

Silahkan masuk ke Blogger > Themes > Edit HTML
Letakkan CSS berikut 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.netralidshow-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.netralidshow-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}
.netralid-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 .netralid-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 bisa ditaruh di Layout > Widget > HTML / Javascript , sebenarnya bisa ditaruh dimana saja, kalau edit HTML bisa di atas kode Javascript di 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 netralid@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/AVvXsEhzEqnHVrGGmRaenRR8vV9TJmxE9zZGXq6SnPNroYtUFq9hDm3lxzpzRMZg_KSu8Am7oWywxQFb34_jGlrcna9Jy7ePImUZo7kZpeLa77dCTBmIy9fraIY6qSdc8waF_YjmW4baEhfRC4E/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'>628875820426</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/AVvXsEh02XaP1RZJcklSmgi_LV2PKACMPzz9OWPzXqv9kB1xM-Xy7fNxaNKXxMpEqnB8YEzTSmcM0dGo9iLG8LhvhTBsdcQJUS_6k66BU5Ajjwzt2R7xooewnRMrgV6lbeR0dsnYORUuEbTdNhw/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='netralid-msg'>Call us to <b>+628875820426</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='netralid-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='netralidshow-chat' href='javascript:void' title='Show Chat'><i class='fab fa-whatsapp'></i>How can I help you?</a>

Kode bertanda adalah kode yang harus diubah sesuai data kontak. Untuk nomor whatsapp, jangan gunakan tanda plus +, hanya kode negara seperti 62.

Letakkan Javascript di bawah tepat di atas kode</body>

<script type='text/javascript'>
//<![CDATA[
/* Whatsapp Chat Widget */
$(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",".netralidshow-chat",function(){$("#whatsapp-chat").addClass("show").removeClass("hide")});
//]]>
</script>

Simpan Template.

Perlu diketahui, font widget ini secara otomatis akan mengikuti font default dari template yang Anda gunakan. Pastikan Anda telah menginstal font khusus dan juga CSS Eksternal seperti Awesome Fonts dan juga jQuery.

Jika Anda belum pernah menggunakan Font Awesome dan jQuery, Anda dapat menambahkan kode berikut di atas kode </head> biasanya template versi terbaru sudah menggunakan Font Awesome (Icons) dan jQuery.

DEMO Langsung - Klik Di Sini

Font Mengagumkan

<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 obrolan WhatsApp ini sangat cocok jika dipadukan dengan template Toko

Buat Widget Obrolan Whatsapp Dengan Banyak Nomor dan Akun

DEMO Langsung - Klik Di Sini

Blogger news

Post ADS

Formulir Kontak