Cara Memasang Chat Whatsapp di Website

Whatsapp adalah layanan chatting yang saat ini banyak digunakan, untuk memasang chat whatsapp di website ada cara yang bisa dilakukan dengan mudah

Daftar isi

Baca Juga

Whatsapp adalah layanan chatting yang saat ini banyak digunakan, untuk memasang chat whatsapp di website ada cara yang bisa dilakukan dengan mudah. Namun sayangnya untuk memasang widget chat ini tidak hanya sekedar menggunakan kode CSS dan HTML saja tapi membutuhkan script.

Script yang dibutuhkan tidak hanya untuk menjalankan program chat ini tapi juga membutuhkan jQuery agar program chat ini bisa berjalan di website atau blog anda. Dan buruknya, penggunaan jQuery saat ini masih menjadi keengganan untuk digunakan. Alasan klasiknya adalah memperlambat loading blog.

Mungkin alasan tidak menggunakan jquery karena memperlambat loading blog ada benarnya juga namun semuanya tergantung pemilik blog tersebut mensiasatinya. Karena pemasangan jquery tidak sepenuhnya memperlambat loading blog namun alasan lain dari penggunaan script ini adalah terjadinya bentrok dengan script yang lain.

Saya sendiri lebih mengkhawatirkan kejadian seperti itu, jquery bisa digunakan namun bisa membuat script lain tidak bisa bekerja dengan baik malah akan membuat error script yang lain. Begitu juga dengan penggunaan jquery ini saat memasang chat whatasapp di website atau blog.

Baca Juga: Cara Gabung/Masuk Kembali Ke Grup WhatsApp Yang Sudah Keluar

Setelah saya menerapkannya ke blog saya yang lain sebagai blog demo, ternyata ada script sebelumnya yang saya pasang tanpa jquery malah membuat script tersebut tidak bekerja dengan baik. Oleh karena itu, jika anda ingin menggunakan atau memasang chat widget whatsapp ini, cobalah dulu dan perhatikan beberapa tampilan pada blog anda, apakah masih bekerja atau berjalan dengan baik atau ada perubahan.

Jika semuanya berjalan dengan baik dan tidak ada pengaruh apa-apa setelah semua kode untuk chat WA ini terpasang, itu artinya semua baik-baik saja dan anda bisa menggunakan widget chat ini di blog atau website anda.

Kode untuk memasang widget chat WA ini saya dapatkan dari blognya mas Rio, pemilik blog idblanter.com. Untuk sebagian kodenya sedikit saya ganti seperti tidak menggunakan icon font awesome dan tidak menggunakan gambar. Semuanya sudah saya ganti dengan menggunakan icon svg agar tidak mempengaruhi loading blog untuk penggunaan kode CSS dan HTML.

Untuk melihat hasil dari pemasangan widget chat ini bisa anda klik pada tombol demo dibawah ini. Widget bekerja dengan baik untuk tampilan desktop dan di versi ponsel.

Lihat DEMO

Bagaimana cara memasang widget chat whatsapp ini?

Caranya sangat mudah sekali, anda cukup menggunakan dan menyalin beberapa kode dibawah ini kedalam kode template blog anda. Kode ini bisa digunakan di blog dengan platform Blogger atau pun Wordpress self hosting.

Memasang Kode CSS

Salin kode CSS dibawah ini kedalam kode template blogger anda di menu Template >> Klik Tombol Sesuaikan >> Edit HTML. Masukkan kode css kedalam css template, bisa ditengah atau diakhir kode template.

Atau jika didalam kode template memiliki tag kondisional, masukkan kode diluar tag kondisional apapun. Kecuali jika anda ingin menampilkan widget chat dihalaman tertentu, maka anda bisa memasukkannya kedalam tag kondisional untuk halaman tersebut.

