Komponen WhatsApp Button — Tombol Chat Langsung ke WA

Apa itu: Komponen tombol yang membuka percakapan WhatsApp baru ke nomor tertentu, lengkap dengan template pesan otomatis. Kapan pakai: Saat kamu ingin memberi calon pembeli cara cepat untuk menghubungi admin atau CS langsung dari landing page — sebelum, selama, atau sesudah mereka mempertimbangkan pembelian.

Apa itu WhatsApp Button?

WhatsApp Button adalah komponen tombol sederhana yang saat diklik akan membuka aplikasi WhatsApp (atau WhatsApp Web di desktop) dan langsung memulai percakapan baru ke nomor yang kamu tentukan. Kamu bisa menyiapkan template pesan default agar konteks percakapan langsung jelas sejak pesan pertama.

Komponen ini berbeda dari tool WA Chat Generator (Tutorial 61): WA Button didesain khusus untuk di-embed di dalam landing page sebagai bagian dari alur konversi, mendukung styling lengkap, dan bisa dikombinasikan dengan komponen lain. Tool 61 menghasilkan link WA standalone yang dibagikan di luar landing page.

Kapan Pakai WhatsApp Button?

Floating CTA di bawah hero section untuk pembeli yang langsung ingin tanya sebelum beli
"Chat Admin" di seksi FAQ sebagai alternatif kalau pertanyaan tidak terjawab di FAQ
Lead capture awal sebelum pembeli siap mengisi Order Form
After-sale support di halaman terima kasih untuk pertanyaan pasca pembelian
Produk high-ticket yang butuh human touch sebelum purchase decision

Properties

