Widget Obrolan #

Panduan Integrasi Widget Obrolan Situs Web #

Tambahkan widget obrolan yang ramah pengguna ke situs web Anda yang memungkinkan pengunjung berkomunikasi langsung melalui antarmuka situs Anda. Proses integrasinya mudah dan akan memberikan situs web Anda kemampuan perpesanan bawaan.

Membuat dan Mengonfigurasi Widget Obrolan #

Cara menuju ke sana:

1. Klik Settings di dekat bagian bawah bilah sisi kiri. (Di ponsel, ketuk ikon menu ☰ di sudut atas terlebih dahulu untuk membuka bilah sisi.)
2. Di bilah sisi kiri Pengaturan, di bawah Channels, klik Channels.
3. Temukan kartu Website chat widget.
4. Jika Anda belum memiliki widget, klik Connect untuk membuatnya dengan nama tampilan dan pesan selamat datang.
5. Setelah dibuat, klik Manage kapan saja untuk membuka panel konfigurasi lengkap.

Perubahan yang Anda simpan akan diterapkan ke widget langsung Anda secara otomatis — tidak perlu menempelkan ulang kode instalasi setelah melakukan perubahan.

Pratinjau langsung terletak tepat di sebelah pengaturan: contoh halaman web dengan widget Anda yang sebenarnya berjalan di atasnya, menampilkan warna, posisi, logo, ikon peluncur, dan popup proaktif Anda persis seperti yang akan dilihat oleh pengunjung. Pratinjau ini mengikuti suntingan Anda saat Anda membuatnya, jadi Anda tidak perlu menyimpan untuk melihat seperti apa perubahan warna atau tema. Anda bahkan dapat mengeklik tombol obrolan di dalam pratinjau untuk membuka widget dan mencobanya.

Apa yang Dapat Anda Sesuaikan #

Panel Manage diatur ke dalam empat bagian.

Tampilan #

• Tema gaya: Ubah gaya seluruh widget dalam satu klik. Enam tema masing-masing mengatur tampilan, warna, sudut, dan font secara bersamaan: Classic (tampilan solid asli — bilah header berwarna pada panel datar), Glass (panel transparan buram yang mengaburkan halaman di belakangnya dengan lembut, dengan header dan kotak pesan mengambang sebagai kartu bulat di dalamnya), Midnight (Glass dalam warna gelap), Bloom (merah muda lembut, ekstra bulat), Ember (Glass oranye hangat), dan Mono (hitam-putih, sudut tajam). Tema adalah titik awal — setelah memilih satu, Anda masih dapat mengubah warna atau pengaturan apa pun secara individual. Widget baru dimulai dengan Glass; peralihan bersifat instan di mana pun widget disematkan, tanpa perubahan kode di situs Anda.
• Sudut dan Font: Dua pengaturan gaya independen. Sudut mengatur seberapa bulat panel, gelembung, dan tombol (Bulat, Lembut, atau Tajam), dan Font memilih jenis huruf yang dilihat pengunjung (Default, Serif, Rounded, atau Mono) — font berasal dari apa yang sudah ada di perangkat pengunjung, jadi tidak ada tambahan yang dimuat di situs Anda.
• Nama tampilan: Ditampilkan di header widget.
• Logo: Unggah gambar yang muncul di bagian atas obrolan. Gunakan logo perusahaan Anda atau foto profil yang ramah.
• Ikon peluncur: Ikon pada tombol obrolan mengambang itu sendiri. Pilih salah satu ikon bawaan (gelembung obrolan, pesawat kertas, tanda tanya, dan lainnya), gunakan kembali logo yang Anda unggah, atau unggah gambar terpisah milik Anda sendiri — berguna jika Anda ingin foto anggota tim asli menyapa pengunjung.
• Warna: Lima warna, masing-masing menamai bagian widget yang diwarnainya. Warna merek adalah tombol mengambang, header, dan pesan pengunjung itu sendiri, dengan Teks merek untuk teks yang berada di atasnya. Gelembung bot adalah latar belakang balasan bot Anda dan indikator pengetikan, dengan Teks gelembung bot untuk kata-kata di dalamnya dan titik pengetikan animasi. Jendela obrolan adalah panel di belakang semua pesan. Pilih warna gelembung bot yang jelas berbeda dari warna Merek Anda — jika keduanya cocok, kedua sisi percakapan akan memiliki warna yang sama dan pengunjung tidak dapat membedakan balasan bot Anda dari balasan mereka sendiri. Gelembung bot abu-abu muda dengan teks gelap di samping warna merek Anda adalah kombinasi yang aman.
• Posisi: Tempatkan tombol obrolan mengambang di sudut kanan bawah atau kiri bawah, dengan offset horizontal dan vertikal (dalam piksel) jika tumpang tindih dengan sesuatu yang lain di halaman Anda.
• Pertanyaan awal: Saran balasan cepat (chip yang dapat diklik) yang ditampilkan dalam obrolan agar pengunjung dapat memulai dengan satu ketukan alih-alih mengetik — misalnya “Berapa harga Anda?” atau “Apakah Anda menawarkan dukungan?” — hingga 10.
• Baris footer: Baris kecil opsional dari teks Anda sendiri di bawah kotak pesan, misalnya “Didukung oleh Agensi Anda”. Secara default fitur ini mati, dan tidak ada yang ditampilkan di bawah kotak pesan saat fitur ini mati. Nyalakan, ketik teks Anda (hingga 40 karakter) dan, jika Anda suka, tambahkan tautan yang dimulai dengan https://; pengunjung yang mengeklik teks tersebut akan membuka halaman itu di tab baru. Agensi menggunakannya untuk mencantumkan nama mereka sendiri pada widget yang mereka buat untuk klien.

Perilaku #

• Pesan pembuka: Pesan pertama yang dilihat pengunjung saat mereka membuka obrolan (contohnya, “Ada yang bisa saya bantu?”).
• Suara: Memutar suara saat ada pesan baru masuk di obrolan.
• Minta izin notifikasi: Secara opsional meminta pengunjung untuk mengizinkan notifikasi browser, sehingga mereka mendapatkan peringatan jika ada balasan meskipun mereka telah berpindah tab.
• Gelembung popup proaktif: Gelembung kecil opsional yang muncul di sebelah tombol obrolan untuk mengundang orang. Aktifkan untuk mengatur pesannya, teks tombol terima/tolak, dan berapa detik waktu tunggu sebelum muncul. Gelembung akan tertutup sendiri setelah 20 detik jika pengunjung tidak mengekliknya. Ini adalah satu-satunya teks yang ditampilkan widget di samping tombol obrolan: tidak ada pengaturan untuk label permanen di sebelah tombol.
• Kecepatan respons AI: Penggeser antara Lebih lambat (lebih manusiawi — AI akan menunggu sejenak sebelum membalas) dan Kecepatan maks (lebih seperti robot — balasan muncul secepat mungkin). Seimbang berada di tengah. Pesan pertama dari balasan akan muncul sesuai jeda yang diatur penggeser, dengan indikator mengetik yang muncul sesaat sebelumnya.
• Tampilkan catatan sibuk saat AI bekerja: Nonaktif secara default. Saat balasan membutuhkan waktu lebih dari beberapa detik, misalnya karena agen Anda sedang mencari sesuatu di sistem lain, pengunjung akan melihat baris singkat di samping titik-titik pengetikan: “Sedang menyiapkan jawaban Anda” setelah 5 detik, “Sedang mencarikan itu untuk Anda” setelah 15 detik, lalu “Masih diproses, sebentar lagi” dan permintaan maaf atas waktu tunggu jika berlangsung lebih lama. Balasan cepat hanya akan menampilkan titik-titik saja. Baris tersebut mengikuti bahasa widget, dan hanya muncul saat AI Anda benar-benar sedang mengerjakan balasan, tidak pernah muncul saat AI dimatikan untuk obrolan tersebut atau saat seseorang telah mengambil alih.

