Cara Memasang Tombol WhatsApp di Website

Cara memasang tombol WhatsApp di website dengan link wa.me dan HTML sederhana, plus tips posisi, pesan otomatis, dan kapan sebaiknya memakai live chat.

Cara memasang tombol WhatsApp di website paling sederhana adalah membuat tautan wa.me dengan nomor bisnis Anda, lalu memasangnya sebagai tombol mengambang di pojok halaman. Saat pengunjung mengklik, aplikasi WhatsApp terbuka dengan pesan yang sudah terisi. Tidak perlu plugin atau biaya tambahan.

Berikut langkah teknisnya, beserta cara membuat tombol ini benar-benar menghasilkan percakapan.

Langkah 1: Buat link WhatsApp

Format dasarnya:

https://wa.me/6281234567890

Aturan nomor:

• Awali dengan kode negara 62, tanpa tanda plus.
• Hapus angka 0 di depan nomor.
• Jangan ada spasi, tanda strip, atau kurung.

Untuk menambahkan pesan otomatis, tambahkan parameter text:

https://wa.me/6281234567890?text=Halo%2C%20saya%20mau%20tanya%20produk

Spasi diganti %20 dan koma %2C. Penjelasan lebih lengkap tentang variasinya ada di link wa.me untuk bisnis.

Langkah 2: Pasang tombol di website

Website HTML biasa

Tempelkan kode berikut sebelum tag </body>:

<a href="https://wa.me/6281234567890?text=Halo%2C%20saya%20mau%20tanya"
   class="wa-float" target="_blank" rel="noopener"
   aria-label="Chat via WhatsApp">
  Chat WhatsApp
</a>
<style>
  .wa-float {
    position: fixed; right: 20px; bottom: 20px; z-index: 999;
    background: #25D366; color: #fff; padding: 12px 18px;
    border-radius: 999px; font-weight: 600; text-decoration: none;
    box-shadow: 0 4px 12px rgba(0,0,0,.15);
  }
</style>

Atribut aria-label membantu pembaca layar memahami fungsi tombol.

WordPress

1. Masuk ke Tampilan > Widget atau editor tema.
2. Tambahkan blok HTML Khusus di area footer.
3. Tempel kode di atas, lalu simpan.

Jika tema Anda tidak menyediakan area footer, gunakan fitur kode tambahan di pengaturan tema. Plugin tombol WhatsApp juga tersedia, tetapi tidak wajib.

Website builder dan toko online

Kebanyakan website builder menyediakan elemen tombol atau kode kustom. Masukkan link wa.me ke elemen tombol, atau tempel kode HTML di bagian kode kustom.

Langkah 3: Tentukan posisi dan teks

Posisi yang umum dan efektif:

Posisi	Kelebihan	Catatan
Tombol mengambang kanan bawah	Selalu terlihat	Jangan menutupi tombol checkout di mobile
Halaman produk dekat harga	Muncul saat pengunjung sedang menimbang	Isi pesan otomatis dengan nama produk
Halaman kontak	Wajar untuk yang mencari kontak	Tambahkan jam layanan
Header	Mudah dilihat	Bisa terasa ramai di layar kecil

Untuk teks tombol, “Tanya via WhatsApp” atau “Chat Admin” lebih jelas daripada hanya ikon.

Langkah 4: Buat pesan otomatis yang berguna

Pesan “Halo” saja membuat admin harus bertanya ulang. Buat pesan sesuai halaman:

• Halaman produk: “Halo, saya mau tanya Gamis Rayon Hijau Sage ukuran L masih ada?”
• Halaman layanan: “Halo, saya ingin konsultasi paket foto prewedding.”
• Halaman promo: “Halo, saya mau ikut promo Ramadan.”

Dengan begitu admin langsung tahu konteks, dan Anda bisa melihat halaman mana yang paling banyak menghasilkan chat.

Kekurangan tombol WhatsApp

Tombol WhatsApp mudah dan murah, tetapi ada batasannya:

• Pengunjung keluar dari website. Di desktop, mereka harus membuka WhatsApp Web atau aplikasi.
• Tidak semua orang mau memberi nomor. Sebagian pengunjung hanya ingin bertanya cepat tanpa terhubung dengan nomor pribadinya.
• Tidak ada jawaban instan di luar jam kerja, kecuali Anda memakai pesan otomatis.
• Sulit dilacak. Anda tidak tahu berapa yang klik tetapi tidak jadi mengirim pesan.
• Satu nomor untuk banyak admin terbatas di aplikasi WhatsApp Business biasa.

