Home » WhatsApp Tips » Cara Menambahkan WhatsApp Floating Button di Website

Cara Menambahkan WhatsApp Floating Button di Website

WhatsApp floating button adalah salah satu hal yang bermanfaat bagi bisnis, khususnya dalam aspek komunikasi. Sebab, hanya perlu satu klik di website untuk memulai percakapan di WA dengan agen CS.

Nah, agar Anda bisa menciptakan momen tersebut, simaklah langkah-langkah di sini untuk menambahkan tombol WA di website Anda.

Selain itu, artikel ini juga menyajikan manfaat WA floating button hingga tips untuk memaksimalkannya. Yuk, ikuti artikel ini hingga usai!

Apa Itu WhatsApp Floating Button?

WhatsApp floating button pada dasarnya tidak termasuk sebagai fitur WhatsApp. Secara ringkas, ini adalah fitur yang Anda sematkan pada website melalui koding.

Setelah koding diatur, maka di website Anda akan muncul tombol WA yang bisa langsung di-klik oleh customer. Setelah di-klik, customer akan tersambung dengan nomor WA Business Anda dan bisa langsung chatting, baik dengan agen CS maupun chatbot.

Menariknya, kemunculan WA floating button tidak akan terpengaruh oleh device yang digunakan customer. Sebab, tombol ini sifatnya melekat dengan website Anda. Jadi, sepanjang customer membuka website Anda, otomatis akan melihat tombol tersebut.

Manfaat WhatsApp Floating Button untuk Website Bisnis

Penyematan WhatsApp floating button pada website bisnis menimbulkan berbagai dampak positif sebagai berikut:

1. Meningkatkan Aksesibilitas

Pada dasarnya, customer selalu menginginkan kemudahan akses komunikasi, diikuti dengan respon yang cepat.

Dengan WA floating button, Anda memudahkan customer untuk menghubungi WA Business melalui website, tanpa harus berpindah device atau menyimpan kontak terlebih dahulu.

Ingat, WA adalah sarana komunikasi yang paling sering digunakan dalam keseharian customer. Oleh karena itu, menyediakan akses ke WA akan selalu menjadi opsi terbaik untuk customer.

2. Mempercepat Layanan Customer

Kemudahan yang diberikan oleh WA floating button kemudian mempercepat layanan Anda kepada customer. Tanpa perlu menunggu, customer bisa langsung tersambung dengan WA Business Anda.

Anda pun bisa segera memberikan informasi atau layanan yang diperlukan oleh customer. Dengan begitu, interaksi akan berjalan secara real-time dan customer tidak merasa membuang-membuang waktu.

3. Meningkatkan Engagement dan Konversi

Keberadaan WA floating button bisa meningkatkan engagement. Sebab, customer seringkali lebih tertarik untuk menghubungi via WA daripada email.

Bahkan, tombol WA juga mampu meningkatkan peluang konversi. Terlebih jika tombol tersebut dilengkapi dengan CTA yang muncul sepanjang waktu di website.

Agar semakin maksimal, Anda dapat memanfaatkan WhatsApp API resmi. Dengan begitu, setiap kali tombol WA di-klik oleh customer, Anda bisa mengatur flow lanjutan secara otomatis, tanpa harus membalas satu per satu secara manual.

4. Membangun Kedekatan dengan Customer

Obrolan di WA tentu berbeda dengan reply email. Jika email cenderung kaku atau formal, maka WA bisa lebih santai.

Nah, inilah manfaat lain dari penyematan tombol WA di website bisnis. Anda bisa membangun kedekatan dengan customer berkat chat real-time yang terjadi setelah tombol di-klik.

Chat di WA akan membuat customer lebih nyaman, sehingga Anda lebih leluasa dalam menanyakan kebutuhan dan hal-hal lain yang relevan.

3 Langkah untuk Menambahkan WhatsApp Floating Button di Website Anda

Ikuti langkah-langkah berikut untuk menambahkan WhatsApp floating button di website Anda:

1. Buat Link WhatsApp Business

Langkah pertama, Anda perlu membuat link menuju nomor bisnis Anda. Ikuti format berikut:

https://wa.me/<nomor WA Business>

Contoh: https://wa.me/08123456789

2. Sematkan Link WA Business dan Tombol HTML

[wa button-2] sematkan link WA ke dalam html code

Selanjutnya, sematkan link tersebut ke dalam body code seperti gambar di atas. Untuk mempermudah, silakan menyalin kode berikut:

Adapun penggunaan Wikimedia pada pengaturan di atas berfungsi sebagai resource desain tombol WA. Dengan menyalin kode di atas, Anda akan memperoleh icon WA dalam format SVG yang compatible untuk website.