Bahasa #

Widget ini sudah multibahasa secara bawaan — tidak ada yang perlu diaktifkan.

• Ini memilih bahasa pengunjung secara otomatis. Pertama, sistem melihat bahasa yang dideklarasikan halaman Anda dalam HTML-nya (<html lang="it">), kemudian beralih ke bahasa browser pengunjung. Jika keduanya bukan bahasa yang kami dukung, label widget akan ditampilkan dalam bahasa yang Anda gunakan untuk menulis pesan pembuka, dan pesan pembuka, gelembung popup, serta pertanyaan awal Anda akan muncul persis seperti yang Anda tulis.

• Bahasa halaman yang bertentangan dengan salam Anda tidak dipercaya. Beberapa pembuat situs menyertakan lang="en" di setiap halaman apa pun bahasa situs tersebut. Ketika halaman menyatakan satu bahasa dan Anda menulis pesan pembuka dalam bahasa lain, widget menganggap nilai halaman tersebut sebagai default pembuat: widget akan mengikuti bahasa browser pengunjung sebagai gantinya, dan jika itu bukan bahasa yang kami dukung, widget akan menggunakan bahasa yang Anda gunakan untuk menulis. Halaman yang mengubah nilai lang-nya saat pengunjung memilih bahasa di situs Anda akan selalu diikuti. Jika Anda lebih suka tidak bergantung pada semua ini, kunci bahasa tersebut di bagian Perilaku (Behavior).

• Atau pilih sendiri. Bidang Bahasa widget di bagian Perilaku diatur ke Otomatis secara default, yang merupakan deteksi di atas. Pilih bahasa di sana dan label widget (bidang Nama depan, Email, dan Telepon pada formulir pengunjung beserta teks contohnya, pemberitahuan privasi, tombol) akan tetap dalam bahasa tersebut apa pun yang dikatakan halaman atau browser. Gunakan ini jika pembuat situs Anda tidak menyatakan bahasa yang tepat, atau jika Anda menginginkan satu bahasa tetap untuk setiap pengunjung.

• Bahasa yang didukung: Inggris, Belanda, Jerman, Prancis, Spanyol, Italia, Portugis, Rumania, Polandia, Arab, Finlandia, Filipina, Slovenia, Thailand, Bangla, Jepang, Norwegia (Bokmål), dan Turki. Ini adalah daftar untuk tombol dan label widget itu sendiri.

• Bahasa yang ditulis dari kanan ke kiri akan ditata dari kanan ke kiri. Untuk pengunjung berbahasa Arab, Ibrani, Persia, dan Urdu, seluruh jendela obrolan akan mencerminkan arah tersebut: header, gelembung pesan, titik pengetikan, formulir pengunjung, dan kotak pesan semuanya dimulai dari kanan. Tombol gelembung tetap berada di sudut yang Anda pilih. Pengunjung berbahasa Ibrani, Persia, dan Urdu melihat label dalam bahasa Inggris (atau bahasa yang Anda kunci), tetapi tata letaknya tetap mengikuti bahasa mereka. Pesan yang ditulis dalam arah yang berbeda, seperti balasan bahasa Inggris dalam obrolan bahasa Arab, tetap terbaca dalam urutan yang benar.

• Pesan Anda diterjemahkan untuk Anda. Setiap kali Anda menyimpan, pesan pembuka, gelembung popup proaktif, dan pertanyaan awal Anda diterjemahkan ke dalam kedelapan belas bahasa di atas. Anda hanya perlu menulisnya sekali, dalam bahasa apa pun yang Anda sukai: bahasa yang Anda gunakan untuk menulis dikenali dari teks itu sendiri, versi tersebut disimpan kata demi kata, dan setiap bahasa lainnya adalah terjemahannya. Tidak masalah bahasa apa yang diatur di akun Anda.

• Tulis versi Anda sendiri untuk suatu bahasa. Bagian Terjemahan di panel Kelola, tepat di bawah Perilaku, memungkinkan Anda mengganti terjemahan otomatis dengan kata-kata Anda sendiri, misalnya bahasa Spanyol formal (“usted”) di mana terjemahan otomatisnya bersifat informal. Pilih bahasa di bawah Bahasa, lalu isi salah satu dari: Pesan pembuka, Pesan popup, Teks terima dan Teks tolak pada popup (ditampilkan saat gelembung popup aktif), serta Pertanyaan awal. Setiap bidang menampilkan terjemahan otomatis dalam warna abu-abu; Mulai dari terjemahan otomatis akan menyalinnya sehingga Anda dapat mengeditnya dari sana. Apa pun yang Anda biarkan kosong akan tetap menggunakan terjemahan otomatis. Bahasa yang Anda tulis sendiri akan dicantumkan terlebih dahulu, ditandai Kata-kata Anda sendiri, dan Hapus kata-kata (bahasa) saya akan kembali ke terjemahan otomatis untuk bahasa tersebut. Kata-kata Anda sendiri akan tetap tersimpan saat Anda mengedit teks asli di kemudian hari; hanya terjemahan otomatis yang akan diperbarui.

• Tombol popup juga diterjemahkan. Tombol Terima dan Tolak pada gelembung popup proaktif diterjemahkan bersama dengan pesan Anda yang lain, sehingga pengunjung berbahasa Spanyol tidak lagi melihat tombol dalam bahasa Inggris.

• Tulis setiap pesan dalam satu bahasa saja. Jika Anda memasukkan dua bahasa dalam bidang yang sama — misalnya, satu baris bahasa Inggris dan satu baris bahasa Italia — seluruhnya akan dianggap sebagai satu pesan dan diterjemahkan apa adanya, sehingga pengunjung berbahasa Italia akhirnya melihat kalimat yang sama dua kali. Tulis sekali saja, dalam bahasa apa pun yang Anda sukai.

• AI membalas dalam bahasa pengunjung. Apa pun bahasa yang diketik seseorang, agen Anda akan menjawab dalam bahasa yang sama, terlepas dari bahasa apa yang ditampilkan oleh label widget. Jika Anda lebih suka agen selalu menjawab dalam satu bahasa tetap, tentukan hal tersebut dalam instruksi agen Anda.

• Atur bahasa per halaman dalam kode sematan. Menjalankan satu widget di situs berbahasa Inggris dan salinan terjemahannya? Tambahkan data-lang ke tag skrip widget di setiap halaman. data-lang="es" menampilkan widget dalam bahasa Spanyol di halaman tersebut apa pun yang dikatakan browser; data-lang="page" membuatnya mengikuti nilai <html lang="..."> halaman itu sendiri (sehingga lang="es-MX" memberikan bahasa Spanyol), bahkan ketika pesan pembuka Anda ditulis dalam bahasa lain. Ini mengungguli bidang Bahasa widget, yang pada gilirannya mengungguli deteksi otomatis. Sebagai contoh:

<script src="https://api.youraiconnector.com/v1/chat-widget/CONFIG_ID" data-lang="page" defer></script>

Simpan kode sematan dari panel Kelola sebagaimana adanya dan hanya tambahkan atribut data-lang. Untuk panel obrolan inline, letakkan data-lang pada <div data-chat-widget="…"> sebagai gantinya.

Tips: jika situs web Anda tidak menetapkan atribut lang pada tag <html>-nya, tambahkan satu. Ini adalah sinyal terkuat yang kami miliki untuk memilih bahasa yang tepat, terutama bagi pengunjung yang menjelajah dari luar negeri.

Pengambilan Prospek & Privasi #

• Kumpulkan info pengunjung: Nonaktif secara default. Saat aktif, pengunjung akan diminta untuk memasukkan nama dan email mereka (dan opsional nomor telepon) sebelum percakapan dimulai, sehingga Anda mendapatkan prospek meskipun mereka pergi di tengah obrolan.
• Judul formulir dan Subjudul formulir: Sesuaikan judul dan penjelasan singkat yang ditampilkan di atas formulir.
• Kumpulkan nomor telepon: Aktifkan untuk juga meminta nomor telepon; jika nonaktif, hanya nama dan email yang dikumpulkan.
• Kumpulkan nama belakang: Nonaktif secara default. Aktifkan untuk menambahkan kolom wajib Nama belakang tepat setelah Nama depan. Nama tersebut disimpan pada kontak sebagai nama belakang mereka, sehingga AI Anda dan apa pun yang dicarinya di sistem Anda sendiri memiliki nama lengkap sejak pesan pertama. Pengunjung yang sudah mengisi formulir sebelum Anda mengaktifkan fitur ini tidak akan diminta lagi.
• Email balasan yang belum dibaca ke pengunjung: pengunjung yang telah meninggalkan alamat email dan belum melihat balasan Anda setelah 15 menit akan mendapatkan email yang mengarahkan mereka kembali ke obrolan. Matikan di bawah Pengaturan → Notifikasi → Pengunjung widget obrolan. Lihat Email ke pengunjung widget obrolan.

Seorang pengunjung meninggalkan nomor telepon dan telah meninggalkan situs Anda — bisakah saya melanjutkannya di WhatsApp? Bisa. Buka obrolan mereka dan pilih Lanjutkan di WhatsApp dari menu tiga titik (WhatsApp Web atau WhatsApp Business harus terhubung). Your AI Connector membuat percakapan WhatsApp tertaut untuk orang yang sama, menyalin nama, email, dan detail mereka, dan AI meneruskan apa yang mereka katakan di situs Anda, sehingga tidak ada yang perlu mengulang pembicaraan. Obrolan situs web tetap berada di tempatnya dan kedua obrolan saling merujuk di bawah Percakapan tertaut di panel kontak. Lihat Antarmuka Obrolan.

Seorang pengunjung meninggalkan email mereka dan tidak pernah melakukan pemesanan — bisakah saya menindaklanjutinya melalui email? Ya, dengan otomatisasi. Langkah Buat kontak dengan Saluran yang diatur ke Email akan mengubah alamat yang ditinggalkan pengunjung menjadi kontak email di Saluran email Anda yang terhubung, dan langkah Kirim pesan setelahnya akan terkirim sebagai email; balasan akan masuk ke Obrolan untuk agen email Anda. Resep lengkapnya, termasuk cara menghentikan urutan setelah mereka menyatakan telah memesan, ada di Otomatisasi → Contoh: tindak lanjut email untuk prospek obrolan situs web.

Bisakah agen AI menawarkan peralihan ke WhatsApp sendiri? Bisa, dan tidak memerlukan fitur tambahan — satu baris dalam instruksi agen sudah cukup. Buat Tautan Pendek untuk nomor WhatsApp Anda dengan pesan isi otomatis seperti “Hai, saya sedang mengobrol di situs web Anda dan ingin melanjutkannya di sini”, lalu beri tahu agen kapan harus mengirimnya, misalnya: “Jika pengunjung perlu pergi, ingin melanjutkannya nanti, atau meminta WhatsApp, tawarkan untuk melanjutkannya di sana dan kirim tautan ini: (tautan pendek Anda)”. Tautan di widget dapat diketuk, sehingga pengunjung langsung masuk ke WhatsApp dengan nomor Anda terpilih dan pesan sudah terketik sebelumnya, dan pesan pertama mereka akan membuka percakapan WhatsApp di kotak masuk Anda. Jika pengunjung meninggalkan nomor telepon yang mereka gunakan untuk mengirim pesan (dengan kode negara) di formulir widget, Your AI Connector akan menautkan kedua percakapan tersebut secara otomatis dan AI di WhatsApp sudah mengetahui obrolan situs web tersebut, persis seperti pada Lanjutkan di WhatsApp. Jika tidak ada nomor telepon yang dikumpulkan, kedua obrolan tidak akan tertaut, jadi buatlah pesan isi otomatis yang cukup spesifik agar agen WhatsApp mengetahui dari mana orang tersebut berasal.

• Wajibkan persetujuan kebijakan privasi: Secara opsional, wajibkan pengunjung untuk menyetujui kebijakan privasi Anda sebelum mengobrol, dan tetapkan URL yang dituju oleh kebijakan tersebut.

Apa yang disimpan widget di browser pengunjung, dan apakah saya perlu menempatkannya di balik banner cookie? Tidak ada yang disimpan hanya dengan memuat halaman. Widget tidak menulis cookie dan tidak menggunakan penyimpanan browser sampai pengunjung memilih untuk mengobrol: mengirim pesan pertama, mengisi formulir info pengunjung, atau menyetujui kebijakan privasi Anda. Sejak saat itu, widget menyimpan ID percakapan acak dan salinan percakapan di browser tersebut, sebagai penyimpanan pihak pertama di domain Anda sendiri, sehingga obrolan tetap ada saat mereka kembali. Widget tidak memuat skrip analitik atau pelacakan apa pun dan tidak menetapkan cookie pihak ketiga. Karena tidak ada yang ditulis sampai pengunjung meminta untuk mengobrol, hal ini termasuk dalam penyimpanan yang sangat diperlukan untuk layanan yang diminta oleh pengunjung, sehingga Anda dapat memuatnya tanpa harus menempatkannya di balik banner persetujuan. Jika situs Anda tetap menggunakan alat persetujuan, tidak masalah untuk menempatkan widget di baliknya; obrolan akan muncul begitu pengunjung memberikan persetujuan.

Saluran & Sematan #

