Kalau pelanggan harus menyimpan nomormu dulu sebelum bisa bertanya, banyak yang menunda dan akhirnya pergi. Tombol WhatsApp menghilangkan langkah itu. Saat diklik, tombol langsung membuka percakapan ke nomor yang kamu tentukan, lengkap dengan pesan awal kalau kamu mengisinya.
Secara teknis tombol WhatsApp hanyalah sebuah tautan wa.me yang diberi tampilan tombol. Kabar baiknya, cara tercepat di WordPress tidak butuh plugin sama sekali. Blok bawaan editor sudah cukup untuk tombol di dalam konten, dan satu potong kode ringan cukup untuk tombol melayang yang selalu terlihat. Artikel ini menunjukkan keduanya langkah demi langkah, plus cara mengatur tampilan dan kecepatan agar tombol tetap nyaman dipakai di HP.
Bentuk link WhatsApp yang dipakai tombol
Semua tombol WhatsApp, mau yang statis maupun yang melayang, intinya sama. Sebuah link chat yang menunjuk ke nomor tujuan dalam format internasional, tanpa tanda plus, spasi, kurung, atau strip. Format yang salah membuat tombol gagal diam diam. Tombol terlihat normal, tapi saat diklik chat tidak terbuka atau nomor tidak dikenali. Karena itu format nomor adalah hal pertama yang harus benar sebelum mengurus tampilan tombol. Selalu tulis nomor diawali kode negara, misalnya 62 untuk Indonesia, lalu nomornya tanpa angka nol di depan. Contohnya nomor 0812-3456-7890 ditulis 6281234567890. (Format ini sesuai Pusat Bantuan WhatsApp, faq.whatsapp.com/5913398998672934, diakses 3 Okt 2026.)
| Bentuk link | Yang bisa diisi | Kapan memakainya | Catatan |
|---|---|---|---|
wa.me/6281234567890 | Nomor tujuan saja | Tombol kontak umum, footer, halaman kontak | Bentuk paling pendek dan paling umum dipakai |
wa.me/6281234567890?text=Halo | Nomor plus pesan awal | Halaman produk, harga, katalog, butuh konteks chat | Teks pesan wajib di-encode, spasi jadi %20 (faq.whatsapp.com/5913398998672934, diakses 3 Okt 2026) |
api.whatsapp.com/send?phone=6281234567890 | Nomor plus parameter send | Kasus lama atau template yang masih memakai bentuk ini | Keduanya membuka chat ke nomor yang sama; untuk tombol biasa wa.me sudah cukup |
Untuk tombol biasa, bentuk wa.me tanpa teks awal sudah cukup. Tambahkan pesan awal hanya saat konteksnya membantu, misalnya halaman harga atau katalog, supaya kamu tahu pelanggan datang dari halaman mana. Jangan menaruh informasi sensitif di pesan awal karena teks itu terlihat di URL. Kalau ragu soal perilaku parameter di perangkat tertentu, uji sendiri di HP dan desktop, lalu tulis kalimat konservatif di artikel final sesuai hasil ujimu.
Tombol di dalam konten atau tombol melayang
Dua penempatan ini menjawab kebutuhan berbeda, dan memilih yang salah membuat tombol sepi diklik atau malah mengganggu. Tombol di dalam konten duduk di antara paragraf, misalnya di bawah daftar harga, di samping alamat, atau di bawah galeri katalog. Pengunjung mengkliknya tepat saat membaca informasi yang memicu niat bertanya. Ini cocok untuk halaman seperti cara membuat landing page di WordPress, di mana ajakan bertindak harus muncul di titik yang pas, bukan mengambang terus. Kelebihannya sederhana. Tidak menambah elemen global, tidak menutupi apa pun, dan tidak butuh kode tambahan kalau memakai blok bawaan.
Tombol melayang menempel di sudut layar dan selalu terlihat walau halaman di-scroll. Ini cocok untuk halaman yang butuh satu pintu masuk kapan saja, misalnya beranda jasa, halaman produk, atau toko online seperti contoh website portofolio dengan WordPress yang pengunjungnya menjelajah banyak bagian sebelum bertanya. Kekurangannya, tombol yang sama tampil di semua halaman, termasuk yang tidak butuh, dan di HP bisa menutupi teks atau footer kalau posisinya tidak diatur. Aturannya praktis. Satu tombol melayang per situs sudah cukup, dan kalau halaman butuh konteks khusus, tambah tombol di dalam konten dengan pesan awal yang spesifik. Kalau butuh perbandingan fitur plugin sebelum memutuskan, baca plugin WhatsApp untuk WordPress, satu kalimat ini saja, selebihnya artikel ini tetap tanpa plugin.
Yang perlu disiapkan sebelum memasang
Persiapan tombol WhatsApp hanya lima menit, tapi menentukan apakah tombol langsung jalan atau bolak balik diperbaiki. Semua bahan di bawah ini harus jelas sebelum kamu membuka editor, karena mengubah nomor atau pesan awal setelah tombol tersebar di banyak halaman itu merepotkan. Pastikan juga kamu sudah tahu halaman mana yang butuh tombol di dalam konten dan mana yang cukup mengandalkan tombol melayang, supaya tidak memasang dua duanya di tempat yang sama.
- Siapkan nomor WhatsApp aktif yang memang menerima pesan pelanggan, dan pastikan aplikasinya bisa dibuka untuk uji klik dari HP dan desktop.
- Tulis nomor dalam format internasional tanpa tanda plus, misalnya 6281234567890, dan simpan format ini sebagai acuan tunggal untuk semua tombol.
- Tentukan sejak awal apakah memakai WhatsApp pribadi atau WhatsApp Business, karena jam balas dan profil yang tampil ke pelanggan berbeda.
- Tentukan halaman yang ditautkan dan pesan awal tiap tombol, misalnya halaman harga memakai pesan menanyakan paket, halaman katalog memakai pesan menanyakan stok.
- Jangan pakai nomor yang belum disimpan banyak kontak tanpa uji dulu, karena sebagian perangkat menampilkan peringatan atau gagal membuka chat saat aplikasi belum terpasang, jadi uji klik sebelum tombol diumumkan.
Pengguna WordPress pemula biasanya sudah punya semua bahan ini tanpa sadar. Kalau kamu masih meraba fitur bawaan editor, baca dulu plugin WordPress wajib untuk pemula supaya tahu mana yang memang bawaan dan mana yang baru butuh plugin.
Cara memasang tombol WhatsApp di website WordPress
Bagian ini mencapai satu hasil konkret. Tombol WhatsApp yang bisa diklik dan membuka chat ke nomormu, lewat tiga tahap berurutan. Pertama kamu memakai blok bawaan editor untuk tombol di dalam konten, yang paling ringan dan tanpa kode. Kedua kamu memasang tombol melayang dengan satu potong kode untuk situs non WordPress atau tema tanpa blok. Ketiga kamu mengisi pesan awal dan menguji tombolnya di HP dan desktop. Blok bawaan editor sudah cukup untuk kasus sederhana, jadi jangan pasang plugin dulu sebelum tiga tahap ini jalan.
1. Menambahkan blok WhatsApp bawaan di editor
Buka halaman atau pos di editor blok Gutenberg, tambahkan blok tombol atau blok WhatsApp bila temamu menyediakannya, lalu bungkus dalam blok Grup atau Kolom supaya mudah diatur alignment-nya. Isi URL tujuan dengan link wa.me yang sudah disiapkan, isi teks tombol dengan ajakan yang jelas seperti Chat WhatsApp, lalu atur alignment mengikuti layout konten. Blok bawaan lebih ringan daripada plugin karena tidak menambah script, stylesheet, atau permintaan jaringan tambahan. Ia hanya merender tautan biasa dengan gaya tombol tema, sehingga waktu muat halaman praktis tidak berubah dan tidak ada kode pihak ketiga yang perlu diperbarui.
2. Memasang tombol melayang tanpa plugin
Tombol melayang cocok untuk situs non WordPress atau tema yang tidak punya blok tombol. Prinsipnya satu tautan yang diposisikan tetap di sudut layar dengan sedikit CSS inline, dipasang satu kali per situs, bukan satu kali per halaman. Tempel kode di bawah lewat blok HTML kustom, widget footer, atau file template child theme di lokasi yang dimuat di semua halaman. Jangan menempelkannya di dalam isi artikel karena tombol akan duplikat setiap artikel memuat kode yang sama, dan jangan menaruhnya di file theme induk yang tertimpa saat update. Kode di bawah sudah lolos uji render headless (tautan fixed, href wa.me valid, area tap 44px); tetap uji klik di HP dan desktop sebelum publish.
<a href="https://wa.me/6281234567890?text=Halo%2C%20saya%20mau%20tanya" target="_blank" rel="noopener">Chat</a>3. Mengisi pesan awal dan menguji tombolnya
Pesan awal diambil dari parameter teks di link, misalnya ?text=Halo%2C%20saya%20mau%20tanya%20paket%20A, dengan spasi dan koma di-encode supaya tidak merusak URL. Sesudah dipasang, uji empat langkah ini sebelum mengumumkan tombol. Klik dari HP dengan aplikasi terpasang, klik dari desktop tanpa aplikasi, arahkan kursor ke tombol dan cek tujuan di status bar browser, lalu muat ulang halaman dan cek tombol tetap terlihat saat halaman belum selesai dimuat. Pastikan tombol tetap terlihat dan bisa diklik meski JavaScript gagal dimuat, karena tautan biasa tidak butuh JavaScript. Kalau di sebagian perangkat pesan awal terabaikan, itu perilaku perangkat, bukan salah kode, jadi tulis kalimat konservatif dan minta pengunjung mengetik ulang kebutuhannya. Uji di HP dan desktop milikmu sebelum mengumumkan tombol.
Menyesuaikan tampilan dan kecepatan tombol di HP
Di layar kecil, tombol yang di desktop terlihat manis bisa berubah jadi gangguan. Ia menutupi paragraf terakhir, menimpa tombol footer, atau terpotong notch HP. Sisi tampilan solusinya empat hal. Tambahkan ruang aman bawah memakai env(safe-area-inset-bottom) supaya tombol naik di atas gesture bar (MDN, developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/env, diakses 3 Okt 2026). Buat area tap minimal 44 piksel CSS mengikuti pedoman Apple HIG (developer.apple.com/design/human-interface-guidelines/layout), yang juga memenuhi batas minimum WCAG 2.5.8 sebesar 24 piksel dan level AAA 2.5.5 sebesar 44 piksel (w3.org/WAI/WCAG22/Understanding/target-size-minimum.html, diakses 3 Okt 2026). Atur z-index tombol di bawah menu navigasi tetapi di atas footer supaya tidak menutupi menu, dan beri jarak dari tepi supaya tombol tidak menutup teks.
Sisi kecepatan sama pentingnya. Tautan wa.me biasa menambah bobot hampir nol karena hanya sebuah link. Beban muncul saat tombol dimuat lewat script chat pihak ketiga atau ikon diambil dari CDN eksternal, yang menambah permintaan jaringan dan bisa menunda Largest Contentful Paint (web.dev/articles/lcp dan MDN img loading, developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/img, diakses 3 Okt 2026). Jangan pasang loading="lazy" pada gambar yang jadi kandidat LCP karena justru menunda render gambar utama. Tombol chat hanya terasa cepat kalau halamannya sendiri ringan, jadi kalau skor kecepatanmu merah, lihat paket cloud hosting yang lebih baru sebelum menambah script apa pun.
Kesimpulan
Untuk tombol di dalam konten, blok bawaan editor sudah cukup dan paling ringan. Untuk satu pintu masuk yang selalu terlihat, pakai tombol melayang dengan satu potong kode. Plugin baru perlu saat kebutuhan naik ke chat otomatis atau multiagen, bukan untuk sekadar tombol. Pola yang sama berlaku untuk titik kontak lain. Tombol chat yang konsisten di semua halaman memperkuat identitas, dan itu bagian dari kerja membangun brand awareness yang rapi. Kalau website-nya sendiri masih berat atau lambat dimuat, perbaiki fondasinya dulu dengan paket cloud hosting yang lebih cepat, atau tanya lewat WhatsApp Mordenhost di +62 851-7230-1406 dan lewat tiket dukungan bila sudah punya akun.
Pertanyaan yang sering diajukan
Empat jawaban singkat untuk pertanyaan yang paling sering masuk soal tombol WhatsApp di website. Setiap jawaban berdiri sendiri, jadi bisa dibaca langsung tanpa mengulang seluruh artikel. Kalau butuh penjelasan panjangnya, kembali ke bagian terkait di atas.
Apakah tombol WhatsApp menambah berat halaman?
Hanya kalau dimuat lewat script pihak ketiga. Tautan wa.me biasa menambah bobot hampir nol.
Kenapa tombol melayang menutupi sebagian isi halaman di HP?
Karena posisinya menumpuk di lapisan atas. Perbaiki dengan margin aman, z-index yang benar, dan area tap cukup besar.
Apakah harus memasang plugin WhatsApp?
Tidak untuk kasus sederhana, blok bawaan editor sudah cukup. Plugin baru perlu untuk chat otomatis atau multiagen.
Bagaimana cara memastikan pesan awal ikut terkirim?
Teks awal diambil dari parameter teks di link. Uji ulang di tiap perangkat karena sebagian mengabaikannya.
