Cara Memasang Live Chat di WooCommerce (dan Mengaturnya per Halaman)

Untuk memasang live chat di WooCommerce, tempelkan kode satu baris dari widget chat di footer situs Anda. WooCommerce berjalan di atas WordPress, jadi tidak perlu mencari plugin chat khusus WooCommerce, dan pemasangannya selesai dalam sekitar lima menit.

Pemasangan adalah bagian yang mudah. Yang membuat chat benar-benar berguna di toko online adalah sepuluh menit sesudahnya: pembeli di halaman produk, pembeli yang ragu di keranjang, dan pembeli yang tersendat di checkout punya tiga pertanyaan yang berbeda, dan chat Anda sebaiknya menyapa dengan tiga kalimat yang berbeda pula. Panduan ini memakai SealReply sebagai contoh dan membahas keduanya. Untuk platform lain, lihat cara memasang live chat di website.

Apa yang perlu disiapkan sebelum mulai?

Anda butuh tiga hal, dan tidak ada yang berbayar:

• Akun administrator di situs WordPress tempat toko Anda berjalan.
• Akun SealReply gratis. Paket Gratis tidak punya batas waktu.
• Alamat halaman-halaman toko Anda. Secara bawaan WooCommerce memakai /shop/ untuk daftar produk, /product/<nama>/ untuk produk, /product-category/<nama>/ untuk kategori, /cart/, /checkout/ dan /my-account/. Kalau Anda mengubah product base atau category base, periksa Settings → Permalinks dan pakai alamat Anda sendiri di aturan-aturan di bawah. Dokumentasi permalink WooCommerce menjelaskan di mana setiap base diatur.

Langkah 1: Bagaimana cara memasang live chat di WooCommerce?

Anda memasang live chat di WooCommerce dengan membuat situs di konsol chat, menyalin kode sematannya, lalu menempelkannya sekali di footer WordPress.

1. Daftar. Konsol membuka Siapkan chat Anda.
2. Di Situs web Anda, isi Nama situs, misalnya Batik Sekar, dan Alamat situs web toko Anda, misalnya toko.example.com, lalu klik Lanjutkan.
3. Di Pasang widget, pilih WordPress di Situs web Anda memakai lalu klik Salin.
4. Tempelkan kode di footer, dengan salah satu dari tiga cara di bawah.
5. Bersihkan plugin cache dan CDN Anda, lalu buka beranda toko sekali.

Kodenya terlihat seperti ini:

<script src="https://cdn.sealreply.com/widget.js" data-site-key="sk_…" async></script>

Tambahkan dengan cara WordPress, pilih salah satu dari tiga:

Cara	Tempat kode ditempel	Tetap ada setelah tema diperbarui?	Paling pas untuk
Plugin kode footer (disarankan)	Kotak Footer di plugin, misalnya di WPCode	Ya	Hampir semua toko
footer.php di child theme	Tepat sebelum </body>	Ya, kalau di child theme	Toko yang sudah memakai child theme
Block theme	Tidak ada footer.php; Site Editor tidak bisa menambahkan skrip ke semua halaman	—	Pakai plugin kode footer saja

Tampilan langkah demi langkah untuk ketiga cara ada di cara memasang live chat di WordPress.

Membuka beranda sekaligus memverifikasi domain Anda: kami mencari kode sematan Anda di beranda, dan tombol muncul di pojok saat halaman dimuat ulang. Biarkan halaman penyiapan terbuka di satu tab; halaman itu memeriksa situs Anda setiap beberapa detik dan menampilkan Widget sudah dimuat di situs web Anda. begitu menemukannya. Kalau kode tidak ada di sumber HTML beranda, misalnya karena dipasang lewat Google Tag Manager, tambahkan data DNS TXT atau unggah file yang ditampilkan di Verifikasi domain.

Widget berukuran sekitar 38 KB dan dimuat secara asinkron, jadi tidak menghalangi halaman Anda tampil.

Langkah 2: Apakah chat tampil di semua halaman WooCommerce?

Ya, kode footer berjalan di semua halaman WooCommerce, karena setiap halamannya adalah halaman WordPress biasa. Yang sering bikin repot adalah template dan cache, jadi luangkan dua menit untuk membuka satu halaman dari setiap jenis:

Halaman	Alamat	Yang perlu dicek
Toko	/shop/	Tombol ada, tidak menutupi filter
Produk	/product/produk-apa-saja/	Tombol ada, tidak menutupi Add to cart
Keranjang	/cart/	Tombol ada, tidak menutupi Proceed to checkout
Checkout	/checkout/	Tombol ada, karena checkout WooCommerce adalah halaman biasa, tidak seperti Shopify, jadi kode Anda tetap berjalan
Akun saya	/my-account/	Tombol ada

Kalau tombol menutupi sesuatu, pindahkan ke kiri bawah atau tambah jaraknya dari tepi layar di bagian Tampilan. Di ponsel, Anda bisa mematikan Tampilkan tombol chat di ponsel lalu membuka chat dari tautan "Hubungi kami" buatan Anda sendiri.

Langkah 3: Kirim chat uji ke diri sendiri

Bukti tercepat bahwa semuanya berjalan adalah satu pesan uji. Di langkah Kirim pesan uji pada penyiapan, klik Buka situs web saya: toko Anda terbuka dengan chat yang sudah terbuka. Tulis sesuatu seolah-olah Anda pembeli, lalu jawab dari konsol. Tautan uji berlaku 30 menit, dan chat uji tidak dihitung dalam kuota bulanan maupun muncul di laporan.

Langkah 4: Bagaimana cara memberi setiap halaman sambutan sendiri?

Anda memberi setiap halaman sambutan sendiri dengan aturan halaman: buka Situs → situs Anda → Aturan halaman → Sambutan per halaman lalu tambahkan satu aturan untuk setiap jenis halaman. Aturan pertama yang cocok yang dipakai, jadi urutkan dari yang paling spesifik ke yang paling umum.

Cocokkan	Halaman	Sambutan
Path diawali	/product	Soal ukuran, bahan, pengiriman, silakan tanya
Path sama dengan	/cart	Mau saya cekkan ongkir atau kode diskon?
Path sama dengan	/checkout	Ada yang menghambat pesanan Anda?
Path diawali	/my-account	Status pesanan, ganti alamat, retur, tanya di sini
Path diawali	/product-category	Bingung pilih yang mana? Ceritakan untuk acara apa

Beberapa hal yang perlu diketahui:

• Path diawali mencocokkan segmen utuh: /product mencakup semua halaman produk di bawahnya, tetapi tidak menyentuh halaman seperti /products-guide.
• Yang berubah hanya sambutannya. Tidak ada pesan yang dikirim dan chat tidak terbuka sendiri; pembeli melihat kalimatnya saat membuka chat.
• Tulis setiap bahasa secara terpisah; bahasa yang dikosongkan akan memakai bahasa bawaan situs. Kalau Anda juga menjual ke luar negeri, isi versi bahasa Inggris juga.
• Maksimal 20 aturan per situs, dan Coba alamat halaman di sebelahnya memberi tahu aturan mana yang kena untuk sebuah URL.

Untuk kalimat yang bisa langsung ditempel, lihat contoh pesan sambutan live chat ini.

Langkah 5: Kapan sebaiknya mengundang pembeli untuk chat?

Undang pembeli setelah mereka cukup lama berada di halaman produk atau keranjang, karena saat itulah keraguan paling mungkin muncul. Di bagian yang sama, Undangan chat memunculkan kalimat singkat di samping tombol chat setelah pengunjung berada beberapa detik di sebuah halaman, atau menggulir cukup jauh. Dua aturan sudah cukup untuk kebanyakan toko:

• Halaman produk: path diawali /product, setelah 45 detik: "Mau dibantu pilih ukuran?" Orang yang sudah membaca selama satu menit tanpa menambahkan ke keranjang biasanya sedang ragu.
• Keranjang: path sama dengan /cart, setelah 20 detik: "Ada pertanyaan soal ongkir atau kupon?"

Undangan hanya dikirim saat ada yang benar-benar bisa melayani chat, dan tidak pernah dikirim saat pengunjung sedang chat atau jendela chatnya sedang terbuka.

Haruskah chat disembunyikan di halaman checkout?