• Tombol lampiran: Memungkinkan pengunjung mengirim gambar dan file dalam obrolan.
• Pemilih emoji: Menambahkan pemilih emoji di sebelah kotak pesan.
• Tautan saluran: Secara opsional sertakan tautan WhatsApp, Instagram, atau Messenger agar pengunjung dapat melanjutkan percakapan di platform yang mereka sukai. Ini hanya muncul setelah Anda menghubungkan nomor WhatsApp (WhatsApp Business atau WhatsApp Web), Instagram, atau Messenger. Mengaktifkan tautan WhatsApp akan mengisi nomor Anda yang terhubung; tautan tersebut tetap dapat diedit, jadi setelah Anda mengubah nomor, Anda dapat mengetikkan yang baru di sana.
• Tombol tindakan: Baris pintasan di bagian atas obrolan yang membawa pengunjung ke suatu tempat alih-alih ke dalam percakapan — lihat Tombol tindakan di bawah.
• Daftar putih domain: Batasi situs web mana yang diizinkan untuk menyematkan widget Anda. Tambahkan domain tempat Anda menginstalnya (misalnya example.com atau *.example.com); biarkan kosong untuk mengizinkan domain apa pun.
• Negara yang diblokir: Jauhkan widget dari pengunjung di negara yang tidak Anda layani. Pengunjung yang lokasi jaringannya berada di negara yang Anda pilih tidak akan pernah melihat widget tersebut, dan obrolan apa pun yang mereka coba mulai akan ditolak. Biarkan kosong untuk mengizinkan semua orang. Lihat Menjaga bot dan pengurasan kredit tetap keluar di bawah.
• Arahkan obrolan ini ke: Pilih agen yang harus menangani obrolan yang berasal dari kode yang akan Anda salin. Biarkan pada Default akun untuk menggunakan perutean widget obrolan normal Anda. Lihat Kirim halaman berbeda ke agen berbeda di bawah.
• Cuplikan sematan: Pilih Gelembung mengambang atau Inline dan salin kode instalasi (lihat di bawah).
• Tautan demo klien: Tempel alamat situs web apa pun dan klik Buat tautan untuk mendapatkan tautan yang dapat dibagikan yang membuka situs tersebut dengan widget Anda berjalan di atasnya, tanpa perlu menginstal apa pun di pihak mereka. Setiap tautan yang Anda buat akan dicantumkan, dan Anda dapat menonaktifkan masing-masing tautan tersebut. Lihat Tampilkan widget di situs web orang lain di bawah.
• Tautan bagikan: Tautan siap pakai yang membuka asisten Anda di halamannya sendiri, layar penuh, tanpa memerlukan situs web. Salin dan kirim ke mana saja. Lihat Bagikan tautan langsung ke obrolan di bawah.

Di bagian bawah panel, tindakan Delete chat widget akan menghapus widget dari situs web Anda secara langsung — ini tidak dapat dibatalkan, dan pengunjung tidak akan lagi melihat gelembung obrolan.

Tombol tindakan #

Beberapa pengunjung tidak ingin mengobrol. Mereka menginginkan nomor telepon, alamat, atau email Anda, dan mereka menginginkannya dalam satu ketukan. Tombol tindakan adalah baris pintasan di bagian atas panel obrolan untuk tujuan tersebut.

Tambahkan hingga enam tombol. Masing-masing memiliki label (kata-kata pada tombol) dan tujuan, dan tujuannya bergantung pada tindakan yang Anda pilih:

Tombol-tombol ini tidak menggunakan kredit. Mengetuk salah satu tombol tidak mengirim pesan dan tidak memulai percakapan — tombol tersebut hanya membawa pengunjung ke tempat yang mereka minta. Hanya percakapan nyata dengan agen AI Anda yang menggunakan kredit, persis seperti sebelumnya.

Beberapa hal yang perlu diketahui:

• Tombol tetap terlihat saat pengunjung mengobrol. Seseorang dapat mengajukan dua pertanyaan dan tetap mengetuk Petunjuk arah setelahnya tanpa memuat ulang halaman.
• Label Anda ditampilkan persis seperti yang Anda tulis. Tidak seperti pesan pembuka dan pertanyaan awal Anda, label tombol tidak diterjemahkan secara otomatis, jadi jika Anda melayani pengunjung dalam beberapa bahasa, buat label tetap singkat dan jelas (atau tulis dalam bahasa utama Anda).
• Isi tombol dengan benar atau tidak akan tersimpan. Jika nomor telepon, alamat email, atau tautan tidak valid, panel akan memberi tahu dan memblokir Simpan perubahan alih-alih menerbitkan tombol yang tidak akan berfungsi di situs Anda.
• Ini bukan jawaban FAQ. Tombol tindakan hanya mengirim orang ke tempat lain; tombol tersebut tidak membalas dengan teks standar. Pertanyaan adalah tugas agen AI Anda, dan agen tersebut menjawabnya dari basis pengetahuan Anda. Jika Anda ingin menyarankan apa yang harus ditanyakan, gunakan pertanyaan awal di bawah Tampilan.

Apa yang tidak dapat Anda sesuaikan #

Panel Kelola adalah keseluruhan rangkaian opsi. Secara khusus:

• Tidak ada CSS atau stylesheet kustom. Penataan gaya terbatas pada apa yang ditawarkan oleh pemilih tema, sudut, font, dan warna — Anda tidak dapat menyuntikkan CSS Anda sendiri ke dalam widget, dan aturan pada halaman Anda tidak akan menjangkau ke dalamnya.
• Tidak ada teks placeholder kustom di dalam kotak pesan.
• Tidak ada penyematan video di dalam obrolan.

Jika salah satu hal tersebut menjadi penghalang bagi Anda, sematan inline memberi Anda kendali paling besar: widget berada dalam wadah di halaman Anda sendiri, yang Anda atur ukuran dan posisinya sendiri.

Mencegah Bot dan Pengurasan Kredit #

Setiap balasan AI memakan kredit, jadi skrip (atau satu orang yang bosan) yang membuka obrolan demi obrolan di situs web Anda adalah satu hal yang harus diwaspadai oleh widget publik. Widget menangani sebagian besar hal ini dengan sendirinya, dan dua pengaturan pada panel Kelola memungkinkan Anda memperketatnya untuk situs Anda.

• Daftar putih domain. Hanya situs web yang Anda cantumkan yang dapat menampilkan widget. Siapa pun yang menyalin kode sematan Anda ke situs lain tidak akan mendapatkan apa-apa.
• Negara yang diblokir. Pengunjung yang lokasi jaringannya berada di negara yang Anda blokir tidak akan pernah melihat widget, dan obrolan yang mereka coba mulai akan ditolak. Lokasi berasal dari koneksi pengunjung: seseorang yang menggunakan VPN akan muncul sebagai negara VPN tersebut, dan pengunjung yang lokasinya tidak dapat ditentukan akan tetap diizinkan masuk alih-alih diblokir. Pratinjau Anda sendiri di dalam aplikasi akan tetap berfungsi meskipun Anda memblokir negara tempat Anda berada.
• Percakapan baru per koneksi. Satu koneksi (dalam praktiknya satu alamat rumah atau kantor) dapat membuka 20 percakapan baru per hari pada widget. Pengunjung yang kembali dan melanjutkan obrolan mereka yang sudah ada tidak dihitung, hanya percakapan baru yang dihitung, sehingga skrip yang terus memulai obrolan baru untuk memanen balasan AI akan kehabisan jatah setelah 20 kali, sementara pengunjung asli tidak akan menyadarinya. Jika banyak orang berbagi satu koneksi di situs Anda (kampus, pusat panggilan), tingkatkan jumlahnya melalui REST API dengan max_new_chats_per_ip_daily; 0 akan mematikan pemeriksaan ini.
• Pemeriksaan manusia (opsional). Pengunjung melewati pemeriksaan Cloudflare Turnstile singkat sebelum pesan pertama mereka terkirim, sehingga skrip tidak dapat memulai obrolan sama sekali. Kebanyakan orang tidak perlu mengeklik apa pun; Cloudflare hanya menampilkan kotak centang jika mereka tidak yakin. Ini menggunakan kunci Turnstile gratis Anda sendiri, lihat Tambahkan pemeriksaan manusia di bawah.
• Batas bawaan. Selain itu, setiap sesi peramban dibatasi dalam jumlah pesan yang dapat dikirim per menit dan per hari, dan agen yang menjawab obrolan akan berhenti membalas pengunjung setelah mencapai Maksimal pesan AI per obrolan yang ditetapkan di bawah Batas respons.

