Cara Memasang Live Chat di Website (Semua Platform)

Untuk memasang live chat di website, Anda menempelkan satu skrip pendek tepat sebelum tag penutup </body> di bagian yang dipakai semua halaman, memverifikasi bahwa domain itu milik Anda, lalu mengirim pesan uji ke diri sendiri. Di sebagian besar situs, termasuk WordPress, Shopify, Wix dan Squarespace, semuanya selesai dalam sekitar lima menit tanpa perlu coding.

Panduan ini membahas setiap langkah dengan SealReply sebagai contoh, lalu menjelaskan cara memasangnya di tiap platform, masalah yang paling sering muncul, dan apa saja yang perlu diatur setelah chat aktif. Cara yang sama berlaku untuk hampir semua layanan live chat.

Apa saja yang dibutuhkan untuk memasang live chat di website?

Memasang live chat melibatkan tiga bagian: skrip di website Anda, konsol tempat Anda menjawab, dan pemeriksaan bahwa website itu benar milik Anda. Widget live chat adalah potongan kecil JavaScript yang menampilkan tombol chat di pojok halaman; saat pengunjung menulis, pesannya dikirim ke konsol di browser Anda atau ke aplikasi di ponsel, dan balasan Anda kembali ke jendela chat yang sama.

Di SealReply, wujud nyatanya seperti ini:

1. Kode sematan. Satu tag <script> dengan kunci khusus untuk situs Anda. Kode ini memuat widget di setiap halaman tempat kode itu berada.
2. Domain yang diizinkan. Widget hanya tampil di domain yang Anda daftarkan (beserta subdomainnya). Kalau ada orang yang menyalin kode Anda ke website lain, chat tidak akan muncul di sana.
3. Verifikasi domain. Selama domain utama belum diverifikasi, widget tetap tersembunyi. Ini mencegah orang lain memasang chat atas nama Anda di situs yang bukan milik Anda.

Setelah ketiganya siap, Anda menjawab chat dari menu Percakapan di konsol. Tidak ada bagian lain dari situs yang perlu diubah: widget dirender di dalam Shadow DOM, jadi CSS halaman Anda tidak mengubah tampilannya dan CSS widget tidak bocor ke halaman Anda.

Cara pemasangan mana yang cocok untuk situs Anda?

Cara yang tepat tergantung pada bagaimana situs Anda dibuat: tempelkan kode di template atau pengaturan yang dipakai bersama oleh semua halaman. Tabel berikut menunjukkan letaknya di platform yang paling umum.

Situs Anda memakai	Tempat kode ditempel	Hal yang perlu diperhatikan
HTML biasa	Sebelum </body> di setiap halaman .html, atau di template footer bersama	Unggah ulang semua halaman yang diubah
WordPress	Plugin kode footer seperti WPCode, atau footer.php di child theme	Bersihkan cache plugin setelahnya
WooCommerce	Sama seperti WordPress	Halaman produk, keranjang dan checkout bisa punya sambutan sendiri
Shopify	layout/theme.liquid, sebelum </body>	Halaman checkout tidak menjalankan kode tema, jadi tidak ada chat di sana
Wix	Settings → Advanced → Custom Code, Body - end	Butuh paket premium dengan domain sendiri yang sudah terhubung
Squarespace	Settings → Developer Tools → Code Injection → Footer	Butuh paket Business atau lebih tinggi
Webflow	Site settings → Custom code → Footer code	Butuh paket situs berbayar; publikasikan ulang setelahnya
Google Tag Manager	Tag Custom HTML yang dipicu di All Pages	Verifikasi domain lewat data DNS atau file
React, Next.js dan aplikasi satu halaman lainnya	Komponen skrip bawaan framework, di root layout	Muat sekali saja, bukan per halaman

Kalau platform Anda tidak ada di tabel, cari pengaturan bernama Custom code, Third-party code, Footer code atau Edit theme code. Hampir semua pembuat website punya salah satunya.

Apa yang perlu disiapkan sebelum mulai?

Anda butuh tiga hal: akses untuk mengubah situs, akun gratis, dan sekitar lima menit.

• Akses untuk mengubah website: file HTML, admin WordPress, admin Shopify, atau pengaturan di pembuat website yang Anda pakai.
• Akun SealReply gratis. Ruang kerja baru dimulai dengan paket Gratis, yang tidak punya batas waktu dan tidak meminta data pembayaran, jadi Anda bisa memasang dan menguji tanpa membayar.
• Sekitar lima menit. Kalau akhirnya Anda memverifikasi domain lewat DNS, data DNS bisa butuh beberapa menit tambahan sampai aktif.

