Memasang tombol WhatsApp di website bisa membantu meningkatkan penjualan dan konversi. Dalam artikel ini, Kang Opes akan membagikan langkah-langkah mudah cara membuat tombol WhatsApp di WordPress dengan dua metode tercepat:
- Metode Script: Tanpa menggunakan plugin, sehingga lebih ringan (Rekomendasi Kami).
- Metode Plugin: Menggunakan plugin yang bisa dikustomisasi sesuai kebutuhan.
Baca sampai beres, ya! Karena di akhir artikel ini, Kang Opes juga akan memberikan panduan memaksimalkan tombol WhatsApp, agar bisa benar-benar membantu meningkatkan penjualan dan konversi.
Metode 1: Menggunakan Script (Rekomendasi Kang Opes)
Kenapa cara ini lebih baik menurut Kang Opes? Karena kita hanya “menempelkan” kode ringan, tanpa menggunakan plugin berat yang bisa memakan memori hosting.
Yang kita perlukan yang sebuah plugin bernama WPCode untuk menempel kode tersebut. WPCode sendiri tidak akan membebani hosting karena hanya digunakan untuk menempelkan kode secara aman ke website.
Dan tidak perlu khawatir, kamu hanya perlu copy dan paste kode yang sudah Kang Opes siapkan. Dari awal sampai akhir, prosesnya kurang lebih hanya memakan waktu 15 menit.
Berikut langkah-langkahnya:
Langkah 1: Install WPCode
- Masuk ke Dashboard WordPress.
- Klik menu Plugin -> Add New (atau Tambahkan Plugin).
- Di kolom pencarian, masukan: WPCode.
- Pilih plugin “WPCode – Insert Headers and Footers”.
- Install plugin, kemudian aktifkan.
Langkah 2: Menambahkan Kode Tombol WA
- Setelah aktif, cari menu Code Snippets di bilah kiri dashboard (biasanya di bawah menu Settings).
- Klik + Add Snippet.
- Sorot pilihan “Add Your Custom Code (New Snippet)” lalu klik tombol Use Snippet, kemudian pilih HTML Snippet.
- Beri judul di bagian atas, misalnya: “Tombol WA“.
- Di pojok kanan atas kotak kode, pastikan isinya HTML Snippet.
Langkah 3: Copy & Paste Kode
Salin seluruh kode di bawah ini dan tempelkan ke Code Snippet yang sudah kamu buat di WPCode:
<!-- Mulai Kode Tombol WA -->
<a href="https://wa.me/628123456789?text=Halo%20Admin,%20saya%20tertarik%20dengan%20produk%20Anda..." class="whatsapp-float" target="_blank" rel="noopener noreferrer">
💬 Chat via WA
</a>
<style>
.whatsapp-float {
position: fixed;
bottom: 20px;
right: 20px;
background-color: #25d366;
color: #FFF !important;
border-radius: 50px;
text-align: center;
font-size: 15px;
padding: 10px 20px;
z-index: 99999;
text-decoration: none;
box-shadow: 0px 2px 5px rgba(0,0,0,0.3);
font-family: sans-serif;
font-weight: bold;
display: flex;
align-items: center;
gap: 8px;
}
.whatsapp-float:hover {
background-color: #128C7E;
}
@media screen and (max-width: 768px) {
.whatsapp-float {
bottom: 80px;
font-size: 14px;
}
}
</style>
<!-- Selesai Kode Tombol WA -->
Langkah 4: Edit Nomor HP
Jangan lupa mengganti nomor HP contoh dengan nomor WA bisnis kamu!
- Lihat baris ke-2 pada kode di atas:
<a href="https://wa.me/628123456789... - Ganti
628123456789dengan nomor WhatsApp Anda.- Penting: Gunakan kode negara 62 di depan. Jangan pakai “08” (contoh salah: 0812…), jangan pakai tanda plus “+” (contoh salah: +628…).
- Contoh Benar:
62812888999.
Langkah 5: Simpan
- Scroll ke bawah ke bagian Insertion, pastikan Location terpilih Site Wide Footer.
- Lihat ke pojok kanan atas layar, ubah tombol Inactive menjadi Active (warna biru).
- Klik Save Snippet.
- Cek website Anda, tombol WA hijau seharusnya sudah muncul di pojok kanan bawah!
Metode 2: Menggunakan Plugin
Jika metode yang pertama terasa terlalu rumit, kamu bisa menggunakan plugin khusus yang langkah-langkahnya jauh lebih mudah. Hanya saja, plugin kadang bisa memperlambat loading website dibanding menggunkan script.
Plugin yang Kang Opes rekomendasikan adalah: Join.chat.
Berikut langkah-langkahnya:
Langkah 1: Instalasi Plugin
- Masuk ke Plugins > Add New.
- Di kolom pencarian, ketik “Join.chat”.
- Klik Install Now, lalu Activate.
Langkah 2: Pengaturan Tombol WhatsApp
Setelah aktif, buka menu Settings > Join.chat. Anda akan diarahkan ke halaman pengaturan.
Catatan: Ketika membuka Join.chat pertama kali, biasanya kamu akan diarahkan ke halaman settings wizard. Sebaiknya lewati saja, dan langsung klik ke pengaturan plugin.
Berikut beberapa pengaturan yang Kang Opes rekomendasikan:
- Telephone: Di kolom ini, silahkan isi dengan nomor WhatsApp Anda (diawali kode negara 62)
- Message: Ketik pesan pembuka otomatis.
Tips: Gunakan kata ganti orang pertama dari sisi pelanggan. Contoh: “Halo, saya ingin bertanya tentang produk yang saya lihat di website…” - Tooltip: Isi dengan teks ajakan singkat, misalnya: “Butuh Bantuan?” atau “Ada Pertanyaan?”
- Position: Pilih Right (Kanan) atau Left (Kiri).
Tips: Pilih posisi yang tidak menutupi menu atau tombol penting lainnya. - Mobile Only: Ini bisa kamu aktifkan kalau ingin tombol WhatsApp hanya muncul untuk pengunjung yang mengakses website melalui handphone atau tablet.
- On Desktop: Di sini kamu bisa memilih apa yang terjadi saat tombol diklik oleh pengunjung yang membuka website lewat komputer atau laptop — apakah menampilkan QR code WhatsApp, atau langsung mengarahkan mereka ke WhatsApp Web.
Langkah 3: Pengaturan Jendela Chat
Kelebihan dari plugin Join.Chat adalah kita bisa menampilkan jendela chat yang membuat seolah pengunjung website bisa langsung menghubungi kita melalui website.
Berikut pengaturan yang Kang Opes rekomendasikan:
- Call to Action: Isi dengan pesan sambutan, misalnya: “Selamat datang! Silakan ajukan pertanyaan Anda. Kami akan merespons secepatnya di jam kerja (09.00 – 17.00 WIB).”
- Button Text: Teks ini akan muncul di tombol bawah jendela chat. Kamu bisa gunakan teks seperti “Kirim pesan”.
- Header: Untuk header, Kang Opes sarankan memilih WhatsApp Logo saja
- Theme Style: Pengaturan ini untuk menentukan apakah jendela chat akan ditampilkan dalam mode terang atau mode gelap. Sebaiknya gunakan Auto saja agar plugin bsia mendeteksi pengaturan yang digunakan oleh pengunjung website di device mereka.
- Auto Open: Pengaturan ini bisa kamu gunakan kalau kamu ingin jendela chat muncul secara otomatis.
- Automatically show Chat Window: Centang ini kalau kamu ingin jendela chat muncul setelah pengunjung berada di halaman dalam waktu tertentu dan sudah mengunjungi minimal berapa halaman yang bisa kamu atur sendiri.
- Kang Opes sangat menyarankan untuk mencentang “Display a notification bubble instead of opening the Chat Window…”. Tujuannya, agar jendela chat tidak langsung terbuka besar, tapi hanya muncul bubble notifikasi kecil di atas tombol WA.
Langkah 5: Simpan dan Cek Tampilan
- Setelah semuanya dirasa sudah sesuai, klik tombol ‘Save Changes’ untuk menyimpan pengaturan
- Selanjutnya, buka website kamu di browser.
- Cek apakah tombol WhatsApp sudah muncul, dan pastikan Tooltip serta Jendela Chat muncul sesuai pengaturan.
- Cek juga di handphone untuk memastikan tombol posisinya sudah rapi.
Masalah Umum & Solusi
Berikut beberapa masalah yang biasanya muncul ketika membuat tombol Chat WhatsApp di WordPress, dan solusinya:
1. Tombol Tidak Muncul di Website
- Penyebab: Biasanya karena Cache di browser atau plugin cache (seperti WP Rocket/LiteSpeed).
- Solusi: Coba buka website kamu menggunakan Incognito Mode / Private Window. Jika muncul di sana, berarti kamu hanya perlu menghapus cache (Clear Cache) di website Anda.
2. Tombol Menutupi Menu/Tombol Lain di HP
- Penyebab: Posisi tombol terlalu ke bawah.
- Solusi (Untuk Cara 1): Cari bagian kode yang bertuliskan
bottom: 80px;di dalam blok@media screen. Ubah angkanya menjadi lebih besar, misal100px, agar tombol naik ke atas.
3. Link WhatsApp Tidak Bisa Dibuka / Error
- Penyebab: Penulisan nomor salah.
- Solusi: Pastikan kamu memasukan nomor dengan benar, yang diawali dengan kode negara 62 (bukan menggunakan angka “0” di depan).
Perlu Bantuan Membuat Tombol WhatsApp di WordPress?
Atau ingin menambahkan fitur-fitur khusus, misalnya
- Tombol otomatis “Offline” saat jam kantor tutup.
- Membagi chat ke beberapa Customer Service berbeda sesuai jam kerja mereka.
- Mengubah warna tombol sesuai logo brand Anda.
Jika kamu perlu jasa edit website WordPress untuk menambahkan tombol WhatsApp atau fitur lainnya, Kang Opes siap bantu dengan cepat.
Klik di sini untuk konsultasi gratis dengan Kang Opes.
Pengerjaan bisa selesai sehari dengan biaya hanya Rp. 125.000.