Tidak ada dari hal ini yang mengidentifikasi perangkat atau orang: widget tidak menyimpan apa pun di browser pengunjung sampai mereka memilih untuk mengobrol (lihat di atas), dan tidak ada sidik jari (fingerprinting).

Tambahkan pemeriksaan manusia (Cloudflare Turnstile) #

Aktifkan ini jika bot terus membuka obrolan di situs web Anda dan pengaturan di atas tidak cukup. Pemeriksaan berjalan satu kali, tepat sebelum pesan pertama pengunjung dikirim. Pengunjung yang lolos dapat terus mengobrol selama 24 jam tanpa melihatnya lagi, dan siapa pun yang kembali ke percakapan sebelumnya masih dapat membacanya sebelum pemeriksaan.

1. Masuk ke akun Cloudflare Anda (akun gratis sudah cukup) dan buka Turnstile.
2. Klik Add widget, beri nama, dan tambahkan setiap domain tempat widget obrolan Anda berjalan (misalnya yourshop.com). Biarkan mode widget pada Managed.
3. Salin Site key dan Secret key yang ditampilkan Cloudflare kepada Anda.
4. Di aplikasi, buka panel Manage widget obrolan Anda, aktifkan Human check before chatting, tempel kedua kunci tersebut, dan simpan.

Apa yang diharapkan:

• Pemeriksaan tetap nonaktif sampai kedua kunci diisi, jadi mengaktifkannya tanpa kunci tidak akan pernah mengunci pengunjung.
• Jika pengunjung gagal dalam pemeriksaan, atau membiarkannya tidak terselesaikan, pesan mereka tidak akan terkirim dan mereka akan mendapatkan tombol Retry.
• Pemeriksaan hanya muncul di domain yang Anda tambahkan di Cloudflare. Di domain lain mana pun, Cloudflare akan menolaknya dan tidak ada seorang pun di situs tersebut yang dapat mengirim pesan, jadi tambahkan setiap domain sebelum Anda mengaktifkannya.
• Jika situs web Anda menggunakan Kebijakan Keamanan Konten (Content Security Policy), izinkan https://challenges.cloudflare.com untuk skrip dan bingkai, atau pemeriksaan tidak dapat dimuat.
• Kunci tersebut adalah milik akun Cloudflare Anda sendiri, dan kunci rahasia tidak pernah dikirim ke peramban pengunjung Anda.

Petunjuk Instalasi #

Untuk menambahkan widget obrolan ke situs web Anda, tambahkan satu baris kode ke HTML situs Anda.

1. Buka file HTML situs web Anda di editor teks.
2. Temukan tag penutup </body> — biasanya ini berada di bagian paling akhir file.
3. Tempel baris kode ini tepat sebelum tag </body>, agar sisa halaman Anda dimuat terlebih dahulu:

<script src="https://api.youraiconnector.com/v1/chat-widget/CONFIG_ID" defer></script>

4. Ganti CONFIG_ID dengan pengidentifikasi konfigurasi unik Anda, yang ditampilkan di bagian Channels & Embed pada panel Manage. Pengidentifikasi ini khusus untuk akun Anda dan menghubungkan widget ke sistem pesan Anda.

Cuplikan ini tidak akan memperlambat situs Anda: ini adalah pemuat yang sangat kecil, dan widget itu sendiri diunduh di latar belakang tanpa memblokir halaman. Jika Anda tetap ingin widget tersebut menunggu hingga halaman Anda selesai dimuat sepenuhnya, Anda dapat membungkus URL yang sama seperti ini:

<script>
window.addEventListener('load', function () {
  var s = document.createElement('script');
  s.src = 'https://api.youraiconnector.com/v1/chat-widget/CONFIG_ID';
  s.async = true;
  document.body.appendChild(s);
});
</script>

Dan jika yang ingin Anda tunda adalah gelembung undangan kecil alih-alih pemuatan widget, itu adalah penundaan Gelembung popup proaktif di bagian Perilaku di atas — tidak perlu kode.

Menginstal di Shopify #

1. Di admin Shopify Anda, buka Toko Online > Tema.
2. Pada tema yang ditandai sebagai tema Anda saat ini (yang dipublikasikan), klik tombol … dan pilih Edit kode. Mengedit draf atau salinan tema tidak akan mengubah apa pun di toko langsung Anda.
3. Buka layout/theme.liquid dan gulir ke tag penutup </body> di dekat bagian bawah.
4. Tempel baris instalasi Anda tepat di atas </body> dan klik Simpan:

<script src="https://api.youraiconnector.com/v1/chat-widget/CONFIG_ID" defer></script>

Jika Anda menginstal widget sebelum baris instalasi menyertakan defer, editor kode Shopify akan menampilkan garis bawah merah di bawahnya. Garis bawah tersebut adalah peringatan dari pemeriksa kode Shopify tentang baris skrip tanpa defer atau async, bukan kesalahan: tema tetap tersimpan dan widget tetap berfungsi. Menambahkan defer seperti yang ditunjukkan di atas akan menghilangkan garis bawah tersebut dan tidak mengubah apa pun tentang cara kerja widget, jadi tidak perlu menginstal ulang di situs lain.

Berikut adalah contoh lengkap bagaimana file HTML Anda seharusnya terlihat setelah widget obrolan diimplementasikan:

<!DOCTYPE html>
<html>
<head>
    <title>My Website</title>
</head>
<body>
    <!-- Your existing website content would be here -->

    <!-- Chat Widget Integration -->
    <script src="https://api.youraiconnector.com/v1/chat-widget/CONFIG_ID" defer></script>
</body>
</html>

Sematkan Sebaris di Halaman (Lanjutan) #

Jika Anda lebih suka obrolan muncul sebagai bagian dari halaman Anda — misalnya di dalam bagian “Hubungi kami” khusus, tab bantuan, atau bilah sisi — alih-alih sebagai gelembung mengambang di sudut, ubah Embed snippet ke Inline di panel Manage dan salin cuplikan inline tersebut.

Tampilannya seperti ini:

<div data-chat-widget="CONFIG_ID" style="width:100%;height:600px;"></div>
<script src="https://api.youraiconnector.com/v1/chat-widget/embed.js" async></script>

<div> adalah titik pemasangan (mount point) — panel obrolan akan dirender di dalamnya dan mengisi dimensinya. Berikan gaya pada div tersebut sesuka Anda (berikan tinggi tetap, letakkan di dalam kontainer flex, tempatkan di sel grid, dll.) dan panel obrolan akan mengikuti.

Anda hanya memerlukan satu tag <script> di halaman, meskipun Anda menyematkan beberapa widget obrolan. Skrip akan memindai halaman untuk setiap <div data-chat-widget="…"> dan memasang panel obrolan di masing-masingnya.

Kapan memilih inline vs floating:

• Gelembung mengambang (floating bubble) cocok untuk tombol “Butuh bantuan?” yang selalu tersedia di seluruh situs.
• Penyematan inline (inline embed) cocok jika obrolan harus berada di tempat tertentu — halaman dukungan, bilah sisi basis pengetahuan, tab bantuan dalam aplikasi — dan terasa seperti bagian asli dari halaman tersebut.

Embed inline menggunakan kembali konfigurasi yang sama dengan gelembung mengambang (logo, pesan pembuka, pengambilan prospek, pertanyaan awal, dan sebagainya), jadi Anda tidak perlu mengatur apa pun dua kali.

Tampilkan Widget di Situs Web Orang Lain #

Anda dapat menampilkan widget obrolan Anda berjalan di situs web yang tidak Anda kontrol — tanpa kode, tanpa perlu akses ke situs mereka. Ini adalah cara tercepat untuk menunjukkan kepada calon pelanggan seperti apa tampilan asisten di halaman mereka sendiri.

1. Buka panel Manage dan gulir ke Channels & Embed.
2. Di bagian Client demo link, ketik alamat situs web (contohnya www.theircompany.com).
3. Opsional: di bawah kolom tersebut, pilih Agent yang akan menjawab dalam demo ini, misalnya agen yang Anda buat dari situs web prospek itu sendiri agar agen tersebut dapat membahas layanan, harga, dan FAQ mereka. Biarkan pada Account default untuk menggunakan perutean widget obrolan normal Anda.
4. Klik Create link. Tautan akan disalin untuk Anda dan muncul di daftar di bawah kolom tersebut, lengkap dengan tombol Copy dan Open serta agen yang digunakannya.
5. Kirim tautan tersebut kepada siapa pun yang ingin Anda tunjukkan.

Membuka tautan tersebut akan memuat situs web itu dengan widget obrolan Anda mengambang di atasnya, persis seperti tampilannya jika diinstal. Siapa pun yang memiliki tautan tersebut dapat membukanya — tidak ada yang perlu dimasuki (login).

Beberapa hal yang perlu diketahui:

• Obrolan dari demo adalah nyata. Pesan yang dikirim pengunjung dalam demo akan masuk ke kotak masuk Anda dan dijawab oleh agen Anda, serta menggunakan kredit seperti percakapan lainnya.
• Halaman tidak bermerek. Halaman tersebut menampilkan situs web mereka dan widget Anda, dan tidak ada yang lain.
• Beberapa situs web tidak dapat dibingkai. Sejumlah situs (bank, pengecer besar, apa pun di balik pengaturan keamanan yang ketat) memblokir halaman lain untuk menampilkannya. Jika itu terjadi, tautan tetap berfungsi: tautan tersebut akan menampilkan jendela peramban tiruan yang netral alih-alih situs yang sebenarnya, dengan widget Anda aktif di atasnya sehingga demo tetap menjalankan fungsinya.
• Itu tidak mengubah situs web mereka. Tidak ada yang diinstal dan tidak ada yang dimodifikasi — demo hanya ada di dalam tautan tersebut.
• Matikan tautan saat demo selesai. Klik Matikan di sebelah tautan dalam daftar dan konfirmasi. Sejak saat itu, siapa pun yang membukanya akan melihat halaman yang menyatakan bahwa tautan telah dimatikan. Widget Anda dan tautan demo lainnya tetap berfungsi. Tautan yang sudah dimatikan tidak dapat diaktifkan kembali; buatlah yang baru sebagai gantinya.
• Tautan yang disalin sebelum 25 September 2026. Tautan demo yang dibuat sebelum daftar tersebut ada tidak akan muncul di dalamnya. Tautan tersebut tetap berfungsi sampai Anda mengklik Matikan tautan tersebut di bawah daftar, yang akan mematikan semuanya sekaligus (dan Aktifkan kembali akan membalikkannya).

Tautan demo yang dibuat tanpa agen menggunakan perutean default akun Anda, tidak peduli apa pengaturan Arahkan obrolan ini ke. Dengan agen yang dipilih, setiap obrolan dari tautan tersebut ditetapkan ke agen itu dan dijawab olehnya. Widget tetap mempertahankan tampilan, nama, dan pesan pembukanya sendiri. Tautan tersebut membawanya sebagai &agent=AGENT_ID; menambahkan itu ke tautan lama secara manual juga berhasil (gunakan &, bukan ?, karena tautan tersebut sudah berisi ?).

Jika Anda kemudian menghapus agen yang digunakan oleh tautan demo, tautan tersebut akan tetap berfungsi: obrolannya akan dialihkan ke perutean default akun Anda, dan daftar tersebut akan menampilkan “deleted agent, uses the default” di sebelahnya. Menghapus agen yang menjadi default widget obrolan Anda tidak akan memengaruhi tautan yang disematkan ke agen lain.

Bagikan Tautan Langsung ke Obrolan #

Terkadang tidak ada situs web untuk menempatkan widget — Anda ingin memberikan tautan kepada seseorang agar mereka dapat langsung berbicara dengan asisten Anda. Setiap widget obrolan memilikinya:

1. Buka panel Kelola dan gulir ke Saluran & Sematan.
2. Temukan Tautan bagikan (terletak tepat di bawah tautan demo klien).
3. Klik Salin untuk mengambil tautan, atau Buka untuk mencobanya sendiri.

Membukanya tidak menampilkan apa pun selain asisten Anda, memenuhi seluruh layar — tidak ada situs web di belakangnya, tidak ada gelembung untuk diklik terlebih dahulu, tidak ada yang perlu diinstal. Letakkan di bio Instagram Anda, kode QR di selebaran, tanda tangan email, atau pesan WhatsApp ke prospek.

Tautan bagikan mengikuti perutean default widget obrolan Anda. Untuk membuka agen tertentu sebagai gantinya, tambahkan ?agent=AGENT_ID ke akhir tautan; setiap obrolan darinya kemudian ditetapkan ke agen tersebut dan dijawab olehnya, sementara halaman tetap mempertahankan nama dan pesan pembuka widget Anda.

Beberapa hal yang perlu diketahui:

• Obrolan dari tautan adalah nyata. Obrolan tersebut masuk ke kotak masuk Anda, agen Anda menjawabnya, dan obrolan tersebut menggunakan kredit seperti percakapan lainnya.
• Halaman tersebut tidak membawa merek kami. Halaman tersebut hanya menampilkan asisten Anda dan tidak ada yang lain, serta dijauhkan dari hasil pencarian.
• Ini berfungsi pada alamat Anda sendiri. Jika penyedia Anda menjalankan aplikasi di domain mereka sendiri, tautan tersebut juga menggunakan alamat itu, sehingga tidak ada yang asing muncul di dalamnya.
• Satu pengunjung per tautan, per browser. Siapa pun yang membukanya tetap memiliki identitas yang sama di browser tersebut, sehingga kembali lagi nanti akan melanjutkan percakapan yang sama alih-alih memulai percakapan orang asing. Browser yang berbeda, atau tautan widget yang berbeda, adalah pengunjung yang berbeda.

Kirim Halaman Berbeda ke Agen Berbeda #

Secara default, setiap obrolan yang masuk melalui widget Anda ditangani oleh agen yang sama. Anda dapat menggantinya per halaman, sehingga pengunjung di halaman harga Anda berbicara dengan agen penjualan Anda sementara pengunjung di halaman bantuan Anda berbicara dengan agen dukungan Anda, semuanya dari satu widget obrolan.

