Home » belajar » Membuat Widget Chat Whatsapp Dengan Nomor dan Akun Ganda » tutorial » widget » Membuat Widget Chat Whatsapp Dengan Nomor dan Akun Ganda

8 Nov 2021

Membuat Widget Chat Whatsapp Dengan Nomor dan Akun Ganda

Senin, November 08, 2021


Halo sobat teamwork, 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.

Contoh Kirim Pesan (Bahasa Indonesia)


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/AVvXsEilYA-dIGgcwFu_vR1iE4vPtE6zkQOMpkVEmMhR3w8D05GGWOWxzWvG2CV4vWHB9ig87p_dTkA-C-MldRwdf1vCjJHpe1YeIQWyNLeonwReKl38gOmBL90E2-dR6sXUga-yQGU9coL6a5w/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/AVvXsEjqYUjBLFqBHWVZkKhxUWE1ivxPgULuBpJV9q1XPyJ-IN1aKJGYwdt-E7bYd8Lfhxh_u-TDLKmLjG47-7ZiYDfH4180NqowatKPmg6eOid4DnscCFQMDnAPXU0U_Efj0546rM3Kuw75IpE/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.



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


Tags :

bm

Admin

EO Outbound

Temukan Ilmu Program Pemasaran Digital KNP Dapatkan semua keterampilan pemasaran digital yang Anda butuhkan untuk mempercepat karier dan mengubah bisnis Anda.

  • Admin
  • Cimahi Mall
  • knp-production@gmail.com

Posting Komentar