5 mins read

Cara Menambahkan WhatsApp Floating Button di Website

Tayang
Cara Menambahkan WhatsApp Floating Button di Website
Mekari Qontak Highlights
  • Manfaat WhatsApp Floating Button pada website diantaranya mempermudah komunikasi, mempercepat respon pelanggan, hingga meningkatkan engagement dan konversi.
  • Cara membuat WhatsApp Floating Button dimulai dari menambahkan tombol dengan link WhatsApp di HTML, mengatur desain dan posisi dengan CSS, hingga menambahkan interaksi tambahan menggunakan JavaScript.
  • Tips dan trik memaksimalkan WhatsApp Floating Button yakni dengan menggunakan desain yang jelas, tambahkan CTA menarik, tempatkan tombol di posisi strategis, integrasikan dengan chatbot, dan monitoring.

Popularitas WhatsApp sebagai media komunikasi tidak perlu diragukan lagi. Bukan hanya untuk kebutuhan pribadi, kini sejumlah bisnis memanfaatkan WhatsApp untuk berinteraksi dengan pelanggan mereka. Bahkan sebagian dari mereka memilih menghubungkan WhatsApp dengan website bisnis melalui floating button.

Pelanggan yang berasal dari website bisnis bisa menekan floating button untuk terhubung langsung dengan agen CS lewat aplikasi WhatsApp. Kemudian pelanggan bisa berinteraksi normal layaknya percakapan di WhatsApp.

Dalam sebuah laporan your business number mengungkapkan bahwa perusahaan yang menggunakan WhatsApp Business mampu merespon pelanggan 225% lebih cepat, serta 27% penjualan meningkat dengan jumlah konversi meningkat sebesar 20% secara keseluruhan.

Berdasarkan laporan tersebut, menghubungkan situs web dengan WhatsApp melalui floating button membuka kesempatan bisnis meningkatkan penjualan. Yuk, pelajari cara membuat floating button pada Mekari Qontak blog berikut.


Manfaat WhatsApp Floating Button pada Website Bisnis

Seperti yang dijelaskan sebelumnya, kehadiran floating button memudahkan pelanggan untuk berkomunikasi dengan bisnis. Hal tersebut juga mendatangkan sejumlah keuntungan pada bisnis, seperti berikut:

1. Meningkatkan Aksesibilitas

Keuntungan yang bisnis dapatkan adalah kemudahan komunikasi dengan pelanggan. Pelanggan hanya mengklik floating button, kemudian langsung terhubung via WhatsApp. Hal tersebut tanpa perlu pelanggan mengisi formulir atau memasukkan nomor telepon.

Selain itu, sebagian besar pelanggan lebih nyaman untuk berkomunikasi melalui pesan instan daripada email atau panggilan telepon. Hal ini salah satu alasan yang membuat pengguna WhatsApp mencapai 2 miliar.

2. Mempercepat Layanan Pelanggan

Keuntungan selanjutnya, berkomunikasi melalui WhatsApp melalui floating button memumungkinkan bisnis untuk memberikan respon lebih cepat kepada pelanggan. Hal tersebut berkat fitur-fitur yang WhatsApp tawarkan bisa membalas pesan otomatis.

Disisi lain, pelanggan juga lebih cepat dalam merespon pesan WhatsApp. Sebuah riset menyebutkan bahwa open rate WhatsApp mencapai 98%. Fakta tersebut menunjukkan kemungkinan pelanggan untuk melihat, berinteraksi, dan mengklik pesan WhatsApp relatif besar.

3. Meningkatkan Engagement dan Konversi

Selain respon yang cepat, menyediakan floating button WhatsApp meningkatkan peluang untuk konversi. Tombol WhatsApp pada website berperan sebagai call to action (CTA) yang mendorong pengunjung untuk berinteraksi.

Selain tombol yang umumnya berupa logo WhatsApp, bisnis bisa juga menyisipkan kalimat CTA. Usahakan kalimat tersebut bisa muncul sepanjang waktu pada website.

4. Membangun Hubungan Pelanggan yang lebih Personal

Terakhir, floating WhatsApp bisa dimanfaatkan untuk menjalin kedekatan dengan pelanggan. Buatlah tombol obrolan WhatsApp terlihat menyatu secara organik dengan situs web bisnis. Oleh karena itu, pastikan widget tidak bertentangan dengan dengan elemen-elemen lain dari website.

Selain dari segi desain tombol, WhatsApp dianggap sebagai orang sebagai media komunikasi informal yang tidak mengikat. Hal ini membuat penggunanya merasa lebih nyaman dalam berdialog, tanpa takut membuat kesalahan. Kelebihan WhatsApp tersebut coba bisnis manfaatkan untuk menjalin komunikasi lebih personal dengan pelanggan.


Cara Membuat WhatsApp Floating Button

Melihat keuntungan di atas, mungkin Anda penasaran bagaimana cara untuk membuat WhatsApp floating button. Ikuti langkah-langkah berikut untuk membuat tombol WhatsApp floating di situs web atau aplikasi:

1. Tambahkan Tombol WhatsApp pada Halaman HTML

Cara Membuat WhatsApp Floating Button_Tambah tombol HTML

Langkah pertama yang perlu dilakukan adalah menggunakan beberapa ikon dan kode untuk membuat tombol WhatsApp. Pastikan Anda mengganti whatsapp-icon.png dengan nama dan lokasi file gambar tombol WhatsApp yang sesuai.

Selanjutnya, masukkan nomor akun WhatsApp Business Anda dalam format URL. Agar lebih mudah, gunakan format https://wa.me/nomor WhatsApp. Format nomor telepon yang digunakan adalah Internasional dengan menghilangkan semua nol, kurung, atau tanda hubung.

