Cara Memasang Live Chat di Toko Shopify (Langkah demi Langkah)

Untuk memasang live chat di toko Shopify, tempelkan kode widget chat di file layout/theme.liquid milik tema Anda, tepat sebelum </body>. Setelah itu, semua halaman toko online Anda menampilkan tombol chat, kecuali checkout. Prosesnya sekitar lima menit, dan Anda tidak perlu aplikasi dari Shopify App Store.

Panduan ini memakai SealReply sebagai contoh. Langkah-langkahnya sama untuk sebagian besar layanan chat yang memberi Anda skrip untuk ditempel.

Apa yang perlu disiapkan sebelum mulai?

Anda butuh tiga hal, dan tidak ada yang berbayar:

• Akses ke admin Shopify, dengan izin untuk mengubah tema. Pemilik toko sudah punya; staf butuh izin tema.
• Akun SealReply gratis. Paket Gratis tidak punya batas waktu dan tidak meminta data pembayaran.
• Sekitar lima menit, ditambah beberapa menit lagi kalau toko Anda masih dikunci halaman kata sandi (lihat Langkah 4).

Domain sendiri (misalnya toko.example.com) membantu tetapi tidak wajib. Domain ini hanya penting kalau Anda harus memverifikasi lewat data DNS.

Langkah 1: Tambahkan toko Anda dan salin kodenya

Panduan penyiapan di konsol menuntun Anda, satu layar untuk setiap langkah.

1. Daftar. Konsol membuka Siapkan chat Anda.
2. Di Situs web Anda, isi Nama situs, misalnya Batik Sekar, lalu isi alamat toko sebagai Alamat situs web. Pakai alamat yang diketik pembeli, misalnya toko.example.com. Klik Lanjutkan.
3. Di Pasang widget, pilih Shopify 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>

data-site-key hanya milik satu toko ini. Kalau Anda punya dua toko, tambahkan masing-masing sebagai situs tersendiri, supaya setiap toko mendapat kunci dan pengaturan sendiri.

Biarkan halaman penyiapan tetap terbuka di satu tab browser. Halaman itu memeriksa setiap beberapa detik dan memberi tahu saat chat sudah dimuat di toko Anda.

Langkah 2: Tempelkan kode di theme.liquid

theme.liquid adalah file layout yang membungkus setiap halaman tema Shopify, jadi kode yang ditaruh di sana dimuat di seluruh etalase toko. Dokumentasi developer Shopify menyebutnya layout bawaan yang wajib ada di setiap tema.

1. Di admin Shopify, buka Online Store → Themes.
2. Di samping tema yang sedang aktif, klik … → Edit code.
3. Di folder layout, buka theme.liquid.
4. Cari </body> di dekat akhir file (tekan Ctrl+F, atau Cmd+F di Mac).
5. Tempelkan kode di baris tepat sebelumnya.
6. Klik Save.

Bagian akhir file sekarang terlihat seperti ini:

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

Tempelkan kode sekali saja. Kalau kode ada di theme.liquid dan juga ditambahkan lewat pengaturan tema atau file lain, pembeli bisa melihat dua tombol chat.

Langkah 3: Tambahkan alamat toko yang lain

Widget hanya dimuat di domain yang Anda izinkan, jadi snippet yang disalin orang lain tidak bisa menampilkan chat Anda di situs mereka. Pembeli bisa sampai ke toko Anda lewat beberapa alamat:

Alamat	Sudah tercakup oleh example.com?	Yang perlu dilakukan
example.com	Ya	Taruh di baris pertama. Ini domain utama.
www.example.com	Ya, subdomain ikut tercakup	Tidak perlu apa-apa.
nama-toko.myshopify.com	Tidak	Tambahkan di baris tersendiri.
Domain kedua, misalnya example.co.id	Tidak	Tambahkan di baris tersendiri.

Di konsol, buka Situs → toko Anda → Dasar lalu tulis alamat-alamatnya di Domain yang diizinkan, satu per baris. Baris pertama adalah domain utama, yaitu domain yang Anda verifikasi. Kalau nanti diganti, Anda perlu verifikasi ulang.

Kalau Anda punya banyak domain atau sering berganti domain, Anda bisa menyalakan Izinkan semua domain. Konsekuensinya: siapa pun yang menyalin kode Anda bisa menampilkan chat Anda di situs mereka.

Langkah 4: Bagaimana Shopify memverifikasi domain Anda?