Langkah 1: Tambahkan website Anda

Langkah pertama adalah memberi tahu SealReply untuk website mana chat ini dibuat. Setelah Anda daftar, konsol membuka penyiapan singkat bernama Siapkan chat Anda, dengan empat langkah: Situs web Anda, Pasang, Uji chat dan Mulai menjawab.

1. Di Situs web Anda, isi Nama situs yang mudah Anda kenali, misalnya Toko Batik Sekar.
2. Di Alamat situs web, masukkan alamat yang diketik pengunjung, misalnya toko.example.com.
3. Klik Lanjutkan.

Widget chat hanya dimuat di domain website ini dan subdomainnya. Kalau ada orang yang menyalin kode Anda ke situs lain, chat tidak akan muncul di sana.

Kalau Anda melewati penyiapan ini, situs bisa ditambahkan nanti dari Situs → Tambah situs, dengan dua isian yang sama.

Langkah 2: Salin kode sematan

Langkah kedua adalah menyalin kode milik situs Anda. Langkah Pasang widget menampilkannya, bentuknya seperti ini:

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

data-site-key khusus untuk situs Anda, jadi setiap website Anda mendapat kode sendiri. Pilih platform Anda di Situs web Anda memakai (HTML, WordPress, Shopify, Wix, Squarespace, Webflow atau Google Tag Manager) untuk melihat langkah-langkahnya, lalu klik Salin.

Kode yang sama nanti juga ada di Situs → situs Anda → Pemasangan. Kalau Anda ingin chat menunggu sampai bagian lain halaman selesai dimuat, centang Muat chat setelah halaman lalu salin versi kode itu: konten Anda tampil lebih dulu, tombol chat menyusul sesaat kemudian.

Langkah 3: Tempelkan kode di situs Anda

Aturannya sama di semua platform: tempel kode sekali saja, tepat sebelum </body>, di bagian yang dipakai oleh semua halaman. Kalau ditempel dua kali, widget dimuat dua kali; kalau hanya ditempel di satu halaman, chat hanya muncul di halaman itu.

HTML biasa atau pembuat website dengan pengaturan footer

1. Buka template atau file yang berisi footer situs Anda. Di situs statis, itu berarti setiap halaman .html; kebanyakan pembuat website punya pengaturan "custom code" atau "footer code" sebagai gantinya.
2. Tempelkan kode tepat sebelum </body>.
3. Publikasikan perubahannya.

WordPress

Ada dua pilihan. Pilihan pertama lebih aman karena kode tidak hilang saat tema diperbarui.

Pilihan A — dengan plugin kode (disarankan)

1. Di admin WordPress, pasang plugin yang bisa menambahkan kode ke footer, misalnya WPCode.
2. Buat snippet footer baru, tempelkan kode, lalu simpan.

Pilihan B — langsung di tema

1. Buka Appearance → Theme File Editor lalu buka footer.php.
2. Tempelkan kode tepat sebelum </body> lalu klik Update File.

Plugin cache dan block theme butuh sedikit perhatian tambahan; panduan lengkapnya ada di cara memasang live chat di WordPress. Berjualan dengan WooCommerce? Cara pasangnya sama persis, tetapi halaman produk, keranjang dan checkout sebaiknya punya sambutan masing-masing: lihat cara memasang live chat di WooCommerce.

Shopify

1. Di admin Shopify, buka Online Store → Themes.
2. Di samping tema yang sedang aktif, klik … → Edit code.
3. Buka layout/theme.liquid.
4. Tempelkan kode tepat sebelum </body> lalu klik Save.

Bagian akhir theme.liquid akan terlihat seperti ini:

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

Kalau nanti Anda memublikasikan tema lain, tempelkan kode di tema itu juga. Toko Shopify punya dua hal tambahan yang perlu diurus, yaitu beberapa alamat toko dan halaman checkout; lihat cara memasang live chat di Shopify.

Wix

1. Di dasbor Wix, buka Settings → Advanced → Custom Code lalu klik Add Custom Code.
2. Tempelkan kode. Di Add Code to Pages, pilih All pages dan Load code once.
3. Di Place Code in, pilih Body - end, lalu simpan.