Kapan memakai live chat website

Live chat memungkinkan pengunjung bertanya langsung di halaman tanpa berpindah aplikasi. Ini cocok jika pengunjung banyak membuka dari desktop, Anda ingin menjawab instan dengan agen AI, atau beberapa admin perlu membalas bersamaan. Perbandingannya dibahas di live chat vs WhatsApp.

Banyak bisnis memakai keduanya: live chat untuk pertanyaan cepat di website, WhatsApp untuk pelanggan yang lebih nyaman di ponsel. Di chatagent.id, live chat website dengan agen AI berbahasa Indonesia sudah bisa dipakai, sedangkan integrasi WhatsApp ke inbox yang sama masih coming soon. Cara pemasangannya ada di cara memasang live chat di website.

Melacak klik tombol WhatsApp

Agar tahu apakah tombol bekerja, ukur jumlah klik. Cara paling sederhana adalah membuat pesan otomatis berbeda untuk setiap halaman, lalu menghitung berapa chat yang masuk dengan kalimat tersebut. Misalnya pesan dari halaman produk diawali “Halo, saya lihat di website”, sedangkan dari halaman promo diawali “Halo, saya mau ikut promo”.

Jika website Anda memakai alat analitik, Anda juga bisa mencatat klik pada tombol sebagai peristiwa. Bandingkan jumlah klik dengan jumlah chat yang benar-benar masuk. Selisih yang besar menandakan banyak pengunjung batal setelah aplikasi WhatsApp terbuka, misalnya karena mereka sedang memakai laptop kantor.

Kombinasi dengan jam layanan

Tampilkan jam layanan di dekat tombol, misalnya “Dibalas 08.00-21.00”. Pengunjung yang chat di luar jam itu tidak merasa diabaikan, dan Anda bisa menyiapkan pesan otomatis WhatsApp Business yang menyebutkan kapan mereka akan dibalas. Panduannya ada di artikel pesan otomatis WhatsApp Business.

Kesalahan umum saat memasang tombol

• Tombol terlalu besar dan menutupi konten atau tombol beli di layar ponsel.
• Nomor yang dipasang adalah nomor pribadi pemilik, bukan nomor bisnis.
• Tidak ada pesan otomatis, sehingga admin menerima ratusan chat “Halo” tanpa konteks.
• Tombol dipasang di semua halaman, termasuk halaman yang tidak relevan seperti kebijakan privasi.
• Lupa memperbarui tautan saat nomor bisnis berganti.

Periksa ulang tombol setiap kali ada perubahan tema atau desain website, karena kode tambahan kadang hilang setelah pembaruan.

Checklist sebelum publikasi

1. Uji klik tombol di ponsel Android, iPhone, dan desktop.
2. Pastikan nomor benar dan aktif di WhatsApp Business.
3. Cek tombol tidak menutupi elemen penting di layar kecil.
4. Siapkan pesan sapaan otomatis dan pesan di luar jam kerja di WhatsApp Business.
5. Pastikan ada admin yang siap membalas di jam yang Anda tampilkan.

Tombol yang mengarah ke nomor yang lambat membalas justru lebih merugikan daripada tidak ada tombol sama sekali.

Pertanyaan yang sering diajukan

Bagaimana cara membuat link WhatsApp untuk tombol website?

Gunakan format https://wa.me/62812xxxxxxx dengan nomor diawali kode negara 62 tanpa angka 0 di depan. Tambahkan ?text= diikuti pesan yang sudah di-encode untuk mengisi pesan otomatis.

Apakah perlu plugin untuk memasang tombol WhatsApp di WordPress?

Tidak wajib. Anda bisa menambahkan potongan HTML dan CSS sederhana lewat widget atau tema. Plugin hanya mempermudah jika Anda tidak ingin menyentuh kode.

Kenapa tombol WhatsApp di website tidak bisa dibuka?

Biasanya karena format nomor salah, misalnya masih diawali 0 atau ada spasi dan tanda strip. Pastikan nomor hanya angka dan diawali 62.