Property	Tipe	Default	Penjelasan
Button Text	Teks	`"Chat via WhatsApp"`	Label teks di dalam tombol
WhatsApp Number	Teks	—	Nomor tujuan WA (format `08...` atau `+62...`)
Message Template	Textarea	—	Pesan default yang langsung terisi saat WA dibuka
Size	Pilihan	`Medium`	Ukuran tombol: Small, Medium, Large
Full Width	Toggle	Off	Tombol mengisi lebar penuh container
Show WhatsApp Icon	Toggle	Aktif	Tampilkan icon logo WhatsApp di tombol
Icon Position	Pilihan	`Left`	Posisi icon: Left atau Right (hanya aktif kalau Show Icon On)
Background Color	Color picker	—	Warna background tombol (kosong = hijau WA default #25D366)
Text Color	Color picker	—	Warna teks tombol

WhatsApp Number — Format yang Diterima

Format	Contoh	Keterangan
Format lokal	`081234567890`	Awalan 08, tanpa spasi atau tanda baca
Format internasional	`+6281234567890`	Awalan +62, tanpa spasi atau tanda baca

⚠️Format Salah = Link Tidak Berfungsi

Jangan tambahkan spasi, tanda kurung, atau tanda hubung. 0812-3456-7890 dan (0812) 3456 7890 akan gagal. Gunakan hanya digit dan tanda + di awal kalau pakai format internasional.

Message Template

Template pesan yang akan langsung terisi di field chat WhatsApp saat tombol diklik. Pembeli masih bisa mengedit atau menghapus pesan ini sebelum dikirim.

Contoh template yang kontekstual:

Halo, saya tertarik dengan [Nama Produk]. Boleh saya tanya-tanya dulu?

Halo admin! Saya mau tanya soal [Nama Produk] sebelum order. Bisa bantu?

💡Template yang Kontekstual = CS yang Lebih Produktif

Tanpa template, pembeli hanya kirim "Halo" dan admin harus menebak-nebak dari mana mereka datang. Template yang menyebut nama produk membuat CS langsung tahu konteksnya dan bisa membalas lebih cepat dan relevan.

Size

Nilai	Padding	Cocok untuk
Small	Kecil, teks 14px	Disisipkan di dalam paragraf atau di seksi padat
Medium	Standar	Default untuk kebanyakan penggunaan
Large	Besar, teks 16–18px	CTA utama, hero section, atau ingin tampil dominan

Full Width

Saat Full Width diaktifkan, tombol akan mengisi lebar penuh container-nya. Berguna untuk:

Tampilan mobile yang ingin tombolnya mudah dijangkau jempol
CTA di bagian bawah halaman yang ingin terlihat mencolok

Show WhatsApp Icon & Icon Position

Icon logo WhatsApp (warna putih di atas background hijau) membantu pengguna langsung mengenali tombol ini akan membuka WhatsApp. Direkomendasikan untuk tetap diaktifkan.

Icon Position Left lebih umum dan natural untuk bahasa Indonesia (kiri ke kanan). Gunakan Right untuk variasi visual atau efek tertentu.

Background Color

Biarkan kosong untuk menggunakan warna hijau WhatsApp default (#25D366) — warna yang sudah sangat dikenal pengguna Indonesia. Override dengan warna brand hanya kalau ada alasan desain yang kuat, karena warna hijau WA sendiri sudah sangat efektif sebagai sinyal visual.

Style Universal

WhatsApp Button mendukung semua properti style umum (margin, padding, background, border, radius, shadow, hide on mobile/desktop, custom CSS). Lihat panduan lengkapnya di Style Universal.

Contoh Penggunaan

Contoh 1 — Floating CTA di Bawah Hero

Tombol Size Large terpusat (via Style > margin auto) tepat setelah hero section. Button Text "Chat Admin Sekarang", nomor WA lokal diisi di field WhatsApp Number, Message Template menyebut nama produk spesifik. Background Color dibiarkan kosong agar menggunakan hijau WA default (#25D366) yang sudah dikenali luas. Show WhatsApp Icon On, Icon Position Left.

Contoh 2 — "Chat Admin" di Seksi FAQ

Tombol Size Medium ditempatkan tepat di bawah list FAQ sebagai fallback bagi pengunjung yang pertanyaannya belum terjawab. Button Text "Masih ada pertanyaan? Chat kami", Message Template menyebut nama produk dan konteks bahwa ini dari FAQ — membantu admin langsung memahami kebutuhan tanpa harus tanya balik.

Contoh 3 — Lead Capture Mobile-First (Full Width)

Tombol Size Large dengan Full Width aktif, nomor WA format internasional (+6281234567890), Message Template menyebut nama produk dari iklan. Di layar HP, tombol mengisi penuh lebar layar sehingga mudah dijangkau jempol — konversi dari traffic mobile iklan jauh lebih tinggi dibanding tombol sempit di tengah.

Tips & Gotchas

💡Sebutkan Nama Produk di Template Pesan

Ini satu hal yang paling berdampak: tambahkan nama produk di template pesan. Kalau kamu punya beberapa landing page untuk produk berbeda yang semua mengarah ke nomor WA yang sama, admin langsung tahu produk mana yang ditanyakan tanpa harus tanya balik.

💡Test Tombol Sebelum Publish

Setelah setting nomor dan template, klik tombol dari mode preview untuk memastikan WA terbuka dengan nomor yang benar dan pesan sudah terisi. Jangan andalkan "harusnya benar" — test langsung.

⚠️Beda dengan WhatsApp Button di Order Form

Order Form punya field WhatsApp sendiri di bagian "On Payment Success" — itu untuk konfirmasi setelah pembayaran. Komponen WhatsApp Button ini adalah CTA independen yang bisa diletakkan di mana saja di halaman, terlepas dari alur checkout.

💡Jangan Berlebihan

Satu atau dua WhatsApp Button per halaman sudah cukup. Terlalu banyak tombol WA (mis. setiap seksi punya satu) bisa terlihat spam dan malah menurunkan kepercayaan. Letakkan di dua titik strategis: dekat hero untuk pembeli yang langsung tertarik, dan di dekat FAQ atau footer untuk pembeli yang masih ragu.

⚠️WhatsApp Business vs Personal

Pastikan nomor yang kamu masukkan adalah nomor yang aktif dan ada yang memantaunya. Kalau pembeli chat dan tidak dibalas dalam beberapa jam, mereka bisa kabur ke kompetitor. Gunakan WhatsApp Business untuk fitur quick reply dan away message.

Siap buat landing page pertamamu?