Wix hanya menjalankan kode kustom di situs yang sudah dipublikasikan dan terhubung ke domain; lihat panduan resmi Wix tentang menyematkan kode kustom di situs Anda. Dalam praktiknya, itu berarti Anda butuh paket premium.

Squarespace

1. Buka Settings → Developer Tools → Code Injection.
2. Tempelkan kode di Footer lalu simpan.

Code injection membutuhkan paket Squarespace Business atau lebih tinggi.

Webflow

1. Buka site settings → Custom code.
2. Tempelkan kode di Footer code (sebelum tag </body>) lalu simpan.
3. Publikasikan situs lagi. Webflow belum menerapkan kode sampai Anda melakukannya.

Kode kustom membutuhkan paket situs Webflow berbayar.

Google Tag Manager

Kalau situs Anda sudah memuat Google Tag Manager, Anda bisa menambahkan chat di sana tanpa menyentuh file situs:

1. Tambahkan tag baru bertipe Custom HTML lalu tempelkan kode.
2. Atur trigger ke All Pages lalu simpan.
3. Klik Submit untuk memublikasikan versi container.

React, Next.js dan aplikasi satu halaman lainnya

Di sini tidak ada </body> untuk ditempeli, dan tag <script> mentah di JSX tidak akan bekerja seperti yang Anda harapkan. Muat skripnya dengan komponen skrip bawaan framework, sekali saja, di root layout: cara memasang live chat di Next.js.

Langkah 4: Tambahkan semua alamat yang dipakai pengunjung

Widget hanya tampil di domain yang tercantum di Situs → situs Anda → Dasar → Domain yang diizinkan, jadi tambahkan setiap alamat yang mungkin dipakai pengunjung untuk masuk. Tulis satu domain per baris. Baris pertama adalah domain utama, yaitu domain yang Anda verifikasi; kalau nanti diganti, Anda perlu verifikasi ulang.

Alamat tambahan yang umum:

• Situs yang sama tanpa www., kalau domain utama Anda ditulis dengan www..
• Alamat nama-toko.myshopify.com milik toko Shopify.
• Alamat staging atau pratinjau yang ingin Anda pakai untuk uji coba.

Contohnya, toko batik yang berjualan di example.com dan juga di Shopify cukup menulis dua baris: example.com di baris pertama, lalu nama-toko.myshopify.com di baris kedua. Subdomain sudah ikut tercakup, jadi www.example.com tidak perlu ditulis lagi. Sebaliknya, kalau baris pertama berisi www.example.com, alamat tanpa www. belum tercakup.

Kalau situs Anda punya banyak domain atau sering berganti domain, nyalakan Izinkan semua domain. Widget lalu bisa dimuat di website mana pun, tanpa daftar yang harus dijaga. Konsekuensinya, orang yang menyalin kode Anda ke situsnya sendiri juga bisa memakainya, sehingga Anda mungkin menerima pengunjung yang tidak ada hubungannya dengan bisnis Anda. Domain utama tetap harus diverifikasi.

Langkah 5: Verifikasi domain Anda

Verifikasi domain membuktikan bahwa domain utama adalah milik Anda; sebelum selesai, widget tetap tersembunyi. Ini cukup dilakukan sekali per situs.

Biasanya Anda tidak perlu melakukan apa-apa. Setelah kode ada di beranda dan sudah dipublikasikan, buka situs Anda sekali. SealReply mencari kode sematan situs ini di beranda Anda; kalau ketemu, domain dianggap terverifikasi, dan tombol chat muncul saat Anda memuat ulang halaman.

Kalau kode tidak ada di sumber HTML beranda (misalnya karena dipasang lewat Google Tag Manager, atau hanya di beberapa halaman), buka Situs → situs Anda → Verifikasi domain lalu pilih salah satu cara:

• Tambahkan data DNS TXT. Salin nama dan nilainya ke pengaturan DNS domain Anda, di registrar atau penyedia DNS. Bisa butuh beberapa menit sampai aktif.
• Publikasikan file. Unggah file teks kecil ke alamat yang ditampilkan, dengan isi yang ditampilkan. Cara ini sering lebih cepat kalau Anda bisa mengunggah file ke situs.

Lalu klik Periksa sekarang.

Langkah 6: Kirim pesan uji ke diri sendiri

Langkah terakhir adalah uji chat, supaya Anda melihat kedua sisi sebelum pengunjung sungguhan datang. Buka website Anda: halaman penyiapan memeriksa widget setiap beberapa detik dan menampilkan Widget sudah dimuat di situs web Anda. begitu widget terdeteksi.

