--> Skip to main content
Menu

Cara Memasang Chat Whatsapp di Website

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

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

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.

18 komentar

  1. Dwi Sugiarto
    Boleh lah nanti di terapkan kalau punya toko online.. Maaf nih baru mampir...
    • Roni
      Hehehehe
      Ga apa-apa, dan silahkan dicoba nantinya :)
  2. azid zainuri
    sumber utama script dari idblanter ya mas.

    ada bug kecil, ketika klik close tidak mau seperti semula.

    untuk mengatasinya untuk script click ".close-chat" bisa ubah dengan ini

    $(document).on("click", ".close-chat", function () {
    $("#whatsapp-chat").addClass("hide").removeClass("show");
    $(".start-chat,.get-new").addClass("hide").removeClass("show");
    $(".home-chat,.head-home").addClass("show").removeClass("hide");
    })
    • Roni
      Oke siap mas, terimakasih bantuan koreksinya :)
  3. San Muliadi
    Keren mas. Tapi mungkin untuk scriptnya bisa pakai plain javascript daripada jquery biar gak nambah beban loading blog
    • Roni
      iya mas, sudah ada sih sebenarnya. Kemaren minta ke mas Zain, masih butuh beberapa edit dan tambahan kode. Belum sempat juga soalnya mas :)
    • Azid Zainuri, S.Pd
      bisa pakai ini mas.

      ini saya baru belajar pakai pure javascript agar tidak gantungin jQuery terus


      document.getElementById("send-it").onclick = function(){
      var a = document.getElementById("chat-input");
      if (a.value != ""){
      var link = "https://web.whatsapp.com/send";
      if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)){
      var link = "whatsapp://send";
      }
      var number = document.getElementById("get-number").innerText,
      pesan = document.getElementById("chat-input").value,
      kirim = link + "?phone=" + number + "&text=" + pesan;
      window.open(kirim, "_blank");
      }
      }

      var informasi = document.querySelectorAll( ".informasi" );
      for (var i = 0; i < informasi.length; i++) {
      informasi[i].addEventListener( "click", function() {
      var start = document.querySelector(&qu…
    • Azid Zainuri, S.Pd
      var informasi = document.querySelectorAll( ".informasi" );
      for (var i = 0; i < informasi.length; i++) {
      informasi[i].addEventListener( "click", function() {
      var start = document.querySelector(".start-chat");
      start.classList.add("show");
      start.classList.remove("hide");
      var get = document.querySelector(".get-new");
      get.classList.add("show");
      get.classList.remove("hide");
      var home = document.querySelector(".home-chat");
      home.classList.add("hide");
      home.classList.remove("show");
      var head = document.querySelector(".head-home");
      head.classList.add("hide");
      head.classList.remove("show");
      var getNumber= this.querySelector(".my-number").innerHTML;
      var getNama = this.querySelector(".chat-nama").innerHTML;
    • Azid Zainuri, S.Pd
      var getNama = this.querySelector(".chat-nama").innerHTML;
      var getLabel = this.querySelector(".chat-label").innerHTML;
      document.getElementById("get-number").innerHTML = getNumber;
      document.getElementById("get-nama").innerHTML = getNama;
      document.getElementById("get-label").innerHTML = getLabel;
      });
      }
    • Azid Zainuri, S.Pd
      document.querySelector(".close-chat").onclick = function(){
      var chat = document.getElementById("whatsapp-chat");
      chat.classList.add("hide");
      chat.classList.remove("show");
      var start = document.querySelector(".start-chat");
      start.classList.add("hide");
      start.classList.remove("show");
      var get = document.querySelector(".get-new");
      get.classList.add("hide");
      get.classList.remove("show");
      var home = document.querySelector(".home-chat");
      home.classList.add("show");
      home.classList.remove("hide");
      var head = document.querySelector(".head-home");
      head.classList.add("show");
      head.classList.remove("hide");
      }
    • Azid Zainuri, S.Pd
      document.querySelector(".wabox-chat").onclick = function(){
      var chat = document.getElementById("whatsapp-chat");
      chat.classList.add("show");
      chat.classList.remove("hide");
      }
    • Azid Zainuri, S.Pd
      ada batasan teks nya ternyata. jadi kepotong terus. maaf kang roni kirim spam
    • Roni
      Hehehe, tidak apa-apa mas, benar-benar terimakasih saya
      Belum sempat di edit-edit di artikel juga ini, hanya balas perkomentaran dan perpesanan dulu hihihi
  4. Gani Nur Pramudyo
    Izin bertanya, template digitalpoin pakai apa ya? trim
    • Roni
      Blog Digitalpoin ini menggunakan template Kompi Flexible mas Gani, bisa dilihat di blognya Kang Adhy kompiajaib.com
      Terimakasih juga mas Gani
  5. Azid Zainuri, S.Pd
    dibuatin tutor ganti komentar bawaan blogger mantap kayaknya ini mas. hehehe
    • Roni
      Hayoo pingin yaa hehehee
      Memang lebih nyaman menggunakan kolom komentar bawaan ya mas, daripada menggunakan pihak ketiga yang lebih banyak lemotnya saat dibuka, padahal sudah menggunakan lazyload hihihii
    • Azid Zainuri, S.Pd
      iya mas, bener mas.

      klo pakai disqus memang dari speed bagus mas, tidak ada error html5 juga, cuman kendalanya jarang yang pakai disqus terus tidak ada notifnya.

      klo pakai koment blogger memang ada error di speednya, tpi bisa disiasati dengan lazyload onclick. hehehe
    Komentar interaktif
    Gunakan kode dibawah ini untuk menampilkan gambar, quotes, dan kode lainnya dengan mengikuti format penulisan berikut:
  1. Menambahkan Gambar: [img]Link gambar di sini[/img]