Bagaimana cara Menambahkan Tombol Chat WhatsApp ke WordPress (3 Free Ways, 2026)
Situs WordPress Anda adalah hidup dan lalu lintas akan datang - dan kemudian apa? Kebanyakan pengunjung mendarat, membaca, dan meninggalkan tanpa cara mudah untuk mengajukan pertanyaan. Tombol obrolan WhatsApp akan memperbaikinya pada sore hari: satu ketukan membuka percakapan dengan nomor Anda di aplikasi yang sudah dipakai pelanggan Anda. Posting ini menunjukkan tiga cara bebas untuk menambahkan satu di 2026 - link wa.me biasa (dengan snippet mengambang opsional), sebuah plugin percakapan, atau pembangun halaman Anda - dan di mana masing-masing berhenti, jadi Anda tahu kapan harus beralih ke WhatsApp Business API sebagai gantinya. The Tech Pad adalah platform WhatsApp Business di Meta 's resmi Cloud API dengan 26 koneksi bebas WordPress dan sebuah inbox tim bersama, dan mengambil alih tepat di mana tombol obrolan berakhir. bulan pertama Anda gratis ketika Anda mulai, dan setiap bisnis yang Anda merujuk yang menandatangani dan menghubungkan nomor WhatsApp memberikan Anda satu bulan bebas - sampai 5 bulan lagi bulan bebas - sampai 6 bulan total gratis.
Tombol obrolan WhatsApp sebenarnya
Tombol obrolan adalah sebuah link. Di belakang gelembung hijau adalah URL dalam salah satu dari dua bentuk: https://wa.me/<countrycode><number> atau https://api.whatsapp.com/send?phone=<number>Ketika pengunjung mengetuskannya, perangkat mereka membuka WhatsApp - aplikasi pada ponsel, atau web.whatsapp.com pada peramban desktop tanpa aplikasi - dengan percakapan ke nomor Anda sudah dimulai.
Itulah keseluruhan trik, dan itu penting karena apa yang tombol tidak tidak lakukan: itu tidak mengirim apa-apa dari situs Anda. Pengunjung jenis pesan pertama, sehingga selalu inbound, selalu memilih di, dan bebas. Percakapan ini hidup di aplikasi WhatsApp milik pelanggan, bukan di server Anda. Tak ada API, tak ada persetujuan, tak ada biaya masuk.
Tiga cara untuk menambahkan tombol: dibandingkan
Ketiga metode di bawah ini bebas untuk memulai. Perbedaan dalam berapa banyak kontrol yang Anda inginkan atas penempatan, menargetkan, dan pelacakan.
| Metode | Waktu pengaturan | Butuh plugin? | Mengambang? | Target perangkat | Pelacakan klik | Biaya |
|---|---|---|---|---|---|---|
| link w.me (Tombol blok, menu, widget) | ~ 5 menit | Tidak | Hanya dengan CSS gubahan | Tidak | Manual (acara GA4) | Bebas |
| Plugin widget obrolan (Joinchat, Chaty, App Percakapan WP) | 10-15 menit | Ya | Ya | Seringkali termasuk | Biasanya dibangun di | Tier bebas; dibayar untuk tambahan |
| Blokir Ambatan Ambatan / Gutenberg | ~ 10 menit | Tidak (pembangun) | Ya (Elementor) | Sebagian | Manual (acara GA4) | Bebas |
Metode 1: sebuah link wa.me tanpa plugin
Format wa.me/<countrycode><number>?text=<urlencoded-message>Untuk nomor India, yang terlihat seperti:
https://wa.me/919876543210?text=Hi%2C%20I%20have%20a%20question
Gunakan kode negara tanpa + atau spasi - 91 untuk India, 1 untuk AS. The text parameter pre- mengisi pesan pertama pengunjung; spasi harus berupa URL- terkode (%20) dan tanda baca juga (%2C untuk koma). Jika Anda membangun tautan dalam JavaScript, encodeURIComponent() menangani ini untuk Anda.
Anda dapat menempatkan link ini di mana saja WordPress menerima sebuah link:
- Blok tombol di penyunting Gutenberg, terkait dengan URL w.me.
- Butir menu Navigasi - Tambahkan sebagai Tautan Kustom.
- Widget kaki atau batang sisi - sebuah widget HTML teks atau gubahan.
- Tombol pecahan lengket - tempelkan snippet di bawah ini ke CSS Tambahan Pelanggan ditambah widget HTML Gubahan di footer Anda. Ini pin tombol ke sudut kanan bawah dengan aman z-indeks dan target tap 48px, ukuran minimum nyaman untuk mobile jempol.
<a class="wa-float" href="https://wa.me/919876543210?text=Hi%2C%20I%20have%20a%20question" target="_blank" rel="noopener">Chat on WhatsApp</a>
<style>
.wa-float {
position: fixed; bottom: 20px; right: 20px; z-index: 9999;
background: #25D366; color: #ffffff; padding: 12px 20px;
border-radius: 40px; min-height: 48px; display: inline-flex;
align-items: center; text-decoration: none; font-weight: 600;
box-shadow: 0 2px 10px rgba(0,0,0,0.25);
}
.wa-float:hover { background: #1fb457; }
</style>
Uji link selesai pada telepon asli sebelum menerbitkan, dan pada desktop juga - tanpa aplikasi WhatsApp yang terpasang, wa.me jatuh kembali ke web.whatsapp.com, yang bekerja selama teks pra-filled bertahan. Simpan pesan yang sudah diisi ke satu baris; teks yang sangat panjang akan dipotong pada beberapa perangkat.
Metode 2: sebuah plugin widget obrolan
Bila Anda ingin tombol mengambang dengan penargetan perangkat, penjadwalan, atau beberapa agen tanpa menulis CSS, plugin adalah jalan pintas yang jujur. Semua ini memiliki versi bebas:
- Joinchat (Cream) - ringan dan fokus murni pada WhatsApp; sebuah standar yang solid.
- Klik untuk Percakapan (HoliThemes) - bebas dan sederhana; nomor, posisi, dan beberapa gaya.
- Chaty (Premio) - Mendukung banyak saluran, tidak hanya WhatsApp; tingkat bebas ditambah rencana dibayar.
- App Percakapan WP (NinjaTeam) Tombol mengambang ditambah multi- agen dan pesan yang sudah diisi sebelumnya; bebas dan dibayar.
- Buttonizer - Peluncur tombol umum yang dapat menjadi tuan rumah tombol WhatsApp bersama dengan yang lain.
- Tombol Mengambang Elementor - widget asli di Elementor Pro jika Anda sudah membangun dengan itu.
Pasang, masukkan nomor Anda dalam format internasional, pilih posisi dan warna, dan Anda selesai. Pengisi gaji menambah target oleh perangkat dan halaman, penjadwalan obrolan, dan analisa klik. Tak satu pun dari pengaya ini dapat mengirim pesan dari situs Anda - itu bukan apa yang mereka untuk, dan itu bukan cacat; itu adalah batas antara widget dan API.
Metode 3: Elementor atau blok Gutenberg
Jika Anda memakai Widget Amormentor Pro, Widget Tombol Mengambang menempatkan Tombol WhatsApp secara native, tanpa plugin tambahan. Di Gutenberg, blok Tombol dengan link wa.me mencakup pekerjaan yang sama - pasangkan dengan CSS mengambang dari Method 1 jika Anda ingin lengket. Sebuah pola kode pendek atau blok dalam tema Anda functions.php adalah link yang sama di bawahnya; satu-satunya pertanyaan adalah di mana Anda ingin mempertahankannya.
Dimana tombol obrolan berhenti bekerja
Tombol obrolan tak bisa dibound- saja. Ini tidak dapat mengirim konfirmasi perintah ketika pelanggan check out, pengingat sebelum janji dipesan, atau dorongan pemulihan dua jam setelah ditinggalkan - karena tidak ada yang pernah dikirim dari situs Anda. Tidak ada penanganan jendela layanan Meta 24 jam, tidak ada persetujuan template, dan tidak ada kotak masuk bersama: setiap penyelidikan mendarat pada satu ponsel yang ada dalam link, sehingga agen kedua menjawab berarti nomor kedua.
Itu adalah tugas Whats App Business API. Bisnis - dimulai pesan di luar jendela 24 jam harus menggunakan templat yang disetujui Meta- (pemasaran, utilitas, atau kategori otentikasi), dan API mengirimkan mereka dari platform seperti Pad Teknis, yang bebas WordPress mendorong entri formulir, booking, dan memerintahkan ke WhatsApp secara otomatis sementara tim Anda menjawab dari satu inbox yang dibagikan di [/ feature / inbox /] (/ feature / inbox /). Tidak ada biaya bulanan untuk SaaS konektors; Anda membayar biaya percakapan per- pesan Meta - kira-kira 0.10- 0.30 untuk pesan utilitas di India, dengan pemasaran sekitar 2- 3 × itu - jadi periksa kartu rate Meta saat ini. Jika Anda memutuskan antara tombol dan API, [perbandingan ini] (/ blog / whatsapp- busines- vs-aps -2026 /) menampilkan batas.
Langkah demi langkah: tambahkan, gaya, dan uji tombol Anda
- Tulis nomor Anda dalam format internasional tanpa
+atau spasi - mis.919876543210untuk India. - Bangun dan uji link mentah di ponsel Anda terlebih dahulu:
https://wa.me/919876543210?text=Hi%2C%20I%20have%20a%20question. Ini harus membuka WhatsApp dengan pesan yang telah diisi. - Tambahkan tombol dimana pengunjung Anda melihat: Blok Tombol di dekat headline Anda, item menu nav, dan / atau widget kaki.
- Untuk versi lengket, tempelkan HTML yang mengambang ke widget HTML Gubahan dan CSS ke CSS tambahan, lalu periksa pada viewport mobile.
- Jika Anda memilih plugin, instal, masukkan nomor yang sama, pilih posisi dan warna, dan simpan.
- Klik trek di GA4: berikan link id (mis.
id="wa-float") dan tambahkan sebuah acara kecil pendengar, atau gunakan plugin Anda built-in analytics.
document.getElementById('wa-float').addEventListener('click', function () {
gtag('event', 'whatsapp_click');
});
- Uji halaman yang diterbitkan pada telepon asli dan desktop, dan konfirmasi teks yang telah diisi sebelumnya tiba dengan bersih - tidak ada
%20terlihat dalam kotak obrolan.
Pesan yang telah diisi sebelumnya untuk dikirim setelah klik
The wa.me text parameter pra-mengisi pesan pertama pengunjung. Mengikuti-up yang Anda kirim kemudian - pengakuan, kutipan follow- up - dijalankan sebagai templat melalui API, menggunakan {{1}}, {{2}} style variable sehingga satu template yang disetujui cocok setiap pelanggan.
| Tujuan | Variabel sampel | Kapan harus mengirim |
|---|---|---|
| Pemberitahuan pengakuan | {{1}} nama, {{2}} produk / layanan | Dalam beberapa menit klik |
| Kutipan follow- up | {{1}} nama, {{2}} acuan kutipan | Sehari setelah jawaban pertama |
"Hai {1}, terima kasih sudah menghubungi WhatsApp. Pertanyaan Anda tentang {2} adalah dengan tim kami - mengharapkan jawaban dalam satu jam bekerja."
"Hai {1}, inilah kutipan yang kita diskusikan untuk {{2}}. Apakah panggilan singkat minggu ini membantu Anda memutuskan?"
PSD
Apakah saya perlu plugin untuk menambahkan tombol WhatsApp ke WordPress? Tidak. Sebuah link wa.me polos bekerja di mana saja WordPress menerima sebuah link - sebuah blok Tombol, sebuah item menu, sebuah widget atau template tema. Plugin hanya membantu saat Anda ingin tombol mengambang dengan penargetan perangkat, penjadwalan atau beberapa agen tanpa kode sentuh.
Apakah tombol obrolan WhatsApp gratis? Ya. Click-to-chat link bebas dan tak terbatas karena percakapan terjadi dalam aplikasi WhatsApp sendiri, dan versi plugin bebas menutupi dasar-dasar. Anda hanya membayar biaya per-pesan Meta ketika Anda mulai mengirim bisnis - dimulai pesan melalui WhatsApp Business API.
Akankah sebuah tombol obrolan klik mendapatkan nomor saya dilarang? Tidak - pelanggan mulai chatting, yang persis perilaku Meta inginkan. Bans berasal dari ledakan yang tidak diinginkan, biasanya dikirim melalui alat tidak resmi. Tombol yang mengundang orang untuk menyampaikan pesan adalah salah satu cara teraman untuk membangun pilihan pada penonton.
Apa perbedaan antara tombol obrolan dan API Bisnis Whats App? Tombol obrolan membuka percakapan; ia tidak dapat mengirim apa-apa sendiri. API mengirim pesan otomatis - perintah konfirmasi, pemesanan pengingat, pemulihan gerobak - untuk banyak pelanggan sekaligus menggunakan templat yang disetujui, dan memberikan seluruh tim Anda satu inbox bersama untuk balasan.
Final CTA
Tombol obrolan membuat pengunjung berbicara; API membuat percakapan bergerak tanpa ada yang menyalin dan menempelkan. The Tech Pad berjalan pada resmi WhatsApp Cloud API dan memberikan Anda sebuah tim yang berbagi, Al Copilot, sebuah pusat Template, kampanye, dan analisis - ditambah 26 WordPress konektor bebas (daftar lengkap di [/ plugin /] (/ plugin /), harga pada [/ harga) (/ harga). bulan pertama Anda gratis ketika Anda mulai, dan setiap bisnis yang Anda merujuk yang menandatangani dan menghubungkan nomor WhatsApp memberikan Anda satu bulan bebas - sampai 5 bulan lagi bulan bebas - sampai 6 bulan total gratis. Atur tombol Anda hari ini, dan tambahkan lapisan API hari pemberitahuan urutan pertama menjadi suatu tugas manual - mulai dari [/ wa /] (/ wa /).