Lalu:

1. Klik Buka situs web saya. Chat langsung terbuka dengan sendirinya. Tautan uji berlaku 30 menit; kalau habis, klik Buka lagi.
2. Kirim pesan seolah-olah Anda pengunjung.
3. Jawab pesan itu dari halaman penyiapan, atau dari kotak masuk, begitu pesannya muncul.

Sekarang Anda tahu apa yang dilihat pengunjung dan dari mana Anda menjawab. Chat uji tidak dihitung dalam kuota chat bulanan dan tidak masuk ke laporan maupun Webhook.

Apakah live chat membuat website jadi lambat?

Skrip SealReply berukuran sekitar 38 KB dan dimuat secara asinkron, jadi tidak menghalangi halaman Anda tampil. Skrip async, seperti dijelaskan dalam referensi MDN untuk elemen script, diunduh bersamaan dengan bagian lain halaman, bukan membuat browser berhenti dan menunggunya.

Dua hal yang menjaga dampaknya tetap kecil:

• Muat chat setelah halaman. Centang opsi ini saat menyalin kode, maka konten Anda tampil lebih dulu dan tombol chat menyusul sesaat kemudian. Cocok untuk situs yang sangat memperhatikan kecepatan; perintah ke JavaScript widget yang dipanggil sebelum halaman selesai dimuat tidak akan berjalan.
• Hanya satu salinan kode. Pastikan snippet tidak ada sekaligus di plugin dan di tema.

Kenapa chat tidak muncul?

Kalau chat tidak muncul, halaman penyiapan dan bagian Pemasangan di situs Anda menunjukkan apa yang dilihat SealReply. Penyebab paling umum dan cara mengatasinya:

Yang Anda lihat	Artinya	Yang perlu dilakukan
Belum terdeteksi	Belum ada halaman situs Anda yang memuat widget	Pastikan perubahan sudah disimpan dan dipublikasikan, lalu bersihkan cache plugin atau CDN.
Verifikasi domain Anda dulu	Domain belum diverifikasi	Pastikan kode ada di beranda dan sudah dipublikasikan, lalu buka situs Anda lagi. Kalau tidak bisa, tambahkan data DNS atau file lalu klik Periksa sekarang.
Dimuat di domain lain	Anda membuka alamat yang tidak diizinkan, sering kali www. lawan tanpa www., atau alamat staging	Tambahkan alamatnya lewat Edit domain yang diizinkan.
Situs berstatus Dijeda	Jumlah situs Anda melebihi batas paket	Tingkatkan paket, atau hapus situs lain.
Situs berstatus Lama tidak terdeteksi	Widget pernah dimuat, tetapi akhir-akhir ini tidak	Pastikan kode masih ada di halaman; pembaruan tema atau tema baru bisa menghapusnya. Tempel ulang kodenya.
Tidak ada apa-apa di konsol, tetapi situs Anda memakai Content Security Policy	Browser memblokir alamat widget	Izinkan alamat-alamat di bawah ini.

Content Security Policy adalah header HTTP tempat sebuah website memberi tahu browser dari alamat mana saja halamannya boleh memuat kode dan data; panduan CSP dari MDN menjelaskan cara kerjanya. Kalau situs Anda mengirim header ini, header itu harus mengizinkan widget:

script-src https://cdn.sealreply.com;
connect-src https://api.sealreply.com wss://rt.sealreply.com;
img-src https://api.sealreply.com;

Daftar terbaru selalu ada di dokumentasi widget kami.

Di halaman mana chat sebaiknya muncul, dan di mana tidak?

Secara bawaan, chat muncul di setiap halaman yang memuat kode, dan itu sudah tepat untuk kebanyakan situs. Menu Situs → situs Anda → Aturan halaman memungkinkan Anda mengubahnya tanpa menyentuh kode:

• Halaman tanpa chat: tidak ada tombol dan tidak ada kunjungan yang dicatat di halaman-halaman ini, diatur lewat aturan URL, maksimal 20. Berguna untuk langkah checkout, halaman akun, atau landing page yang sudah punya ajakan bertindak sendiri.
• Sambutan per halaman: pesan sambutan yang sesuai dengan halamannya, misalnya "Ada pertanyaan soal motif atau ukuran batik ini?" di halaman produk. Maksimal 20 aturan.
• Undangan chat: setelah pengunjung berada beberapa detik di sebuah halaman atau menggulir cukup jauh, undangan singkat muncul di samping tombol chat.