Biasanya tidak ada yang perlu dilakukan. Setelah kode tersimpan di tema yang sedang dipublikasikan, buka toko Anda sekali: SealReply menemukan kode toko di beranda dan menandai domain sebagai terverifikasi. Muat ulang halaman, dan tombol chat muncul.

Widget tetap tersembunyi sampai domain terverifikasi. Verifikasi butuh langkah manual dalam dua kasus:

• Toko Anda dilindungi kata sandi. Sebelum toko dibuka, Shopify menampilkan halaman kata sandi alih-alih beranda. Di tema bawaan Shopify, Dawn, halaman itu memakai file layout sendiri, jadi kode di theme.liquid tidak ada di sana.
• Kode tidak ada di sumber HTML beranda, misalnya karena Anda memasangnya lewat Google Tag Manager.

Kalau begitu, buka Situs → toko Anda → Verifikasi domain dan pakai opsi DNS:

1. Salin Nama dan Nilai dari data TXT.
2. Tambahkan data TXT dengan isian itu di tempat DNS domain Anda dikelola:
   • Kalau domain dibeli lewat Shopify, buka Settings → Domains, buka domainnya, lalu cari pengaturan DNS-nya.
   • Kalau tidak, tambahkan di registrar domain atau penyedia DNS Anda.
3. Tunggu beberapa menit, lalu klik Periksa sekarang.

Langkah 5: Kirim chat uji

1. Di halaman penyiapan, klik Buka situs web saya. Toko Anda terbuka dengan chat yang sudah terbuka. Tautan uji berlaku 30 menit.
2. Kirim pesan sebagai pembeli.
3. Balas dari konsol.

Chat uji tidak dihitung dalam kuota chat bulanan dan tidak masuk ke laporan maupun Webhook. Selagi Anda di langkah terakhir, nyalakan notifikasi push supaya Anda tahu ada pembeli sungguhan meski konsol tertutup.

Apakah live chat berjalan di halaman checkout Shopify?

Tidak. Checkout Shopify bukan bagian dari tema Anda, jadi kode di theme.liquid tidak berjalan di sana. Dokumentasi Shopify sendiri menggambarkan checkout sebagai jenis layout yang terpisah dari halaman yang dikendalikan tema.

Ini daftar halaman tempat tombol chat muncul:

Halaman	Tombol chat
Beranda, koleksi, halaman produk	Ya
Halaman keranjang dan hasil pencarian	Ya
Halaman dan artikel blog di tema Anda	Ya
Checkout	Tidak
Halaman kata sandi sebelum toko dibuka (Dawn dan tema sejenis)	Tidak

Chat tetap hadir di halaman tempat pembeli paling banyak bertanya: soal ukuran, lama pengiriman dan retur biasanya muncul di halaman produk dan di keranjang, sebelum checkout dimulai.

Untuk menyembunyikan chat di halaman yang dirender tema Anda, misalnya halaman lowongan kerja, tambahkan di Situs → toko Anda → Aturan halaman → Halaman tanpa chat. Anda bisa menambahkan maksimal 20 aturan. Untuk menyembunyikan tombol hanya di ponsel, matikan Tampilkan tombol chat di ponsel di bagian Tampilan.

Apa yang perlu diatur untuk pembeli?

Sebuah toko menerima pertanyaan yang sama berulang-ulang: pesanan saya sampai mana, bisa kirim ke kota saya, ukuran mana yang pas. Pengaturan berikut membantu menjawabnya lebih cepat:

Pengaturan	Letaknya	Paket
Sambutan per halaman	Aturan halaman	Semua paket
FAQ di beranda chat	Beranda	Starter ke atas
Balasan cepat	Balasan cepat, lalu ketik / di chat	Semua paket
Pengingat waktu tunggu	Jam & waktu tunggu	Semua paket
Tindak lanjut prospek	Kartu Tindak lanjut di percakapan	Semua paket
Terjemahan pesan	Pengaturan → Terjemahan	Pro dan Bisnis

