Cara Pasang Live Chat di Website: WordPress, Shopify, Wix, dan Blogger

Tim Dibales.AI 3 November 2026 · 7 menit baca

Pengunjung website yang bingung biasanya tidak bertanya. Mereka langsung menutup halaman. Live chat untuk website memberi mereka cara bertanya saat itu juga, tanpa pindah aplikasi, sehingga keraguan bisa dijawab sebelum mereka pergi.

Artikel ini membahas cara pasang live chat di website langkah demi langkah, termasuk cara menempelkan kodenya di WordPress, Shopify, Wix, dan Blogger.

Apa Itu Live Chat Website?

Live chat website adalah jendela chat kecil di pojok halaman. Pengunjung cukup klik ikonnya, menulis pertanyaan, dan mendapat balasan di halaman yang sama. Di sisi bisnis, chat itu masuk ke dashboard dan bisa dijawab oleh tim atau asisten AI.

Live Chat atau Tombol WhatsApp?

Keduanya bisa dipakai bersamaan. Tombol WhatsApp membawa pengunjung ke aplikasi WhatsApp, cocok untuk yang sudah siap order. Live chat membuat pengunjung tetap di halaman, cocok untuk pertanyaan singkat sebelum membeli. Dengan form di awal chat, kamu tetap mendapat nomor WhatsApp mereka untuk follow up nanti.

Yang Perlu Disiapkan

• Akses untuk menambahkan kode ke website, misalnya akun admin WordPress atau pemilik toko Shopify.
• Akun live chat. Di artikel ini kami memakai Live Chat dari dibales.ai, yang tersedia di paket Pro.
• Daftar pertanyaan yang sering masuk, untuk bahan sapaan dan balasan otomatis.

Cara Pasang Live Chat di Website dengan dibales.ai

1. Atur tampilanWarna, nama agen, bahasa, dan sapaan
2. Tempel kodeSatu baris, sebelum </body>
3. Balas dari inboxBareng chat WhatsApp, Instagram, TikTok

1. Atur Tampilan Widget

Masuk ke pengaturan Live Chat di dashboard dibales.ai. Pilih warna yang sesuai brand, nama agen, bahasa, dan kalimat sapaan. Setiap perubahan langsung terlihat di preview. Aktifkan juga form di awal chat kalau kamu ingin meminta nama dan nomor WhatsApp atau email pengunjung.

2. Salin Kode dan Daftarkan Domain

Salin kode widget dari dashboard. Bentuknya satu baris seperti ini, dengan data-key milik akunmu sendiri:

<script src="https://crm.dibales.ai/widget.js" data-key="lc_xxxxxxxx" async></script>

Daftarkan juga domain website kamu di pengaturan Live Chat, supaya widget hanya tampil di website milikmu.

3. Tempel Kode Sebelum Tag </body>

Tempel kode tepat sebelum tag penutup </body>, supaya widget dimuat setelah isi halaman dan tidak memperlambatnya. Kalau websitemu dibuat sendiri, buka file HTML-nya dan tempel di sana. Untuk platform populer, langkahnya ada di bagian berikutnya.

Cara Menempelkan Kode Live Chat di Platform Populer

Nama menu bisa sedikit berbeda tergantung versi dan tema, tapi alurnya sama: cari tempat menambahkan kode di bagian akhir halaman.

WordPress

1. Cek dulu apakah tema kamu punya kolom kode footer, biasanya di menu pengaturan tema. Kalau ada, tempel kodenya di sana.
2. Kalau tidak ada, pasang plugin penyisip kode seperti WPCode, lalu tempel kode di bagian Footer.
3. Simpan, lalu buka website kamu untuk mengecek widget sudah muncul.

Tidak perlu plugin khusus live chat. Plugin penyisip kode hanya dipakai kalau tema tidak menyediakan kolom kode.

Shopify

1. Buka Online Store > Themes, klik ikon titik tiga di tema yang aktif, lalu pilih Edit code.
2. Buka file theme.liquid di folder Layout.
3. Cari </body>, tempel kode tepat di atasnya, lalu klik Save.

Wix

1. Buka Settings di dashboard situs, lalu pilih Custom Code di bagian Advanced.
2. Klik Add Custom Code, tempel kodenya, pilih All pages, dan letakkan di Body - end.
3. Klik Apply. Fitur Custom Code di Wix membutuhkan paket premium dan domain yang terhubung.

Blogger

1. Buka menu Tema, klik tanda panah di samping tombol Sesuaikan, lalu pilih Edit HTML.
2. Cari </body>, tempel kode tepat di atasnya, lalu simpan.

Cek Apakah Live Chat Sudah Aktif

• Buka website di jendela penyamaran supaya tidak terpengaruh cache browser, lalu pastikan ikon chat muncul di pojok kanan bawah.
• Kirim pesan percobaan dan pastikan pesannya masuk ke inbox dibales.ai.
• Cek di HP juga. Sebagian besar pengunjung toko online datang dari ponsel.
• Kalau widget belum muncul, cek lagi apakah domainnya sudah didaftarkan dan apakah ada plugin cache yang perlu dibersihkan.

Tips Supaya Live Chat Menghasilkan Penjualan

• Tulis sapaan yang spesifik. "Ada yang mau ditanyakan soal ukuran atau pengiriman?" lebih mengundang daripada "Halo".
• Minta nomor WhatsApp di awal chat. Kalau pengunjung pergi sebelum dibalas, kamu tetap bisa follow up.
• Siapkan balasan otomatis di luar jam online, supaya pengunjung tahu kapan akan dibalas.
• Nyalakan asisten AI untuk menjawab pertanyaan umum 24 jam, termasuk malam hari dan akhir pekan. Tim tetap bisa ambil alih kapan saja. Cara kerjanya dibahas di artikel AI customer service.
• Lihat halaman yang sedang dibuka pengunjung. Dari situ kamu tahu produk mana yang sedang mereka pertimbangkan, jadi jawabannya bisa lebih tepat.

Pertanyaan yang Sering Ditanyakan

Apakah live chat membuat website jadi lambat?

Kode widget dimuat dengan atribut async dan diletakkan di akhir halaman, jadi isi halaman tetap tampil lebih dulu tanpa menunggu widget.

Bisa dipasang di landing page atau toko online?

Bisa, selama kamu bisa menambahkan kode ke halamannya. Live chat dibales.ai bisa dipasang di website buatan sendiri, landing page, maupun toko online.

Bisa kirim gambar lewat live chat?

Untuk saat ini Live Chat dibales.ai mendukung pesan teks dan tombol, seperti balasan cepat dan link.

Berapa biayanya?

Live Chat tersedia di paket Pro dibales.ai, bersama Omnichannel Inbox dan WhatsApp. Detail harganya ada di halaman harga.

Kesimpulan

Memasang live chat di website cukup tiga langkah: atur tampilan widget, salin satu baris kode, lalu tempel sebelum tag </body>. Setelah aktif, chat dari website bisa dibalas dari inbox yang sama dengan WhatsApp, Instagram, dan TikTok. Lihat fitur lengkapnya di halaman Live Chat dibales.ai, dan siapkan juga contoh chat follow up untuk pengunjung yang meninggalkan nomor WhatsApp.