Untuk menyembunyikan tombol hanya di ponsel, matikan Tampilkan tombol chat di ponsel di bagian Tampilan. Halaman Anda tetap bisa membuka chat lewat tautan buatan Anda sendiri.

Apa yang perlu diatur setelah live chat terpasang?

Chat sudah berjalan, dan empat pengaturan berikut membuatnya jauh lebih berguna:

1. Sesuaikan dengan tampilan situs Anda. Di Tampilan dan Teks, tambahkan logo, warna dan pesan sambutan, per bahasa, dengan pratinjau langsung di samping pengaturan. Untuk ide kalimat, lihat contoh pesan sambutan live chat ini.
2. Terima chat baru di ponsel. Pasang aplikasi SealReply (iPhone dari App Store, Android dari file instalasi di website kami), atau nyalakan Notifikasi push di perangkat ini di menu akun konsol. Notifikasi hanya menampilkan situs dan halaman, bukan isi pesan pengunjung.
3. Atur jam operasional. Di Jam & waktu tunggu, nyalakan jam operasional. Di luar jam itu, pengunjung meninggalkan pesan alih-alih menunggu balasan yang tidak akan datang, dan Anda menjawabnya lewat email dari Pesan offline.
4. Simpan beberapa balasan cepat. Pertanyaan soal ongkos kirim, retur dan jam buka muncul setiap hari. Simpan jawabannya di Balasan cepat lalu sisipkan dengan mengetik / dan kata pintasnya.

Pertanyaan umum

Bisakah saya memasang live chat di website secara gratis?

Bisa. Paket Gratis SealReply tidak punya batas waktu dan tidak meminta data pembayaran, dan sudah termasuk widget chat, konsol dan aplikasi ponsel. Paket berbayar menambahkan hal-hal seperti lebih banyak situs dan kursi agen, terjemahan pesan, dan opsi menyembunyikan "Powered by SealReply"; halaman harga mencantumkan isi setiap paket.

Apakah saya harus bisa coding untuk memasang live chat?

Tidak. Anda cukup menyalin satu snippet dan menempelkannya di pengaturan yang sudah ada di platform Anda, seperti plugin footer WordPress, theme.liquid di Shopify, atau pengaturan kode kustom di Wix, Squarespace dan Webflow. Hanya aplikasi satu halaman yang dibuat dengan React atau Next.js yang butuh developer untuk memuat skrip di root layout.

Kenapa saya harus memverifikasi domain?

Verifikasi domain mencegah orang lain menampilkan chat atas nama Anda di website yang bukan milik Anda. Kalau kode sudah ada di beranda, membuka situs sekali biasanya langsung memverifikasinya secara otomatis. Kalau kode tidak ada di sumber HTML beranda, tambahkan data DNS TXT atau unggah file kecil, lalu klik Periksa sekarang.

Bisakah satu akun dipakai untuk beberapa website?

Bisa. Tambahkan setiap website di menu Situs; masing-masing mendapat kode sematan, domain yang diizinkan dan pengaturan sendiri, dan semua chatnya masuk ke kotak masuk Percakapan yang sama. Jumlah situs yang bisa ditambahkan tergantung paket Anda; situs yang melebihi batas akan dijeda, bukan dihapus.

Bisakah saya membalas chat dari ponsel?

Bisa. Aplikasi SealReply tersedia di App Store untuk iPhone (kecuali di Tiongkok daratan), dan ponsel Android memasangnya dari website kami. Anda juga bisa membuka konsol di browser ponsel dan menyalakan notifikasi push di sana.

Apakah chat juga berjalan di ponsel pengunjung?

Ya. Kode yang sama menampilkan chat di ponsel, tablet dan komputer, jadi tidak ada yang perlu dipasang tambahan. Kalau tombolnya menutupi sesuatu di layar kecil, matikan Tampilkan tombol chat di ponsel di bagian Tampilan; halaman Anda tetap bisa membuka chat lewat tautan.

Langkah selanjutnya

Chat Anda sudah aktif. Dua panduan lagi membantu Anda memanfaatkannya secara maksimal:

• Tim kecil dan tidak selalu di depan layar? Baca cara agar tidak kehilangan pelanggan saat Anda offline.
• Pelanggan menulis dalam bahasa lain? Terjemahan pesan di paket Pro dan Bisnis menerjemahkan dua arah, langsung di konsol.