Cara Membuat Live Chat WhatsApp di WordPress

oleh | Mar 19, 2018 | Aplikasi Android, Tips Tricks | 0 Komentar

WhatsApp merupakan aplikasi chatting paling populer di Dunia, dengan 1 milyar Unduhan di palystore. Aplikasi ini perlahan menggantikan fungsi SMS bahkan panggilan telpon. Menggunakan WhatsApp sebagai aplikasi live chat pada website bisnis Anda merupakan keputusan yang tepat. Karna respon yang lebih cepat dan tanggap, bisa meningkatkan angka penjualan dan keuntungan pastinya.

Pada kesempatan ini, sasambo design akan membahas bagaimana cara membuat live chat Whatsapp di WordPress. Ada dua cara yang akan dibahas, pertama dengan tombol biasa, dan yang kedua live chat dengan tombol melayang (tidak ikut bergeser ketika scroll halaman).

Mungkin Anda tertarik membaca postingan sebelumnya: Cara Pasang Tombol Whatsapp Pada Fanpage Facebook

#Membuat Tombol Live Chat WhatsApp Statis

Cara membuat tombol live chat Whatsapp statis di wordpress sangat mudah sekali. Anda hanya perlu copy dan paster kode dibawah berikut ke tempat dimana Anda ingin menampilkan tombol live chat tersebut.

Berikut contoh tombol chat WA, jika saat ini anda sedang menggunakan smartphon anda untuk mengakses halaman ini, anda bisa langsung coba klik pada tombolnya:

Berikut kodenya

<a href="https://api.whatsapp.com/send?phone=6287865920400&amp;text=Halo%20Admin%20Saya%20Mau%20Tanya"><img data-original-height="147" data-original-width="800" src="https://2.bp.blogspot.com/-f_HyTwJfozs/Web6RdiiDoI/AAAAAAAABbY/BfW9LhyoFmco6fVVN7zhl8UNQMbS0BECQCLcBGAs/s200/chat-via-WA-800x147.png" width="200" height="36" border="0"></a>

Sebelum anda memasang kode di atas pada website Anda, pastikan anda sudah merubah nomor telpon dengan format sesuai dengan contoh tanpa menggunakan “+” pada kode negara.

Tombol di atas ketika di klik, secara otomatis akan meminta persetujuan Anda untuk membuka aplikasi whatsApp dan chat dengan nomor yang tertera di dalam kode dengan text pembukanya “Halo Admin Saya Mau Tanya”

Anda bisa merubah text pengantar tersebut dengan menggunakan karakter %20 sebagai spasi. Misalkan pesan pembukanyanya adalah “Saya Mau Order” maka anda ganti kode text-nya menjadi text=Saya%20mau%20Order

Anda bisa mengganti bentuk dan warna tombol whatsapp dengan mengganti url gambar pada kode diatas degan gambar bentuk tombol WA yang anda inginkan.



Berikut beberapa contoh tombol WA lainnya.

Kode Tombol

<a href="https://api.whatsapp.com/send?phone=6287865920400&text=Halo%20Admin%20Saya%20Mau%20Order"><img border="0" data-original-height="534" data-original-width="1500" height="70" src="https://3.bp.blogspot.com/-f28UzTAsYkQ/Web65UXJKiI/AAAAAAAABbk/EJUZY2sDgRcbESELrFLg-ET-GL4mCyrGwCLcBGAs/s200/pesan%2BWA.png" width="200" /></a>

Tombol WhatsApp Saja

Kode Tombol

<a href="https://api.whatsapp.com/send?phone=6287865920400&text=Halo%20Admin%20Saya%20Mau%20Order"><img border="0" data-original-height="1410" data-original-width="1400" height="50" src="https://1.bp.blogspot.com/-pMxKTo-Cxlw/Web-WeusiQI/AAAAAAAABbw/IFplaVYKPTw0W7sRINtRVNjMXLp3XkLCACLcBGAs/s200/WA.jpg" width="50" /></a>

 

#Cara Membuat Live Chat WhatsApp Melayang

Kelemahan menggunakan tombol live chat whatsapp pada langkah sebelumnya adalah, tombol tersebut akan iktu bergulir ketika user melakukan scroll pada halaman. Sehingga user harus scroll kembali untuk mendapatkan tombol live chat whatsapp.

Dengan membuat live chat Whatsapp melayang, maka tombol akan selalu tampil pada screen layar. Dan kelebihan lainnya adalah, tombol chat ini tetap tampil baik pada perangkat HP, sangat memudahkan pengguna ketika mengakses website dari perangkat mobile.

Anda juga nantinya bisa menambahkan tombol lainnya seperti Facebook Messanger, Line, Tombol Panggilan Telpon yang ketika di klik, akan langsung mengarah ke menu panggilan pada telpon.

Cara ini menggunakan layanan dari pihak ketiga dari website www.whatshelp.io silahkan buka websitenya untuk memulai. Dengan menggunakan website ini, anda juga bisa pasang livechat whatsapp pada blogger.

Berikut adalah tampilan pengaturan pada whatshelp

membuat live chat whatsapp di wordpress

Ada 3 Langkah yang harus anda lakukan sebelum anda mandapatkan kode live chat tersebut. Langkah Pertama, silahkan pilih aplikasi chatting yang ingin Anda sertakan, pada gmabar diatas, digunakan 4 aplikasi, pertama facebook messanger, whatsapp, tombol call, dan telegram. Silahkan isikan nomor dan alamat sesuai petunjuk.

Pengaturan kedua adalah pengaturan tampilan dan kalimat pembuka percakapan. Untuk Company Logo, silahkan masukkan url gambar logo, atau jika anda mengisikan alamat fanpage facebook pada facebook messanger, secara otomatis company logo akan tersisi dengan logo fanpage facebook Anda.

Greeting Message ganti dengan kata-kata pembuka seperti “selamat datang” dan lain sebagainya. Selanjutnya atur posisi tombol chat melayang di pojok kanan bawah atau pojok kiri bawah.




Untuk mendapatkan kode, masukkan email dan tekan tombol “get button code”

Kopi kode yang sudah anda dapatkan dan pasang pada wordpress di dalam tag <body>……….</body>. Bagi anda yang menggunakan blogspot, bisa dengan menambahkan widget HTML/Javascript.

Cara Memasukkan Kode Kedalam <body> WordPress?

Mungkin ada yang masih belum mengetahui cara memasukkan kode kedalam <head>, <body> atau bagian <footer> pada wordpress, berikut langkah praktisnya.

Jika anda menggunakan template modern, biasanya sudah terdapat menu dan kolom untuk menyisipkan kode kedalam head, body atau footer pada wordpress, seperti divi theme yang saya gunakan ini.

Tapi jika belum, anda juga bisa memasukkannya secara manual dengan menggunakan child theme atau dengan menggunakan plugin agar lebih praktis.

Saya sarankan anda menggunakan plugin. Salah satu plugin yang bisa anda gunakan adalah Plugin Header-Footer. Silahkan install dan aktifkan plugin ini pada situs wordpress Anda.

memasukkan kode ke dalam wordpress

Untuk memasukkan kode kedalam body, silahkan pasang kode live chat whatsapp yang sudah Anda dapatkan dari langkah di atas pada kolom “code to be added berofre the end of the page

Jangan lupa untuk menyimpan perubahan yang sudah dilakukan. Itu dia cara membuat live chat whatsapp pada wordpress. Jika ada yang masih kurang jelas dan ingin ditanyakan, jangan sungkan untuk meninggalkan pesan anda pada kolom komentar.

0 Komentar

Tinggalkan Balasan

Pin It on Pinterest

Share This