SealReplyCara Memasang Live Chat di WordPress (Tanpa Bikin Website Lambat)
Anda tidak butuh plugin chat khusus WordPress. Cukup tempel satu baris kode di footer. Ini tiga cara melakukannya, dan cara memastikan chat tetap muncul meski cache aktif.
Untuk memasang live chat di WordPress, tempelkan kode widget chat di footer situs Anda, tepat sebelum </body>. Cara paling aman adalah memakai plugin kecil untuk "kode header dan footer", supaya kode tidak hilang saat tema diperbarui. Semuanya selesai dalam sekitar lima menit, dan Anda tidak butuh plugin chat khusus.
Poin penting
- Plugin kode footer gratis seperti WPCode adalah tempat paling aman untuk kode chat: cocok dengan semua tema dan tetap ada setelah tema diperbarui.
- Block theme tidak punya
footer.php, jadi pakai plugin kode footer di sana. - Bersihkan plugin cache dan CDN setelah menempel kode, kalau tidak belum ada yang bisa melihat chat.
- Domain Anda biasanya terverifikasi dengan sendirinya: buka situs Anda sekali setelah kode aktif.
- Di WordPress.com, menambah plugin butuh paket berbayar; WordPress self-hosted tidak punya batasan ini.
Panduan ini memakai SealReply sebagai contoh, dan membahas tiga kondisi yang paling umum: plugin kode, classic theme, dan block theme. Kalau situs Anda adalah toko online, semua isi panduan ini tetap berlaku, ditambah beberapa pengaturan khusus toko di cara memasang live chat di WooCommerce. Untuk platform lain, lihat cara memasang live chat di website.
Apa yang perlu disiapkan sebelum mulai?
Anda butuh akun administrator di situs WordPress dan akun SealReply gratis. Hanya itu:
- Akun administrator. Hanya administrator yang bisa memasang plugin atau mengubah file tema.
- Jenis WordPress yang tepat. WordPress self-hosted (WordPress.org) tidak punya batasan di sini. Di WordPress.com, pemasangan plugin hanya tersedia di paket berbayar (Personal, Premium, Business dan Commerce).
- Akun SealReply gratis. Paket Gratis tidak punya batas waktu dan tidak meminta data pembayaran.
Cara menambahkan kode mana yang cocok untuk situs Anda?
Plugin kode footer cocok untuk hampir semua situs; dua cara lainnya hanya untuk kasus khusus. Pilih salah satu sebelum mulai:
| Cara | Cocok untuk | Tetap ada setelah tema diperbarui | Paling pas untuk |
|---|---|---|---|
| A: plugin kode footer | Semua tema | Ya | Hampir semua orang |
B: footer.php di child theme |
Hanya classic theme | Ya, kalau di child theme | Situs yang sudah memakai child theme |
| C: Site Editor di block theme | Tidak bisa | — | Pakai Cara A saja |
Kalau Anda tidak yakin tema apa yang dipakai: jika menu Appearance menampilkan Editor dan bukan Customize, berarti itu block theme. Dokumentasi resmi WordPress menjelaskan perbedaan block theme dan classic theme.
Langkah 1: Tambahkan situs Anda dan salin kodenya
Panduan penyiapan di konsol menuntun Anda, satu layar untuk setiap langkah.
- Daftar. Konsol membuka Siapkan chat Anda.
- Di Situs web Anda, isi Nama situs dan Alamat situs web, misalnya
toko.example.com. Klik Lanjutkan. - Di Pasang widget, pilih WordPress di Situs web Anda memakai, lalu klik Salin.
Kodenya terlihat seperti ini:
<script src="https://cdn.sealreply.com/widget.js" data-site-key="sk_…" async></script>
Biarkan halaman penyiapan tetap terbuka di satu tab. Halaman itu memeriksa situs Anda setiap beberapa detik dan memberi tahu saat chat sudah dimuat.
Langkah 2: Tempelkan kode di WordPress
Pakai hanya salah satu dari tiga cara di bawah. Kalau kode ditempel dua kali, bisa muncul dua tombol chat.
Cara A: plugin kode footer (disarankan)
Cara ini cocok untuk semua tema, dan kode tetap ada setelah tema diperbarui atau diganti.
- Di WordPress, buka Plugins → Add New, cari WPCode, lalu pasang dan aktifkan. Versi gratisnya sudah cukup.
- Buka Code Snippets → Header & Footer.
- Tempelkan kode di kotak Footer.
- Klik Save Changes.
Plugin apa pun yang bisa menambahkan kode ke footer bekerja dengan cara yang sama. Kalau Anda sudah punya satu, pakai itu saja, tidak perlu memasang yang baru.
Cara B: footer.php di classic theme
Pakai cara ini hanya kalau Anda terbiasa mengubah file tema.
- Pastikan Anda memakai child theme. Kalau yang diubah adalah tema induk, pembaruan berikutnya akan menghapus perubahan Anda. Handbook resmi WordPress menjelaskan bagaimana child theme menjaga perubahan Anda saat tema diperbarui.
- Buka Appearance → Theme File Editor lalu buka
footer.php. - Tempelkan kode tepat sebelum
</body>. - Klik Update File.
Cara C: block theme
Block theme, seperti tema bawaan WordPress terbaru, dibangun dari blok dan template HTML, bukan file PHP, jadi tidak ada footer.php yang bisa diubah. Site Editor juga tidak bisa menambahkan skrip ke semua halaman. Pakai Cara A.
Langkah 3: Bersihkan cache
Kebanyakan situs WordPress memakai plugin cache atau CDN. Sebelum cache dibersihkan, pengunjung, dan juga halaman penyiapan, tetap melihat halaman lama tanpa chat.
- Bersihkan cache di plugin cache Anda, dan di CDN kalau Anda memakainya.
- Kalau hosting Anda punya cache sendiri (banyak hosting WordPress terkelola punya), bersihkan juga. Biasanya ada tombolnya di dasbor hosting.
Opsi tunda dan gabung JavaScript
Kalau plugin cache atau plugin kecepatan Anda punya opsi delay JavaScript atau combine JavaScript, chat mungkin baru muncul setelah pengunjung menggulir atau mengklik. Kalau Anda tidak menginginkannya, tambahkan widget.js ke daftar pengecualian opsi itu.
Widget berukuran sekitar 38 KB dan dimuat secara asinkron, jadi tidak menghalangi halaman Anda tampil. Anda tidak perlu menundanya agar situs tetap cepat. Kalau tetap ingin chat dimuat paling akhir, centang Muat chat setelah halaman di langkah pemasangan lalu salin versi kode itu: halaman Anda tampil lebih dulu dan tombol chat menyusul sesaat kemudian.
Langkah 4: Bagaimana cara memverifikasi domain di WordPress?
Biasanya Anda tidak perlu melakukan apa-apa. Setelah kode aktif di beranda, buka situs Anda sekali: SealReply menemukan kode situs di beranda Anda, domain langsung terverifikasi, dan tombol chat muncul saat Anda memuat ulang halaman.
Widget tetap tersembunyi sampai domain terverifikasi, jadi tidak ada orang yang bisa memasang chat Anda di situs yang bukan miliknya. Lakukan verifikasi manual di Situs → situs Anda → Verifikasi domain kalau pemeriksaan beranda tidak bisa melihat kodenya. Di WordPress, biasanya penyebabnya:
- Plugin maintenance atau "coming soon" menampilkan halaman sementara alih-alih beranda Anda.
- Plugin firewall atau keamanan menantang pengunjung yang tidak dikenal, sehingga pemeriksaan malah mendapat halaman tantangan.
- Kode hanya ditambahkan di beberapa halaman, atau lewat Google Tag Manager.
Pilih salah satu cara:
- Data DNS TXT: tambahkan Nama dan Nilai yang ditampilkan di registrar domain atau penyedia DNS Anda. Bisa butuh beberapa menit.
- File: publikasikan file teks kecil di alamat yang ditampilkan, dengan isi yang ditampilkan. File ini ditaruh di folder
.well-knowndi root situs; lewat FTP atau file manager hosting, cara ini sering lebih cepat. Beberapa program FTP menyembunyikan folder yang namanya diawali titik, jadi nyalakan tampilan file tersembunyi kalau foldernya tidak terlihat.
Lalu klik Periksa sekarang. Ini cukup sekali per situs, dan baru perlu diulang kalau domain utama diganti.
Langkah 5: Kirim chat uji
- Di halaman penyiapan, klik Buka situs web saya. Chat terbuka dengan sendirinya. Tautannya berlaku 30 menit.
- Kirim pesan sebagai pengunjung.
- Balas dari konsol.
Chat uji tidak dihitung dalam kuota chat bulanan dan tidak masuk ke laporan maupun Webhook.
Bagaimana kalau chat tidak muncul?
Hampir selalu penyebabnya cache, alamat yang Anda buka, atau verifikasi. Halaman penyiapan memberi tahu yang mana:
| Yang Anda lihat | Kemungkinan penyebab di WordPress |
|---|---|
| Belum terdeteksi | Halaman masih ter-cache, atau snippet belum tersimpan. Bersihkan semua lapisan cache lalu muat ulang. |
| Verifikasi domain Anda dulu | Buka beranda sekali saat kode sudah aktif. Kalau terhalang halaman maintenance atau firewall, pakai data DNS atau file (Langkah 4). |
| Dimuat di domain lain | Alamat yang Anda buka tidak diizinkan. Kalau Anda memasukkan www.example.com, alamat example.com tanpa www belum tercakup; masukkan example.com, yang sudah mencakup www.. Perbaiki lewat Edit domain yang diizinkan. |
| Dua tombol chat | Kode ada di dua tempat, misalnya di WPCode dan di footer.php. Hapus salah satunya. |
| Tombol baru muncul setelah menggulir | Opsi delay JavaScript menahannya. Kecualikan widget.js (Langkah 3). |
| Situs berstatus Dijeda | Jumlah situs Anda melebihi batas paket. Tingkatkan paket, atau hapus situs lain. |
Plugin yang memblokir skrip dari luar
Plugin keamanan, pemblokir iklan, atau "persetujuan cookie" bisa menghentikan skrip dari domain lain, sehingga chat tidak pernah muncul. Kalau situs Anda mengirim Content Security Policy, izinkan alamat-alamat yang tercantum di dokumentasi widget.
Bagaimana cara menyembunyikan chat di halaman tertentu?
Tambahkan halaman-halaman itu di Situs → situs Anda → Aturan halaman → Halaman tanpa chat, dengan mengklik Tambah halaman. Mungkin Anda tidak ingin chat muncul di halaman login, halaman terima kasih, atau halaman yang tidak menjual apa pun. Tombol chat tidak muncul di sana, dan kunjungan ke halaman itu tidak dicatat. Anda bisa menambahkan maksimal 20 aturan.
Untuk menyembunyikan tombol hanya di ponsel, matikan Tampilkan tombol chat di ponsel di bagian Tampilan. Tautan buatan Anda sendiri tetap bisa membuka chat di sana.
Pertanyaan umum
Apakah saya butuh plugin live chat WordPress?
Tidak. Layanan live chat memberi Anda satu baris kode, dan plugin kode footer apa pun, atau footer tema Anda, bisa menampungnya. Plugin kode footer adalah pilihan paling aman karena pembaruan tema tidak menghapusnya.
Apakah live chat membuat situs WordPress saya lambat?
Seharusnya tidak. Widget SealReply adalah skrip async berukuran sekitar 38 KB, jadi halaman Anda tampil tanpa menunggunya. Jangan biarkan plugin kecepatan menundanya, kecuali Anda tidak keberatan tombol chat baru muncul setelah pengunjung menggulir.
Bisakah saya memasang live chat di situs WordPress.com gratis?
Tidak dengan plugin kode. Di WordPress.com, pemasangan plugin butuh paket berbayar (Personal atau lebih tinggi). WordPress self-hosted dari WordPress.org tidak punya batasan ini.
Apakah pembaruan tema akan menghapus chat?
Tidak, kalau kodenya ada di plugin kode footer atau di child theme. Kode yang ditempel di footer.php tema induk akan hilang pada pembaruan berikutnya, jadi pindahkan ke plugin kalau sekarang kodenya ada di sana.
Apakah cara ini berlaku untuk toko WooCommerce?
Ya. WooCommerce berjalan di atas WordPress, jadi chat dipasang dengan cara yang sama, dan tampil di halaman produk, keranjang dan checkout yang dirender oleh tema Anda. Toko online biasanya menambahkan sambutan per halaman dan FAQ soal pengiriman dan retur.
Bisakah chat hanya ditampilkan di beberapa halaman?
Anda bisa menyembunyikannya di maksimal 20 halaman atau pola alamat lewat Aturan halaman → Halaman tanpa chat. Semua halaman lain tetap menampilkan tombol chat.
Langkah selanjutnya
- Sesuaikan dengan tampilan situs Anda: logo, warna dan pesan sambutan di Tampilan dan Teks, dengan pratinjau langsung. Untuk ide kalimat, lihat contoh pesan sambutan live chat ini.
- Atur jam operasional: di luar jam itu, pengunjung meninggalkan pesan alih-alih menunggu. Lihat cara agar tidak kehilangan pelanggan saat Anda offline.
- Nyalakan notifikasi push: dapatkan kabar chat baru di ponsel meski konsol tertutup.
Untuk semua hal setelah pemasangan, baca panduan live chat untuk usaha kecil.