3. Sematkan CSS untuk Floating Style

Langkah terakhir, atur agar tombol WA bisa “melayang” dan tidak statis. Dengan kata lain, posisi tombol akan berubah, mengikuti scroll customer di website. Saat customer scroll ke atas, maka tombol akan ikut ke atas dan begitu pula sebaliknya.

Saat pengaturan, tampilan akan seperti gambar di atas. Untuk mempermudah, silakan menyalin kode berikut:

.whatsapp-float {    position: fixed;    width: 60px;    height: 60px;    bottom: 20px;    right: 20px;    background-color: #25D366;    color: #fff;    border-radius: 50%;    text-align: center;    box-shadow: 0 2px 8px rgba(0,0,0,0.3);    z-index: 9999;    display: flex;    justify-content: center;    align-items: center;    transition: transform 0.3s;}
.whatsapp-float:hover {    transform: scale(1.1);}
.whatsapp-icon {    width: 35px;    height: 35px;}

6 Tips Untuk Memaksimalkan Potensi WhatsApp Floating Button di Website Bisnis Anda

Setelah menyematkan WhatsApp floating button ke dalam website, Anda bisa memaksimalkan performanya melalui berbagai tips berikut:

1. Gunakan Desain Tombol WA yang Mudah Dikenali

Pilih gambar atau icon yang paling relevan dengan WA. Untuk memudahkan, gunakan saja icon WA yang bisa Anda peroleh dari Wikimedia. Semakin mudah dikenali, maka semakin besar pula potensi customer untuk klik button tersebut.

2. Sematkan CTA

Agar semakin mendorong tindakan customer, tambahkan CTA. Jadi, tidak sekadar tombol saja yang muncul, melainkan dilengkapi oleh CTA. Contohnya, Anda bisa menyematkan kalimat “Hubungi kami” atau “Hubungi CS”.

3. Tempatkan Tombol WA pada Posisi yang Mudah Ditemukan

Aturlah agar WA floating button mudah ditemukan oleh customer. Contohnya, Anda bisa menempatkan button di sisi kanan atau kiri.

4. Pastikan Tombol WA Selalu Muncul

Jangan lupa untuk mengatur agar tombol WA selalu muncul. Dengan kata lain, sepanjang customer membuka website Anda, tombol ini akan tetap muncul dan tidak menghilang.

Nah, pengaturan floating style juga bisa memastikan agar tombol selalu terlihat dalam pandangan customer.

5. Integrasikan dengan ChatBot untuk Respon Otomatis

Anda bisa semakin mempermudah proses jika melakukan integrasi WA Business API. Sebab, Anda bisa mengatur chat flow berikut balasan otomatis (chatbot).

Dengan begitu, setiap kali customer berinteraksi melalui WA button, chat akan berjalan secara real-time dan tidak harus ditangani langsung oleh agen CS. Interaksi dengan agen CS hanya akan berlangsung jika customer memerlukan informasi atau layanan yang lebih spesifik.

6. Monitoring Rutin pada Interaksi WhatsApp Floating Button

Lakukan monitoring secara rutin untuk mengukur kinerja WA floating button. Anda dapat melihat seberapa sering tombol tersebut di-klik, berikut interaksi yang muncul berikutnya.

Dengan begitu, Anda bisa mengetahui tren kebutuhan customer yang klik button tersebut. Data ini tentunya akan sangat berguna untuk mengevaluasi layanan customer hingga menentukan strategi kampanye pemasaran.

Kesimpulan

WhatsApp floating button adalah opsi ideal untuk mempermudah interaksi customer dengan bisnis Anda. Tambahkan button di website, arahkan customer untuk klik, lalu interaksi real-time via WA akan berlangsung.

Langkahnya pun praktis, Anda hanya perlu menyalin kode yang tersedia di artikel ini. Lalu, ikuti juga berbagai tipsnya untuk memaksimalkan performa WA floating button.

Agar semakin lengkap, manfaatkanlah layanan WA Business API dari Jatis Mobile. Dengan WA API, Anda bisa menggunakan fitur chatbot, sehingga agen CS tidak harus membalas semua chat yang masuk. Customer tetap akan memperoleh informasi akurat berkat chat flow yang sudah Anda atur sebelumnya.

Nah, selain WA floating button, masih ada aspek lain dari WhatsApp yang sangat bermanfaat untuk bisnis Anda. Lebih jelasnya, yuk ikuti artikel bermanfaat lainnya dari Jatis Mobile!