Biarkan tetap ada. Naluri kita ingin checkout bebas gangguan, tetapi ongkos kirim, metode pembayaran dan kode kupon justru titik tempat pesanan WooCommerce sering macet, dan satu jawaban di sana bisa menyelamatkan pesanan.

Kalau Anda tetap ingin menyembunyikannya, buka Aturan halaman → Halaman tanpa chat lalu pakai Path sama dengan /checkout, bukan Path diawali.

Satu efek samping yang perlu diketahui: halaman tanpa chat juga tidak mencatat kunjungan, jadi halaman-halaman itu tidak akan muncul di daftar pengunjung Anda. Maksimal 20 aturan.

Bagaimana cara melihat halaman yang sedang dibuka pembeli?

Menu Pengunjung aktif di konsol menampilkan siapa sedang membuka halaman apa saat ini, diperbarui setiap 10 detik: sudah berapa lama di sana, datang dari mana, sudah berapa kali berkunjung, dan apakah rekan tim sudah melayaninya. Kalau Anda melihat seseorang bolak-balik di satu produk, Anda bisa menyapa lebih dulu; di sisi pembeli, sapaan itu hanya gelembung kecil di samping tombol chat, bukan pop-up. Daftar ini tidak menampilkan email, nomor telepon atau alamat IP.

Supaya pembeli datang dengan nomor pesanan yang sudah terlampir, tambahkan pertanyaan Anda sendiri di formulir pra-chat di Fitur pengunjung → Sebelum chat, misalnya "Nomor pesanan (kosongkan kalau belum punya)". Maksimal lima pertanyaan, dan jawabannya tersimpan begitu formulir dikirim, meski pengunjung pergi tanpa menulis apa pun.

Dua laporan lalu menunjukkan apa yang perlu diperbaiki di toko itu sendiri: Halaman asal pertanyaan mengurutkan halaman tempat pertanyaan dimulai, yang biasanya menandakan deskripsi produk yang kurang lengkap, dan Halaman di balik transaksi berhasil mengurutkan halaman yang mengarah ke transaksi yang ditandai berhasil oleh tim Anda.

Apa yang terjadi pada pertanyaan yang masuk setelah toko tutup?

Pertanyaan itu menjadi pesan yang Anda jawab besok pagi, asalkan empat pengaturan berikut menyala. Toko online Anda buka sepanjang malam; Anda tidak.

• Jam operasional di Jam & waktu tunggu. Di luar jam itu, pengunjung mendapat formulir pesan, ditambah jam berikutnya Anda online menurut zona waktu mereka sendiri. Ini sangat berguna kalau pembeli Anda tersebar di WIB, WITA dan WIT, apalagi kalau separuh pesanan datang dari luar negeri.
• Catatan offline di Teks, per bahasa: "Kami membalas setiap pesan dalam satu hari kerja."
• Tampilkan daftar pertanyaan di bawah formulir pesan di luar jam operasional. Tambahkan kartu Pertanyaan umum di Beranda lebih dulu, berisi lama pengiriman, retur dan bea cukai, lalu centang kotaknya. Banyak pembeli akhirnya menemukan jawabannya sendiri.
• Pengingat waktu tunggu: kalau tidak ada yang membalas tepat waktu, widget memberi tahu dengan jujur dan meminta email, supaya jawaban Anda tetap sampai. Chat ditandai terlewat dan bisa Anda selesaikan satu per satu besok pagi.

Nyalakan Notifikasi push di perangkat ini dari menu akun, dan chat baru sampai ke ponsel Anda meski konsol tertutup. Selengkapnya ada di cara agar tidak kehilangan pelanggan saat Anda offline.

Apa yang sebaiknya ditaruh di layar beranda chat?

Taruh tiga tautan yang paling sering dicari pembeli, yaitu lacak pesanan, retur dan panduan ukuran, ditambah pertanyaan yang paling sering muncul. Layar pertama jendela chat bisa menampung kartu:

• Tautan: lacak pesanan, kebijakan retur, panduan ukuran. Semua paket bisa memasang 3 tautan.
• Pengumuman: "Pengiriman minggu ini terlambat 1–2 hari", dengan tanggal kapan pengumuman itu hilang sendiri.
• Pertanyaan umum: lima pertanyaan yang Anda jawab setiap hari.

