Banyak pemilik website yang kehilangan calon pelanggan hanya karena tidak ada tombol kontak yang mudah ditemukan. Pengunjung datang, melihat produk atau layanan, lalu pergi begitu saja karena bingung harus menghubungi ke mana.
Padahal solusinya sederhana: hubungkan website kamu dengan WhatsApp Business.
Dengan integrasi ini, pengunjung website bisa langsung menghubungi kamu hanya dengan satu klik. Tidak perlu copy-paste nomor. Tidak perlu mencari-cari tombol kontak. Langsung terhubung dalam hitungan detik.
Di artikel ini, saya akan tunjukkan cara menghubungkan website ke WhatsApp Business secara langkah demi langkah, lengkap dengan panduan gambar.
Mengapa Harus Menghubungkan Website dengan WhatsApp Business?
Sebelum masuk ke teknisnya, penting untuk memahami manfaatnya terlebih dahulu. Ini bukan sekadar fitur tambahan, tapi strategi yang langsung berdampak pada penjualan.
Berikut alasan kenapa integrasi ini penting:
- Respons lebih cepat: Pengunjung bisa langsung bertanya tanpa mengisi formulir panjang
- Konversi lebih tinggi: Tombol WhatsApp menurunkan hambatan untuk menghubungi kamu
- Terlihat profesional: Bisnis yang mudah dihubungi lebih dipercaya calon pelanggan
- Gratis dan mudah: Tidak membutuhkan plugin berbayar atau keahlian teknis tinggi
- Cocok untuk semua jenis bisnis: UMKM, freelancer, toko online, hingga jasa profesional
Persiapan Sebelum Mulai
Sebelum menghubungkan website ke WhatsApp Business, pastikan kamu sudah menyiapkan hal-hal berikut:
- Akun WhatsApp Business aktif di HP kamu
- Nomor WhatsApp yang digunakan untuk bisnis (sebaiknya bukan nomor pribadi)
- Akses ke dashboard atau backend website kamu
- Akun WhatsApp Business yang sudah diverifikasi (opsional, tapi lebih profesional)
Cara Membuat Tautan WhatsApp (WhatsApp Link)
Langkah pertama adalah membuat tautan atau link yang akan langsung membuka percakapan WhatsApp Business kamu.
Format Dasar WhatsApp Link
Format yang digunakan sangat sederhana:
https://wa.me/[nomor_telepon]
Contoh: Jika nomor WhatsApp Business kamu adalah 0812-3456-7890, maka formatnya menjadi:
https://wa.me/6281234567890
Perhatikan beberapa aturan penulisan nomor:
- Hilangkan angka 0 di depan, ganti dengan kode negara Indonesia yaitu 62
- Tidak perlu menambahkan tanda plus (+) di depan angka 62
- Tidak perlu menggunakan tanda hubung (-) atau spasi
Menambahkan Pesan Otomatis
Kamu juga bisa menambahkan pesan yang otomatis muncul saat pengunjung membuka WhatsApp. Ini sangat berguna agar percakapan langsung terarah.
Formatnya:
https://wa.me/6281234567890?text=Halo,%20saya%20ingin%20bertanya%20tentang%20produk%20Anda
Catatan: Setiap spasi diganti dengan %20, dan karakter khusus perlu di-encode terlebih dahulu. Kamu bisa menggunakan tools online seperti URL Encoder untuk membantu proses ini.
Cara Menambahkan Tombol WhatsApp di Website
Setelah link WhatsApp siap, langkah berikutnya adalah memasangnya di website. Ada beberapa cara yang bisa kamu pilih sesuai platform website yang digunakan.
Untuk Website WordPress
WordPress adalah platform website yang paling banyak digunakan. Di sinilah banyak pemula memulai perjalanan digital mereka. Kalau kamu belum punya website, kamu bisa belajar membuat website di PanduanBelajar.com sebelum lanjut ke langkah ini.
Langkah-langkah memasang tombol WhatsApp di WordPress:
- Login ke dashboard WordPress kamu di domain.com/wp-admin
- Masuk ke menu Appearance, lalu pilih Widgets atau Customize
- Pilih area tempat kamu ingin menampilkan tombol WhatsApp (misalnya di sidebar atau footer)
- Tambahkan widget Custom HTML
- Masukkan kode HTML tombol WhatsApp berikut:
<a href=”https://wa.me/6281234567890?text=Halo,%20saya%20ingin%20bertanya” target=”_blank” style=”background-color:#25D366; color:white; padding:12px 20px; border-radius:8px; text-decoration:none; font-weight:bold;”>💬 Chat via WhatsApp</a>
- Klik Simpan atau Publish
- Buka website kamu dan cek hasilnya
Selain cara manual di atas, WordPress juga menyediakan plugin khusus seperti WP Social Chat atau Click to Chat yang bisa membantu kamu menambahkan tombol WhatsApp dengan tampilan yang lebih menarik tanpa perlu coding.
Untuk Website dengan HTML Biasa (Non-WordPress)
Kalau website kamu dibuat dengan HTML murni atau menggunakan builder lain yang mengizinkan edit kode, caranya lebih langsung.
Langkah-langkahnya:
- Buka file HTML website kamu menggunakan text editor seperti VS Code atau Notepad++
- Temukan bagian body atau section yang ingin kamu tambahkan tombol
- Paste kode HTML tombol WhatsApp di posisi yang diinginkan
- Simpan file, lalu upload ke hosting kamu
- Refresh browser dan cek tampilan tombolnya
Kalau kamu belum familiar dengan cara kerja file HTML dan hosting, saya sangat menyarankan untuk belajar membuat website dari nol terlebih dahulu. Topik ini sudah dibahas lengkap di PanduanBelajar.com, termasuk cara mengelola file di hosting dan memahami struktur dasar website.
Cara Memasang Widget WhatsApp Mengambang (Floating Button)
Tombol WhatsApp yang mengambang di pojok layar (floating button) lebih efektif dibanding tombol biasa karena selalu terlihat di manapun pengunjung berada di halaman kamu.
H3: Menggunakan Kode CSS dan JavaScript
Berikut kode lengkap untuk floating button WhatsApp yang bisa langsung kamu gunakan:
Masukkan kode berikut tepat sebelum tag </body> di file HTML kamu:
<a href=”https://wa.me/6281234567890?text=Halo,%20saya%20ingin%20bertanya” target=”_blank” id=”wa-float” style=”position:fixed; bottom:20px; right:20px; background-color:#25D366; color:white; border-radius:50px; padding:14px 20px; font-size:16px; text-decoration:none; box-shadow:2px 2px 10px rgba(0,0,0,0.3); z-index:9999;”>💬 WhatsApp Kami</a>
Kode di atas akan membuat tombol yang:
- Selalu muncul di pojok kanan bawah layar
- Bisa diklik dari halaman mana pun di website
- Memiliki warna hijau khas WhatsApp
- Tampil di atas semua elemen lainnya
Menggunakan Plugin atau Widget Gratis
Jika kamu tidak ingin repot dengan kode, berikut beberapa tools gratis yang bisa digunakan:
- Tidio: Platform chat yang mendukung integrasi WhatsApp, cocok untuk toko online
- WATI Widget: Widget WhatsApp gratis yang mudah dipasang di berbagai platform
- Elfsight WhatsApp Chat: Widget dengan tampilan profesional dan bisa dicoba gratis
- WP Social Chat (khusus WordPress): Plugin ringan dan mudah dikonfigurasi
Mengatur WhatsApp Business agar Terlihat Profesional
Menghubungkan website ke WhatsApp Business saja tidak cukup. Kamu juga perlu memastikan akun WhatsApp Business kamu sudah diatur dengan baik.
Beberapa hal yang perlu diperhatikan:
- Foto profil: Gunakan logo bisnis atau foto profesional, bukan foto selfie
- Nama bisnis: Isi dengan nama bisnis yang sama dengan yang ada di website
- Deskripsi bisnis: Jelaskan secara singkat apa yang kamu jual atau tawarkan
- Jam operasional: Atur jam layanan agar pengunjung tahu kapan kamu bisa dihubungi
- Pesan otomatis: Aktifkan pesan sambutan dan pesan di luar jam kerja agar pengunjung tidak merasa diabaikan
- Katalog produk: Tambahkan katalog di WhatsApp Business agar calon pelanggan bisa melihat produk langsung dari chat
Tips Meningkatkan Konversi dari Tombol WhatsApp
Memasang tombol saja tidak otomatis meningkatkan penjualan. Kamu perlu memastikan tombol tersebut digunakan dengan strategi yang tepat.
- Tambahkan tombol WhatsApp di halaman produk atau layanan, bukan hanya di halaman utama
- Gunakan call-to-action yang spesifik seperti “Tanya Harga Sekarang” atau “Konsultasi Gratis via WhatsApp”
- Pastikan respons kamu cepat, idealnya di bawah 5 menit di jam kerja
- Gunakan pesan otomatis yang personal, bukan yang terkesan generik dan kaku
- Pantau dari mana pengunjung paling sering menghubungi kamu untuk mengoptimalkan penempatan tombol