Sebagai contoh gunakan: https://wa.me/62391726479 bukan:https://wa.me/+62-(391)726479

Setelah itu, buat pesan pada tautan yang akan Anda gunakan. Pesan tersebut akan otomatis muncul di bidang percakapan.

Misalnya:
https://wa.me/1XXXXXXXXXXtext=Saya%20berminat%20berlangganan%20Mekari%20Qontak%20selama%20setahun

2. Style the Button

Cara Membuat WhatsApp Floating Button_Stylist

Tahapan selanjutnya, Anda bisa mendesain tampilan WhatsApp floating button terlihat menyatu dengan tampilan website bisnis. Hal tersebut bisa dimulai dengan mengatur tata letaknya (styling). Kemudian Anda bisa membuat desain tombol sesuai keinginan dengan menggunakan CSS dan/atau JavaScript.

Sementara itu, jika ingin mengubah posisi tombol, Anda dapat mengatur properti position, bottom, dan right pada CSS sesuai kebutuhan. Pastikan tombol tersebut mudah ditemukan oleh pengguna dan tidak mengganggu pengalaman pengguna pada situs web atau aplikasi Anda.

Bagian yang paling penting adalah memastikan bahwa tombol tersebut mengarahkan pelanggan ke tautan WhatsApp Anda. Hal tersebut menunjukkan floating button berfungsi sempurna.

3. Tambahkan Interaksi dengan JavaScript

Cara Membuat WhatsApp Floating Button_Tambahkan Interaksi javascript

Setelah mengikuti langkah-langkah di atas, Anda harus memiliki tombol WhatsApp floating yang berfungsi di situs web atau aplikasi Anda. Jika diperlukan Anda bisa menambahkan interaksi dengan JavaScript. Misalnya Anda ingin menampilkan pesan saat tombol diklik.


Tips dan Trik Memaksimalkan Fungsi WhatsApp Floating Button

Setelah berhasil membuat WhatsApp floating button, maka Anda perlu mencari cara agar tombol tersebut mendatangkan banyak interaksi pelanggan. Coba ikuti langkah berikut untuk meningkatkan keterlibatan pelanggan:

  1. Gunakan desain tombol WhatsApp yang mudah dikenali oleh pelanggan
  2. Sisipkan pesan yang mendorong pelanggan untuk berinteraksi
  3. Tempatkan tombol WhatsApp pada posisi yang mudah ditemukan
  4. Pastikan tombol WhatsApp muncul setiap waktu
  5. Integrasikan dengan chatbot WhatsApp yang akan menjawab pesan pelanggan secara otomatis
  6. Upayakan untuk selalu monitoring interaksi yang terjadi pada WhatsApp floating button

Demikianlah cara membuat dan menggunakan WhatsApp floating button pada website bisnis. Tombol WhatsApp ini berfungsi untuk menjalin interaksi dengan pelanggan lebih nyaman. Dengan begitu, diharapkan pelanggan mau untuk bertransaksi dengan bisnis.

Selain menggunakan cara membuat floating button diatas, Anda bisa lebih mudah menghubungkan WhatsApp dengan website menggunakan Link Genertaor. Melalui tools ini, Anda cukup mengetikkan nomor telepon dan menambahkan pesan selamat datang yang akan dikirimkan pengguna kepada Anda.

Mekari Qontak menyediakan WhatsApp link geneator yang bisa Anda gunakan secara gratis. Kemudian Anda tinggal menghubungkan WhatsApp dan situs web dengan link tersebut. Maka ketika seseorang menekan link tersebut, WhatsApp akan terbuka dengan nomor Anda, siap untuk mengobrol.

Yuk, Coba Gratis Link Generator WhatsApp atau konsultasikan kebutuhan bisnis Anda dengan klik di sini.

Kategori : WhatsApp

Pertanyaan yang Sering Diajukan Tentang WhatsApp Floating Button (FAQ)

Apakah penggunaan WhatsApp Floating Button mempengaruhi kecepatan loading website?

Apakah penggunaan WhatsApp Floating Button mempengaruhi kecepatan loading website?

Secara umum tidak signifikan, selama implementasi kode ringan. Namun, penggunaan script tambahan yang berlebihan bisa berdampak pada performa, sehingga perlu dioptimalkan.

Bagaimana cara melacak performa dari WhatsApp Floating Button?

Bagaimana cara melacak performa dari WhatsApp Floating Button?

Anda bisa menggunakan tools seperti Google Analytics (event tracking) atau dashboard CRM untuk memantau jumlah klik, interaksi, hingga konversi yang berasal dari tombol tersebut.

Apakah WhatsApp Floating Button efektif untuk semua jenis bisnis?

Apakah WhatsApp Floating Button efektif untuk semua jenis bisnis?

Umumnya efektif untuk bisnis yang membutuhkan komunikasi cepat seperti e-commerce, jasa, dan layanan pelanggan, namun efektivitasnya tetap bergantung pada strategi komunikasi yang digunakan.

Apakah tombol WhatsApp bisa disesuaikan tampilannya di perangkat mobile dan desktop?

Apakah tombol WhatsApp bisa disesuaikan tampilannya di perangkat mobile dan desktop?

Bisa. Anda dapat menggunakan CSS responsive design untuk mengatur ukuran, posisi, atau bahkan menampilkan versi tombol yang berbeda sesuai perangkat pengguna.

Kapan waktu terbaik menampilkan WhatsApp Floating Button di website?

Kapan waktu terbaik menampilkan WhatsApp Floating Button di website?

Waktu terbaik adalah saat pengunjung sudah menunjukkan minat, misalnya setelah beberapa detik berada di halaman atau saat scroll tertentu, agar tidak terasa mengganggu.