Ada dua cara untuk mendapatkan kodenya:

• Dari agen. Di halaman Agen AI, klik tombol </> pada baris tersebut, atau buka agen dan buka tab Titik Masuk-nya. Bagaimanapun, Anda akan mendapatkan cuplikan siap tempel yang sudah diarahkan ke agen tersebut.

  Tab Titik masuk agen juga memiliki panel Widget obrolan situs web yang menunjukkan berapa banyak obrolan situs web yang sudah ditangani oleh agen tersebut. Obrolan dari sematan (embed) langsung menjangkau agen, jadi Anda tidak perlu membuat aturan titik masuk untuk obrolan tersebut — agen tanpa aturan sama sekali tetap akan menjawab sematannya.

  Tombol </> hanya muncul pada agen yang aktif. Agen yang dijeda akan menerima obrolan tetapi tidak akan pernah membalas, jadi opsi tersebut disembunyikan hingga Anda mengaktifkannya kembali. Tidak ada saluran untuk disiapkan bagi agen — agen dapat mengambil obrolan dari saluran mana pun.

• Dari pengaturan widget. Di Pengaturan → Saluran → Kelola pada widget obrolan Anda, atur Arahkan obrolan ini ke dan salin cuplikan di bawahnya. Mengubah menu tarik-turun akan menulis ulang cuplikan tersebut.

Cuplikan mengambang membawa tujuan di alamatnya:

<script src="https://api.youraiconnector.com/v1/chat-widget/CONFIG_ID?agent=AGENT_ID" defer></script>

Cuplikan inline membawanya pada <div> sebagai gantinya, sehingga satu halaman dapat menampung beberapa obrolan yang menuju ke tempat berbeda:

<div data-chat-widget="CONFIG_ID" data-agent="AGENT_ID" style="width:100%;height:600px;"></div>
<script src="https://api.youraiconnector.com/v1/chat-widget/embed.js" async></script>

Cuplikan yang disalin sebelum kampanye dihentikan membawa ?campaign= atau data-campaign= sebagai gantinya. Cuplikan tersebut tetap berfungsi, jadi tidak ada yang perlu ditempel ulang.

Beberapa hal yang perlu diketahui:

• Gunakan tombol salin daripada mengetik ID secara manual. Jika ID tidak cocok dengan agen di akun Anda, obrolan tetap berfungsi tetapi akan kembali ke perutean default Anda.
• Seseorang yang sudah berada di tengah percakapan akan tetap bersama siapa pun yang mereka ajak bicara sejak awal, meskipun mereka kemudian mendarat di halaman yang mengarah ke tempat lain. Ini mencegah percakapan berubah kepribadian di tengah jalan.
• Tujuan khusus halaman lebih diprioritaskan daripada default akun Anda dan pemicu kata kunci.

Beri Tahu Widget Siapa Pengunjungnya (Lanjutan) #

Jika Anda menempatkan widget obrolan di dalam area anggota, portal pelanggan, atau aplikasi tempat orang sudah masuk, situs Anda sudah mengetahui siapa mereka. Anda dapat menyerahkan informasi tersebut ke widget agar pengunjung tidak dimintai detail yang telah mereka berikan sebelumnya, dan agar AI Anda dapat menggunakan apa yang sudah Anda ketahui tentang mereka.

Tambahkan blok pengaturan kecil sebelum skrip widget:

<script>
  window.chatWidgetSettings = {
    visitor: {
      id: "12345",
      name: "Maria",
      email: "maria@example.com",
      phone: "+391234567890"
    },
    data: {
      plan: "Professional",
      customer_since: "2024",
      last_order: "A-2291"
    }
  };
</script>
<script src="https://api.youraiconnector.com/v1/chat-widget/CONFIG_ID" defer></script>

Halaman Anda harus mengisi nilai-nilai tersebut di sisi server, dari siapa pun yang sedang masuk.

Untuk menyimpan nama belakang juga, tambahkan last_name di sebelah name di blok visitor (data-visitor-last-name pada sematan inline). Ini bersifat opsional: nama dan email saja sudah cukup untuk melewati formulir, terlepas dari apakah Kumpulkan nama belakang aktif atau tidak.

Dua hal akan terjadi:

• Formulir “Sebelum kita mulai…” dilewati. Dengan nama dan email yang diberikan, pengunjung langsung masuk ke percakapan, dan detail tersebut disimpan pada kontak mereka persis seperti jika mereka telah mengetiknya sendiri.
• Semua yang ada di bawah data diserahkan ke AI Anda. Apa pun yang Anda masukkan di sana — paket, nomor pesanan, tanggal perpanjangan, saldo kredit, berapa banyak kursi yang mereka miliki — menjadi bagian dari apa yang diketahui AI tentang orang tersebut, sehingga AI dapat menjawab “kapan paket saya diperpanjang?” tanpa harus meminta mereka menjelaskan siapa mereka terlebih dahulu. Gunakan nama bidang apa pun yang masuk akal bagi Anda; nama tersebut akan muncul pada kontak di bawah Bidang Kustom. Hingga 20 nilai, dikirim baru dengan setiap pesan, jadi jika paket berubah di tengah percakapan, AI akan melihat yang baru.

Untuk sematan inline, Anda dapat menempatkan informasi yang sama pada <div> sebagai gantinya, yang berguna ketika satu halaman menampung beberapa obrolan:

<div data-chat-widget="CONFIG_ID"
     data-visitor-name="Maria"
     data-visitor-email="maria@example.com"
     data-visitor-data='{"plan":"Professional"}'
     style="width:100%;height:600px;"></div>
<script src="https://api.youraiconnector.com/v1/chat-widget/embed.js" async></script>

Jika situs Anda hanya mengetahui siapa pengunjungnya setelah halaman dimuat — misalnya, aplikasi satu halaman di mana proses masuk terjadi tanpa memuat ulang halaman — panggil ini kapan pun Anda memiliki detailnya, dan widget akan memperbarui dirinya sendiri:

<script>
  window.chatWidget.setVisitor({
    visitor: { id: "12345", name: "Maria", email: "maria@example.com" },
    data: { plan: "Professional" }
  });
</script>

Beberapa hal yang perlu diketahui:

• Jika dua orang berbeda masuk di komputer yang sama, orang kedua akan memulai percakapan baru alih-alih melihat obrolan orang pertama. Widget mendeteksi perubahan orang tersebut dan mengatur ulang dirinya sendiri.
• Secara mandiri, ini ditujukan untuk konteks, bukan untuk masuk ke akun seseorang. Percakapan tetap dipisahkan seperti biasanya, jadi meneruskan id tidak memungkinkan siapa pun membuka obrolan orang lain, dan seseorang yang menggunakan perangkat atau browser berbeda akan memulai percakapan baru di sana. Untuk melanjutkan percakapan di seluruh perangkat, masuk ke id seperti yang dijelaskan selanjutnya.
• Ini bersifat opsional. Widget di halaman publik biasa tidak memerlukan ini dan berperilaku persis seperti sebelumnya.

Lanjutkan percakapan yang sama di perangkat apa pun (ID pengunjung yang masuk) #

