Pernah nggak sih kamu lihat tombol WhatsApp melayang di pojok kanan bawah website, yang kalau diklik langsung buka chat ke nomor admin atau CS? Nah, itu namanya floating WhatsApp chat. Fitur ini sekarang udah kayak “wajib punya” buat website bisnis, toko online, sampai blog pribadi yang pengin lebih dekat dengan pengunjung.
Dalam artikel ini, kita bakal bahas tuntas cara membuat floating WhatsApp chat atau form kontak simpel yang bisa langsung nyambung ke WA kamu. Gak ribet, gak perlu plugin mahal, cukup modal niat dan sedikit sentuhan HTML + CSS + JavaScript. Yuk kita gas!
Kenapa Perlu Floating WhatsApp Chat?
Sebelum masuk ke teknis cara membuat floating WhatsApp chat, kita bahas dulu fungsinya ya.
-
Mempermudah komunikasi: Pengunjung gak perlu ribet cari-cari nomor kamu. Tinggal klik, langsung chat.
-
Ningkatin konversi: Kalau kamu jualan, makin cepat orang tanya, makin besar peluang closing.
-
Bikin website lebih interaktif dan profesional: Tombol melayang itu bukan cuma keren, tapi juga fungsional.
Cara Membuat Floating WhatsApp Chat
Kita bakal bikin tombol WhatsApp melayang yang selalu muncul di pojok kanan bawah layar. Kalau diklik, langsung menuju ke chat WhatsApp dengan format pesan otomatis. Simpel tapi efektif.
1. Siapkan Link WhatsApp
Sebelum bikin tombolnya, pastikan kamu punya link WhatsApp dengan format berikut:
Ganti 62XXXXXXXXXX dengan nomor WhatsApp kamu. Misalnya:
Link ini nanti kita sematkan ke tombol floating-nya.
2. Buat Tombol HTML-nya
Tambahkan kode HTML berikut di bagian <body> website kamu:
Kamu juga bisa ganti icon-nya sesuai selera atau pakai font-awesome kalau lebih suka vector.
3. Tambahkan CSS-nya
Nah, biar tombolnya bisa “melayang”, tambahkan kode CSS ini:
Tombol ini akan selalu berada di pojok kanan bawah, gak peduli seberapa panjang halamanmu.
4. Tambahkan Efek Lebih (Opsional)
Biar lebih kece, kamu bisa tambahin animasi saat tombolnya muncul:
Dengan efek ini, tombolmu akan “melambai-lambai” manja memanggil pengunjung buat klik.
5. Uji Coba dan Selesai
Sekarang tinggal kamu coba buka websitemu dan lihat apakah tombol floating WhatsApp udah muncul dan berfungsi. Kalau ya, berarti misi berhasil!
Tips Tambahan
Kalau kamu pengin lebih kompleks, misalnya pengunjung bisa pilih divisi (admin, sales, CS), kamu bisa kembangkan pakai popup form sederhana yang mengarahkan ke nomor berbeda. Tapi untuk permulaan, cara membuat floating WhatsApp chat yang barusan kita bahas udah cukup banget.
Manfaatkan Floating Chat untuk Bisnis
Jangan remehkan kekuatan komunikasi instan. Pengunjung yang awalnya cuma scroll-scroll bisa berubah jadi pembeli cuma karena kamu kasih akses cepat lewat WhatsApp. Dan enaknya lagi, mereka gak perlu install apa-apa, karena WhatsApp udah jadi aplikasi sejuta umat.
Dengan memahami cara membuat floating WhatsApp chat, kamu udah selangkah lebih dekat ke pengalaman pengguna yang lebih nyaman.
Oke bro dan sis, itu tadi tutorial santai tapi manjur tentang cara membuat floating WhatsApp chat di website. Gak perlu ribet, cukup modal kode sederhana dan sedikit gaya, websitemu udah punya fitur yang siap mempermudah komunikasi.
Jangan lupa, cara membuat floating WhatsApp chat ini cocok diterapkan di berbagai jenis website, dari toko online, blog pribadi, sampai landing page produk. Mau tampil profesional? Ya, ini salah satu cara paling gampang!
Kalau kamu udah coba dan berhasil, boleh dong sharing link-nya. Siapa tahu bisa jadi inspirasi buat yang lain. Dan kalau kamu punya versi custom, tambahin juga fitur-fitur keren kayak auto-responder atau jam kerja. Tapi intinya, sekarang kamu udah paham dasar-dasarnya.
Selamat mencoba dan semoga berhasil bikin websitemu makin interaktif dengan cara membuat floating WhatsApp chat yang keren dan fungsional!