#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.wabox-chat{background:linear-gradient(to right top,#47cf73,#248c46);color:#fff;position:fixed;z-index:98;bottom:25px;right:30px;font-size:15px;padding:10px 12px;border-radius:100%;box-shadow:0 1px 15px rgba(32,33,36,.28)}
a.wabox-chat:hover{color:#444;text-decoration:none;transition:all .4s ease-in-out}
.wabox-chat svg,.info-avatar svg,.wabox-msg svg{vertical-align:-3px;}
.header-chat{background:linear-gradient(to right top,#47cf73,#248c46);color:#fff;padding:20px}
.header-chat h3{color:#fff;margin:0 0 10px}
.header-chat p{font-size:14px;line-height:1.7;margin:0}
.info-avatar{position:relative}
.info-avatar svg{width:50px;height:50px;float:left;margin:0 10px 0 0}
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}
.wabox-msg{color:#444;padding:20px;font-size:12.5px;text-align:center;border-top:1px solid #ddd}
.wabox-msg svg{width:24px;height:24px}
.wabox-msg svg path{fill:#e2e2e2}
textarea#chat-input{border:none;font-family:'Arial',sans-serif;width:100%;height:auto;padding:5px 0 0;outline:none;resize:none}
textarea::placeholder{color:#e2e2e2}
a#send-it{color:#555;margin:0;font-weight:700;padding:8px 10px;background:linear-gradient(to right top,#47cf73,#248c46);border-radius:100%}
a#send-it svg{width:20px;height:20px}a#send-it svg path{fill:#fff}
.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:15px;padding:15px 20px;display:block;text-align:left}
.first-msg span:after{content:"";position:absolute;border:0 solid transparent;border-top:9px solid #e2e2e2;border-radius:0 20px 0;width:15px;height:35px;left:16px;bottom:120px;transform:rotate(160deg);}
.start-chat .wabox-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}

Sedangkan jika anda ingin menggunakannya di blog wordpress anda, lebih baik gunakan plugin chat whatsapp saja karena hasil dan fungsinya juga sama. Tentunya lebih mudah untuk diedit dan digunakan.

Memasang Kode HTML dan Script

Setelah memasang kode css, salin dan masukkan kode berikut sebelum kode </body>

<div class='hide' id='whatsapp-chat'>
<div class='header-chat'>
<div class='head-home'><h3>Hai</h3>
<p>Silahkan hubungi kami</p></div>
<div class='get-new hide'>
  <div class='info-avatar'><svg viewBox='0 0 24 24'><path d='M18.72,14.76C19.07,13.91 19.26,13 19.26,12C19.26,11.28 19.15,10.59 18.96,9.95C18.31,10.1 17.63,10.18 16.92,10.18C13.86,10.18 11.15,8.67 9.5,6.34C8.61,8.5 6.91,10.26 4.77,11.22C4.73,11.47 4.73,11.74 4.73,12A7.27,7.27 0 0,0 12,19.27C13.05,19.27 14.06,19.04 14.97,18.63C15.54,19.72 15.8,20.26 15.78,20.26C14.14,20.81 12.87,21.08 12,21.08C9.58,21.08 7.27,20.13 5.57,18.42C4.53,17.38 3.76,16.11 3.33,14.73H2V10.18H3.09C3.93,6.04 7.6,2.92 12,2.92C14.4,2.92 16.71,3.87 18.42,5.58C19.69,6.84 20.54,8.45 20.89,10.18H22V14.67H22V14.69L22,14.73H21.94L18.38,18L13.08,17.4V15.73H17.91L18.72,14.76M9.27,11.77C9.57,11.77 9.86,11.89 10.07,12.11C10.28,12.32 10.4,12.61 10.4,12.91C10.4,13.21 10.28,13.5 10.07,13.71C9.86,13.92 9.57,14.04 9.27,14.04C8.64,14.04 8.13,13.54 8.13,12.91C8.13,12.28 8.64,11.77 9.27,11.77M14.72,11.77C15.35,11.77 15.85,12.28 15.85,12.91C15.85,13.54 15.35,14.04 14.72,14.04C14.09,14.04 13.58,13.54 13.58,12.91A1.14,1.14 0 0,1 14.72,11.77Z' fill='currentColor'/></svg></div>
  <div id='get-label'/><div id='get-nama'/></div></div>
<div class='home-chat'>
<!-- Info Contact Start -->
<a class='informasi' href='javascript:void' title='Chat Whatsapp'>
<div class='info-avatar'><svg viewBox='0 0 24 24'><path d='M18.72,14.76C19.07,13.91 19.26,13 19.26,12C19.26,11.28 19.15,10.59 18.96,9.95C18.31,10.1 17.63,10.18 16.92,10.18C13.86,10.18 11.15,8.67 9.5,6.34C8.61,8.5 6.91,10.26 4.77,11.22C4.73,11.47 4.73,11.74 4.73,12A7.27,7.27 0 0,0 12,19.27C13.05,19.27 14.06,19.04 14.97,18.63C15.54,19.72 15.8,20.26 15.78,20.26C14.14,20.81 12.87,21.08 12,21.08C9.58,21.08 7.27,20.13 5.57,18.42C4.53,17.38 3.76,16.11 3.33,14.73H2V10.18H3.09C3.93,6.04 7.6,2.92 12,2.92C14.4,2.92 16.71,3.87 18.42,5.58C19.69,6.84 20.54,8.45 20.89,10.18H22V14.67H22V14.69L22,14.73H21.94L18.38,18L13.08,17.4V15.73H17.91L18.72,14.76M9.27,11.77C9.57,11.77 9.86,11.89 10.07,12.11C10.28,12.32 10.4,12.61 10.4,12.91C10.4,13.21 10.28,13.5 10.07,13.71C9.86,13.92 9.57,14.04 9.27,14.04C8.64,14.04 8.13,13.54 8.13,12.91C8.13,12.28 8.64,11.77 9.27,11.77M14.72,11.77C15.35,11.77 15.85,12.28 15.85,12.91C15.85,13.54 15.35,14.04 14.72,14.04C14.09,14.04 13.58,13.54 13.58,12.91A1.14,1.14 0 0,1 14.72,11.77Z' fill='currentColor'/></svg></div>
<div class='info-chat'>
<span class='chat-label'>Support</span>
<span class='chat-nama'>Customer Service </span>
</div><span class='my-number'>6281977094280</span>
</a>
<!-- Info Contact End -->
<div class='wabox-msg'>Layanan <b>24 jam</b> <i>Hari libur tutup</i></div></div>
<div class='start-chat hide'>
<div class='first-msg'><span>Hai! Ada yang bisa saya bantu?</span></div>
<div class='wabox-msg'><svg viewBox='0 0 24 24'><path d='M12,17.5C14.33,17.5 16.3,16.04 17.11,14H6.89C7.69,16.04 9.67,17.5 12,17.5M8.5,11A1.5,1.5 0 0,0 10,9.5A1.5,1.5 0 0,0 8.5,8A1.5,1.5 0 0,0 7,9.5A1.5,1.5 0 0,0 8.5,11M15.5,11A1.5,1.5 0 0,0 17,9.5A1.5,1.5 0 0,0 15.5,8A1.5,1.5 0 0,0 14,9.5A1.5,1.5 0 0,0 15.5,11M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20M12,2C6.47,2 2,6.5 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z' fill='currentColor'/></svg><textarea id='chat-input' maxlength='120' placeholder='Ketik pesan' row='1'/>
<a href='javascript:void;' id='send-it'><svg viewBox='0 0 24 24'><path d='M2,21L23,12L2,3V10L17,12L2,14V21Z' fill='currentColor'/></svg></a></div></div>
<div id='get-number'/><a class='close-chat' href='javascript:void'>&#215;</a>
</div>
<a class='wabox-chat' href='javascript:void' title='Show Chat'><svg style='width:24px;height:24px' viewBox='0 0 24 24'>
    <path d='M12.04 2C6.58 2 2.13 6.45 2.13 11.91C2.13 13.66 2.59 15.36 3.45 16.86L2.05 22L7.3 20.62C8.75 21.41 10.38 21.83 12.04 21.83C17.5 21.83 21.95 17.38 21.95 11.92C21.95 9.27 20.92 6.78 19.05 4.91C17.18 3.03 14.69 2 12.04 2M12.05 3.67C14.25 3.67 16.31 4.53 17.87 6.09C19.42 7.65 20.28 9.72 20.28 11.92C20.28 16.46 16.58 20.15 12.04 20.15C10.56 20.15 9.11 19.76 7.85 19L7.55 18.83L4.43 19.65L5.26 16.61L5.06 16.29C4.24 15 3.8 13.47 3.8 11.91C3.81 7.37 7.5 3.67 12.05 3.67M8.53 7.33C8.37 7.33 8.1 7.39 7.87 7.64C7.65 7.89 7 8.5 7 9.71C7 10.93 7.89 12.1 8 12.27C8.14 12.44 9.76 14.94 12.25 16C12.84 16.27 13.3 16.42 13.66 16.53C14.25 16.72 14.79 16.69 15.22 16.63C15.7 16.56 16.68 16.03 16.89 15.45C17.1 14.87 17.1 14.38 17.04 14.27C16.97 14.17 16.81 14.11 16.56 14C16.31 13.86 15.09 13.26 14.87 13.18C14.64 13.1 14.5 13.06 14.31 13.3C14.15 13.55 13.67 14.11 13.53 14.27C13.38 14.44 13.24 14.46 13 14.34C12.74 14.21 11.94 13.95 11 13.11C10.26 12.45 9.77 11.64 9.62 11.39C9.5 11.15 9.61 11 9.73 10.89C9.84 10.78 10 10.6 10.1 10.45C10.23 10.31 10.27 10.2 10.35 10.04C10.43 9.87 10.39 9.73 10.33 9.61C10.27 9.5 9.77 8.26 9.56 7.77C9.36 7.29 9.16 7.35 9 7.34C8.86 7.34 8.7 7.33 8.53 7.33Z' fill='currentColor'/>
</svg></a>
   <script>
//<![CDATA[ 
    $(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",".wabox-chat",function(){$("#whatsapp-chat").addClass("show").removeClass("hide")});
    //]]>
</script>

Memasangan Kode jQuery

Untuk kode jquery ini, anda bisa menggunakan versi 3 keatas atau bisa menggunakan link jquery dari cloudfare ini dan pasang diatas kode </head>

<script async='async' src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'/>

Jika anda alergi dengan penggunaan jquery ini, pertimbangkan lagi untuk memasang widget chat whatsapp ini di blog atau website anda. Dan juga sebagai bahan pertimbangan, chat ini ataupun chat lainnya hanya cocok dipasang di website dengan kategori layanan customer.

Jadi jika hanya memiliki blog seperti blog Digital poin ini dan tidak berfokus pada layanan customer, lebih tidak menggunakan widget chat ini. Apalagi hanya sebagai gaya-gayaan lebih baik tidak usah memasang chat whatsapp ini.