Menu
Membuat link live chat whatsapp pada website

Membuat link live chat whatsapp pada website

  • November 19th, 2018

Pagi-pagi ketemu teman di parkiran lalu dia melayangkan sebuah pertanyaan, Bisakah web-nya ditambahin live chat antara pengunjung web dengan pemiliknya? Saya jawab bisa saja. Begitulah percakapan pagi itu dengan seorang teman terkait project web yang sedang kami bangun.

Pertanyaan yang sebenarnya saya jawab dengan asal tersebut membuat saya kembali membuka ingatan saya terkait api whatsapp yang pernah disinggung  oleh salah seorang teman. Dimana api dari whatsapp memungkinkan kita untuk mengirimkan chat melalui sebuah html link. Berikut ini contoh api nya:

https://api.whatsapp.com/send?phone=YYYYYYYYY&text=ZZZZZZZZZ

Parameter phone diisi dengan nomor telepon tujuan dengan format internasional misalnya untuk nomor indonesia 6281329666333, sedangkan parameter text diisi dengan default text yang dikirimkan lewat chat dengan menggunakan kaidah urlencode (cari digoogle jika bingung). Untuk parameter text bersifat optional artinya boleh ada boleh tidak. Berikut ini contohnya :

https://api.whatsapp.com/send?phone=6281329666333&text=Halo%20Pakde

Link tersebut jika diakses melalui mobile maka akan langsung membuka aplikasi whatsapp dengan otomatis chat “Halo Pakde” ke nomor tujuan 6281329666333. Lalu bagaimana jika kita mengakses link tersebut dari perangkat bukan mobile, pc misalnya? Jawabannya link tersebut tidak akan jalan. Lalu solusi nya bagaimana? Solusinya adalah kita menggunakan link web whatsapp untuk menggantikan api whatsapp, berikut ini contohnya:

https://web.whatsapp.com/send?phone=6281329666333&text=Halo%20Pakde

Lalu jika kita akan memasang link tersebut sebagai live chat whatsapp di dalam sebuah website bagaimana agar kedua nya dapat berjalan. Oke lets do this through this code.

Kode live chat whatsapp

<!-- buat dua buah link untuk versi pc web dan versi mobile -->
<!-- link yang akan muncul ketika diakses di pc web -->
<a  target="_blank" title="WhatsApp Chat" href="https://web.whatsapp.com/send?phone=6281329666333&text=Halo%20Pakde" class="pcweb">
    <i class="fab fa-whatsapp"></i> 
    <span>WhatsApp Chat</span>
</a>
<!-- link yang akan muncul ketika diakses di mobile -->
<a  target="_blank" title="WhatsApp Chat" href="https://api.whatsapp.com/send?phone=6281329666333&text=Halo%20Pakde" class="mobile">
    <i class="fab fa-whatsapp"></i> 
    <span>WhatsApp Chat</span>
</a>
<!-- Script untuk menyembunyikan salah satu link ketika diakses lewat pc web atau mobile -->
<script type="text/javascript"> 
$(document).ready(function(){
	function detectmob() { 
	 if( navigator.userAgent.match(/Android/i)
	 || navigator.userAgent.match(/webOS/i)
	 || navigator.userAgent.match(/iPhone/i)
	 || navigator.userAgent.match(/iPad/i)
	 || navigator.userAgent.match(/iPod/i)
	 || navigator.userAgent.match(/BlackBerry/i)
	 || navigator.userAgent.match(/Windows Phone/i)
	 ){
		return true;
	  }
	 else {
		return false;
	  }
	}

	if(detectmob() == true) {//For mobile 
		$('.pcweb').css('display', 'none'); // atau gunakan $('.pcweb').hide();
	} else { 
		$('.mobile').css('display', 'none'); // atau gunakan $('.mobile').hide();
	}
});
</script>

Penjelasannya:

Di kode bagian atas, kita membuat dua buah link untuk  untuk kompatibilitas versi web dan versi mobile dengan link href yang berbeda, lihat catatan komentar di atas. Lalu kode dibagian bawah atau kode script berisikan kode untuk melakukan hide element html yaitu class pcweb atau mobile, dengan terlebih dahulu melakukan scanning perangkat yang digunakan pengguna. Dan kita coba demokan kode tersebut hasilnya seperti ini.

WhatsApp Chat WhatsApp Chat

Tips untuk live chat whatsapp:

  • Jalankan demo di web pc dan mobile untuk melihat perbedaan hasilnya
  • Kode diatas menggunakan jquery agar dapat berjalan, so pastikan anda menyisipkan jquery script di html header
  • Ketika anda mencoba, pastikan nomor telepon yang anda masukkan valid
  • Gunakan url shortener agar link href khususnya nomor telepon tidak terlihat
  • Percantik tampilan link live chat whatsapp dengan gambar dan warna
  • Kode ini dapat kita masukkan di website serta blog wordpress juga

Demikian tulisan singkat tentang membuat live chat whatsapp untuk dapat digunakan pada website, blog, wordpress dan lainnya. Semoga bermanfaat dan tetap ngoding.

 

Posted In:
web desain

Add commentYour email address will not be published

Kategori