1. Sambutan per halaman. Tambahkan sambutan untuk halaman yang alamatnya mengandung /products/, misalnya "Ada pertanyaan soal ukuran atau pengiriman? Tanya di sini." Contoh lain per halaman: contoh pesan sambutan live chat.
2. FAQ di beranda chat. Tambahkan lama pengiriman, kebijakan retur dan metode pembayaran, supaya pembeli menemukan jawabannya sebelum bertanya.
3. Balasan cepat. Simpan jawaban untuk "Pesanan saya sampai mana?" dan "Bisa kirim ke…?" lalu sisipkan dengan mengetik / dan kata pintasnya di chat.
4. Pengingat waktu tunggu. Kalau pesan pertama pembeli belum dijawab tepat waktu (bawaannya 2 menit), chat meminta email mereka, dan balasan Anda akan sampai lewat email itu. Pertanyaan tidak hilang saat Anda sibuk atau sedang tidur.
5. Tindak lanjut prospek. Kalau sebuah chat tampak akan jadi penjualan, atur tanggal tindak lanjut berikutnya. Saat pembeli itu membuka toko Anda lagi, konsol memberi tahu halaman mana yang sedang dibukanya.

Bagaimana kalau chat tidak muncul?

Sebagian besar masalah berasal dari tema yang sedang aktif, alamat yang Anda buka, atau verifikasi. Halaman penyiapan memberi tahu yang mana:

Yang Anda lihat	Yang perlu dilakukan
Belum terdeteksi	Pastikan Anda menyimpan theme.liquid di tema yang dipublikasikan, bukan salinan draf, lalu buka toko lagi.
Verifikasi domain Anda dulu	Buka beranda sekali setelah kode disimpan. Kalau toko dilindungi kata sandi, tambahkan data DNS (Langkah 4). DNS bisa butuh beberapa menit.
Dimuat di domain lain	Alamat yang Anda buka belum ada di domain yang diizinkan, sering kali alamat .myshopify.com. Tambahkan lewat Edit domain yang diizinkan.
Situs berstatus Dijeda	Jumlah situs Anda melebihi batas paket. Tingkatkan paket, atau hapus situs lain.
Dua tombol chat	Kode ada dua kali di tema. Sisakan yang sebelum </body>.
Chat hilang setelah tema diperbarui	Salinan hasil pembaruan tidak membawa perubahan kode Anda. Tempel lagi kodenya di theme.liquid salinan itu.

Pertanyaan umum

Apakah saya butuh aplikasi Shopify untuk memasang live chat?

Tidak. Menempel satu baris kode di theme.liquid sudah cukup untuk layanan chat apa pun yang memberi Anda skrip. Nanti juga tidak ada yang perlu di-uninstall: hapus barisnya, simpan, dan chat hilang dari toko Anda.

Apakah memasang live chat di toko Shopify gratis?

Ya. Paket Gratis SealReply tidak punya batas waktu dan tidak meminta data pembayaran, dan Shopify tidak memungut biaya untuk mengubah kode tema. Paket berbayar menambahkan hal-hal seperti kartu FAQ di beranda chat dan terjemahan pesan.

Apakah widget chat membuat toko Shopify saya lambat?

Seharusnya tidak. Widget adalah skrip async berukuran sekitar 38 KB, jadi tidak menghalangi halaman Anda tampil. Kalau setiap milidetik penting, centang Muat chat setelah halaman di langkah pemasangan lalu salin versi itu: halaman Anda tampil lebih dulu dan tombol chat menyusul sesaat kemudian.

Apa yang terjadi pada chat kalau saya mengganti tema Shopify?

Chat hilang dari tema baru sampai Anda menempelkan kode di theme.liquid tema itu. Pengaturan, chat dan prospek Anda tetap aman di konsol. Kalau Anda hanya memperbarui tema yang sama, periksa salinan hasil pembaruannya, karena Shopify belum tentu membawa perubahan kode Anda.

Bisakah pembeli memakai chat di alamat myshopify.com saya?

Bisa, kalau nama-toko.myshopify.com ada di Domain yang diizinkan. Alamat itu domain yang berbeda dari domain Anda sendiri, jadi tidak tercakup oleh example.com. Tambahkan di baris tersendiri.

Bisakah saya memasang live chat saat toko masih dilindungi kata sandi?

Bisa, tetapi chat tidak akan tampil di halaman kata sandi, dan verifikasi otomatis belum bisa melihat beranda Anda. Verifikasi dengan data DNS TXT di domain Anda sendiri, lalu uji lewat tautan Buka situs web saya atau setelah toko dibuka.

Langkah selanjutnya

• Sesuaikan chat dengan tampilan toko Anda: logo, warna dan pesan sambutan di Tampilan dan Teks, dengan pratinjau langsung.
• Siapkan rencana untuk malam hari dan akhir pekan: cara agar tidak kehilangan pelanggan saat Anda offline.
• Punya situs lain yang tidak memakai Shopify? Lihat panduan umum cara memasang live chat di website.