Kalau layar ini sudah tepat, sebagian besar pertanyaan berulang akan terjawab di sana.

Bagaimana kalau chat tidak berjalan di toko Anda?

Sebagian besar masalah WooCommerce berasal dari cache, domain kedua, atau permalink base yang diubah:

Masalah	Solusi
Kode sudah ditempel, tombol tidak muncul	Bersihkan plugin cache dan CDN. Kalau plugin punya opsi "delay JavaScript" atau "combine JavaScript", tambahkan widget.js ke daftar pengecualiannya.
Tidak ada chat di alamat www.	Tambahkan alamat dengan www. dan tanpa www. di Domain yang diizinkan, satu per baris.
Anda mengubah product permalink base	Periksa Settings → Permalinks lalu ganti /product di aturan di atas dengan base Anda sendiri, misalnya /shop.
Plugin multibahasa menambahkan /en/product/…	Ganti jenis pencocokan menjadi Alamat mengandung dan pakai /product.
Anda memakai blok Cart dan Checkout yang lebih baru	Alamat halamannya tidak berubah, jadi aturan di atas tetap berlaku.
Anda ingin kalimat di halaman terima kasih	Tambahkan aturan sambutan dengan Alamat mengandung order-received, misalnya "Pesanan diterima, nomor resi kami kirim lewat email begitu paket dikirim."
Spam atau banjir pesan	Atur berapa pesan per menit yang boleh dikirim pengunjung di Fitur pengunjung → Perlindungan banjir pesan.

Pertanyaan umum

Apakah saya butuh plugin live chat WooCommerce?

Tidak. WooCommerce berjalan di atas WordPress, jadi widget chat yang ditempel di footer situs berjalan di semua halaman toko, termasuk keranjang dan checkout. Satu-satunya plugin yang mungkin Anda perlukan adalah plugin kode footer umum, supaya pembaruan tema tidak bisa menghapus kodenya.

Bisakah saya memasang live chat di WooCommerce secara gratis?

Bisa. Paket Gratis SealReply tidak punya batas waktu dan sudah termasuk widget, aturan halaman, undangan chat dan pesan offline. Paket berbayar menambahkan hal-hal seperti pengumuman dan kartu FAQ di layar beranda chat, lebih banyak kursi agen, dan Webhook.

Apakah live chat membuat toko WooCommerce saya lambat?

Seharusnya tidak menahan halaman Anda. Widget SealReply berukuran sekitar 38 KB dan dimuat secara asinkron, jadi halaman produk dan checkout tampil sebelum widget selesai dimuat. Untuk membuktikannya sendiri, uji halaman produk yang sama di PageSpeed Insights dengan dan tanpa kode chat.

Apakah live chat berjalan dengan blok Cart dan Checkout WooCommerce?

Ya. Blok itu mengubah tampilan keranjang dan checkout, bukan alamatnya, jadi kode footer tetap berjalan di sana dan aturan halaman untuk /cart dan /checkout tetap cocok.

Bisakah saya membalas chat WooCommerce dari ponsel?

Bisa. Nyalakan notifikasi push dari menu akun, atau pasang aplikasi SealReply: iPhone dari App Store, Android dari file instalasi di website kami. Ketuk notifikasinya, dan percakapan langsung terbuka untuk Anda balas.

Bagaimana pembeli memberi tahu nomor pesanan mereka?

Tambahkan pertanyaan Anda sendiri di formulir pra-chat di Fitur pengunjung → Sebelum chat, misalnya "Nomor pesanan". Jawabannya tersimpan di detail pengunjung begitu formulir dikirim, jadi Anda tetap memilikinya meski mereka pergi sebelum menulis.

Yang perlu dilakukan setelah pemasangan

• Atur warna dan logo toko Anda di Tampilan, dengan pratinjau langsung di sampingnya.
• Simpan tiga jawaban yang Anda ketik setiap hari sebagai balasan cepat.
• Atur tanggal tindak lanjut untuk siapa pun yang tampak siap membeli; konsol mengingatkan Anda saat waktunya tiba.

Berikutnya: panduan live chat untuk usaha kecil membahas semua hal setelah pemasangan, dari balasan pertama sampai penjualan berhasil.