Jika pelanggan Anda memiliki akun, Anda dapat membuat obrolan mereka mengikuti mereka: masuk di ponsel, lanjutkan di laptop, dan itu adalah percakapan yang sama dengan kontak yang sama di kotak masuk Anda, dan AI tetap mengetahui semua yang telah dikatakan. Untuk itu, Your AI Connector memerlukan bukti bahwa pengunjung tersebut benar-benar orang yang dinyatakan oleh halaman Anda, jika tidak, siapa pun dapat mengetikkan nomor pelanggan ke browser mereka dan membaca obrolan pelanggan tersebut. Buktinya adalah tanda tangan yang Anda hitung di server Anda.

1. Di panel Kelola widget, di bawah Saluran & Sematan, temukan Pengunjung yang masuk dan klik Hasilkan rahasia. Salin rahasia identitas tersebut. Simpan hanya di server Anda; jangan pernah meletakkannya di halaman itu sendiri.

2. Saat server Anda merender halaman untuk pelanggan yang telah masuk, hitung HMAC-SHA256 dari ID pelanggan tersebut menggunakan rahasia tersebut, sebagai string heksadesimal huruf kecil:

// Node.js
const hash = require("crypto").createHmac("sha256", IDENTITY_SECRET).update(customerId).digest("hex");

// PHP
$hash = hash_hmac('sha256', $customerId, IDENTITY_SECRET);

# Python
import hmac, hashlib
hash = hmac.new(IDENTITY_SECRET.encode(), customer_id.encode(), hashlib.sha256).hexdigest()

3. Masukkan ID dan hash di blok pengaturan, di samping nama dan email yang sudah Anda teruskan:

<script>
  window.chatWidgetSettings = {
    visitor: {
      id: "12345",
      hash: "3f2a…e91c",
      name: "Maria",
      email: "maria@example.com"
    }
  };
</script>
<script src="https://api.youraiconnector.com/v1/chat-widget/CONFIG_ID" defer></script>

Sematan inline menggunakan nilai yang sama dengan data-visitor-hash pada <div>, dan window.chatWidget.setVisitor({ visitor: { id, hash } }) berfungsi untuk aplikasi yang membuat pengguna masuk tanpa memuat ulang halaman.

Apa yang terjadi setelah tanda tangan diperiksa:

• Obrolan pelanggan disimpan di bawah akun mereka, bukan di bawah browser, sehingga percakapannya sama di setiap perangkat dan setiap browser tempat mereka masuk, dan menjadi satu kontak di kotak masuk Anda.
• Pesan mereka sebelumnya dimuat di perangkat baru, dan AI melanjutkan dari tempat mereka berhenti.
• Jika tanda tangan salah, widget akan berperilaku seperti sebelumnya secara diam-diam, sebagai obrolan normal per-browser, dan mencetak alasannya di konsol browser agar pengembang dapat menemukannya. Pengunjung Anda tidak akan pernah melihat kesalahan.
• ID dibandingkan persis seperti yang Anda kirimkan, jadi tandatangani nilai yang sama dengan yang Anda teruskan sebagai id, dan gunakan ID yang sama untuk orang yang sama di mana pun.

Dua hal yang perlu diketahui:

• Buat ulang di panel Kelola memberi Anda rahasia baru. Halaman yang masih masuk dengan rahasia lama akan kembali ke obrolan normal per-browser sampai server Anda menggunakan rahasia baru. Percakapan yang ada tetap disimpan; percakapan tersebut terikat pada ID pelanggan, bukan pada rahasia.
• Percakapan yang dilakukan seseorang sebelum masuk, sebagai pengunjung anonim, tetap menjadi obrolan terpisah. Percakapan berbasis akun dimulai dengan pesan pertama yang mereka kirim saat masuk.

Ubah Pengaturan Widget dari Kode Anda Sendiri (API) #

Segala sesuatu di panel Kelola widget juga dapat diubah melalui REST API, yang berguna jika Anda mengelola banyak situs web atau ingin tombol lampiran dimatikan secara otomatis untuk klien. Kirim PATCH ke https://api.youraiconnector.com/v1/chat-widget-configs/CONFIG_ID dengan kunci API Anda dan hanya kolom yang ingin Anda ubah — misalnya {"show_upload_button": false} menyembunyikan tombol lampiran, {"show_emoji_button": false} menyembunyikan pemilih emoji, dan {"launcher_icon": "chat-dots"} menukar ikon peluncur. CONFIG_ID adalah pengidentifikasi yang sama seperti dalam skrip sematan Anda. Daftar lengkap kolom yang diterima (nama, pesan pembuka, warna, ikon peluncur, domain yang diizinkan, formulir info pengunjung, pemberitahuan privasi, tema, sudut, dan gaya font) ada di Referensi API di bawah Chat Widget. Situs web akan menerapkan perubahan saat halaman dimuat berikutnya.

Apa yang Diharapkan Setelah Instalasi #

Setelah Anda menambahkan skrip ke situs web Anda, widget obrolan akan secara otomatis membuat tombol obrolan di sudut situs web Anda (kanan bawah secara default). Widget tetap berada di posisi tetap saat pengguna menggulir halaman Anda, memastikan widget tersebut selalu dapat diakses.

Saat pengunjung mengeklik tombol ini, tombol tersebut akan diperluas menjadi jendela obrolan penuh tempat mereka dapat memulai percakapan, yang menampilkan pesan pembuka Anda. Jika Kumpulkan info pengunjung aktif, formulir kecil akan muncul terlebih dahulu untuk menanyakan nama dan email mereka (dan opsional nomor telepon) sebelum mereka dapat mengetik.

Antarmuka obrolan beradaptasi secara otomatis dengan berbagai ukuran layar, sehingga berfungsi dengan lancar di perangkat desktop maupun seluler.

Menguji Implementasi Anda #

Setelah menambahkan widget ke situs Anda, uji apakah widget tersebut berfungsi:

1. Buka situs web Anda di browser.
2. Klik tombol obrolan untuk membuka widget.
3. Kirim pesan uji dan pastikan Anda mendapatkan balasan.
4. Ulangi pada perangkat atau browser yang berbeda untuk memastikan widget berfungsi di mana saja.

Jika widget obrolan tidak muncul di situs Anda, periksa hal-hal berikut:

1. Pastikan Anda telah mengganti CONFIG_ID dengan pengidentifikasi konfigurasi Anda yang sebenarnya.
2. Pastikan tag skrip ditempatkan sebelum tag penutup </body>.
3. Periksa kode untuk kesalahan pengetikan.
4. Di Shopify, pastikan Anda telah mengedit tema yang dipublikasikan dan mengeklik Simpan. Edit yang dilakukan pada draf atau tema duplikat tidak akan pernah mencapai toko langsung Anda.

Di Balik Firewall Perusahaan #

Jika widget dimuat untuk publik tetapi tidak untuk staf di jaringan kantor, hampir pasti jaringan tersebut memblokir domain tempat widget dimuat. Minta tim TI Anda untuk mengizinkan, melalui HTTPS normal pada port 443:

• Domain dalam cuplikan sematan Anda — alamat di baris <script src="..."> yang Anda salin dari panel Kelola.
• api.youraiconnector.com — widget juga mengirimkan pesannya ke sini.

Tidak ada lagi yang perlu dibuka: tidak ada port tambahan dan tidak ada aturan masuk. Jika widget masih tidak muncul setelah itu, buka konsol pengembang browser Anda di halaman tersebut dan kirimkan kepada kami apa yang dilaporkannya — permintaan yang diblokir akan menyebutkan domain yang ditolak, yang biasanya merupakan jawaban lengkapnya.