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, Bulat, 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 tombol tersebut menutupi 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 pertanyaan.

Perilaku #

• Pesan pembuka: Pesan pertama yang dilihat pengunjung saat mereka membuka obrolan (misalnya, “Ada yang bisa saya bantu?”).
• Suara: Memutar suara saat pesan baru masuk ke obrolan.
• Minta izin notifikasi: Secara opsional meminta pengunjung untuk mengizinkan notifikasi peramban, sehingga mereka mendapatkan peringatan jika ada balasan meskipun mereka telah berpindah tab.
• Gelembung popup proaktif: Gelembung kecil opsional yang muncul di samping tombol obrolan untuk mengundang orang. Aktifkan untuk mengatur pesannya, teks tombol terima/tolak, dan berapa detik waktu tunggu sebelum muncul. Gelembung akan menyembunyikan dirinya sendiri setelah 20 detik jika tidak ada yang mengekliknya (angka tersebut bersifat tetap), dan setelah pengunjung mengeklik Nanti saja, gelembung tersebut tidak akan muncul lagi selama sisa kunjungan mereka. Jendela obrolan itu sendiri tidak akan pernah terbuka dengan sendirinya: jendela tersebut terbuka saat pengunjung mengeklik tombol obrolan atau gelembung, dan tetap terbuka sampai mereka menutupnya.
• Kecepatan respons AI: Penggeser antara Lebih lambat (lebih manusiawi — AI akan menunggu sejenak sebelum membalas) dan Kecepatan maks (lebih robotik — balasan muncul secepat mungkin). Seimbang berada di tengah-tengah.

Bahasa #

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

• Widget ini memilih bahasa pengunjung secara otomatis. Pertama, widget akan melihat bahasa yang dideklarasikan halaman Anda di HTML-nya (<html lang="it">), kemudian beralih ke bahasa browser pengunjung. Jika keduanya bukan bahasa yang kami dukung, label widget itu sendiri akan ditampilkan dalam bahasa Inggris, sementara pesan pembuka, gelembung popup, dan pertanyaan awal Anda akan muncul persis seperti yang Anda tulis.
• Atau pilih sendiri. Bidang Bahasa widget di bagian Perilaku diatur ke Otomatis secara default, yang merupakan deteksi di atas. Pilih bahasa di sana agar label widget itu sendiri (bidang Nama depan, Email, dan Telepon pada formulir pengunjung beserta contoh teksnya, pemberitahuan privasi, tombol) tetap dalam bahasa tersebut, apa pun bahasa halaman atau browsernya. Gunakan opsi ini jika pembuat situs Anda tidak mendeklarasikan bahasa yang tepat, atau saat Anda menginginkan satu bahasa tetap untuk setiap pengunjung.
• Bahasa yang didukung: Inggris, Belanda, Jerman, Prancis, Spanyol, Italia, Portugis, Rumania, Polandia, Arab, Finlandia, Filipina, Slovenia, Thai, Bangla, dan Jepang. Ini adalah daftar untuk tombol dan label widget itu sendiri.
• Pesan Anda diterjemahkan untuk Anda. Setiap kali Anda menyimpan, pesan pembuka, gelembung popup proaktif, dan pertanyaan awal Anda akan diterjemahkan ke dalam keenam belas bahasa di atas. Anda hanya perlu menulisnya sekali, dalam bahasa apa pun yang Anda sukai: bahasa yang Anda gunakan akan dikenali dari teks itu sendiri, versi tersebut akan disimpan kata demi kata, dan setiap bahasa lainnya adalah terjemahannya. Tidak masalah bahasa apa yang diatur di akun Anda.
• 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 — seluruh teks tersebut akan dianggap sebagai satu pesan dan diterjemahkan apa adanya, sehingga pengunjung berbahasa Italia akan melihat kalimat yang sama dua kali. Tuliskan 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, sebutkan hal tersebut dalam instruksi agen Anda.

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 memasukkan nama dan email (serta nomor telepon secara opsional) 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 meminta nomor telepon juga; jika nonaktif, hanya nama dan email yang dikumpulkan.

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). DM Champ 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.

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, DM Champ 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, Instagram, atau Messenger.
• 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, dan obrolan apa pun yang mereka coba mulai akan ditolak. Biarkan kosong untuk mengizinkan semua orang. Lihat Mencegah bot dan pengurasan kredit di bawah.
• Arahkan obrolan ini ke: Pilih kampanye atau 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 kampanye berbeda di bawah.
• Cuplikan sematan: Pilih Gelembung mengambang atau Inline dan salin kode instalasi (lihat di bawah).
• Tautan demo klien: Tempel alamat situs web mana pun untuk mendapatkan tautan yang dapat dibagikan yang membuka situs tersebut dengan widget Anda berjalan di atasnya — tidak perlu menginstal apa pun di pihak mereka. Lihat Tampilkan widget di situs web orang lain 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 adalah apa yang ditawarkan oleh pemilih tema, sudut, font, dan warna — Anda tidak dapat menyuntikkan CSS Anda sendiri ke dalam widget, dan aturan di halaman Anda tidak akan menjangkau ke dalamnya.
• Tidak ada teks placeholder kustom di kotak pesan.
• Tidak ada penyematan video di dalam obrolan.
• Tidak ada pengatur waktu sembunyi otomatis. Gelembung undangan menghilang dengan sendirinya setelah 20 detik dan angka tersebut tidak dapat diubah; jendela obrolan yang terbuka tidak pernah menutup dirinya sendiri. Jika gelembung menutupi konten halaman Anda, pindahkan widget dengan offset Posisi atau matikan gelembung dan pertahankan hanya tombol peluncur.

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 tetap 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 diizinkan masuk alih-alih ditolak. Pratinjau Anda sendiri di dalam aplikasi akan terus 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 satu widget. Pengunjung yang kembali dan melanjutkan obrolan mereka yang sudah ada tidak dihitung, hanya percakapan baru yang dihitung, jadi 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 angkanya melalui REST API dengan max_new_chats_per_ip_daily; 0 akan mematikan pemeriksaan tersebut.
• Batasan bawaan. Selain itu, setiap sesi browser dibatasi dalam jumlah pesan yang dapat dikirim per menit dan per hari, dan agen yang menjawab obrolan akan berhenti membalas pengunjung setelah mencapai Maks pesan AI per obrolan yang ditetapkan di bawah Batasan 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).

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.dmchamp.com/v1/chat-widget/CONFIG_ID"></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.dmchamp.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.

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.dmchamp.com/v1/chat-widget/CONFIG_ID"></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.dmchamp.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 Kelola dan gulir ke Saluran & Sematan.
2. Di Tautan demo klien, ketik alamat situs web (misalnya www.theircompany.com).
3. Klik Salin untuk menyalin tautan, atau Buka untuk melihatnya sendiri terlebih dahulu.
4. 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 sampai ke kotak masuk Anda dan dijawab oleh agen Anda, serta menggunakan kredit seperti percakapan lainnya.
• Halaman tersebut tanpa merek. Halaman tersebut hanya menampilkan situs web mereka dan widget Anda, tidak ada yang lain.
• Beberapa situs web tidak dapat dibingkai. Sejumlah situs (bank, pengecer besar, apa pun yang berada di balik pengaturan keamanan yang ketat) memblokir halaman lain untuk menampilkannya. Jika itu terjadi, tautan tersebut tetap berfungsi: tautan tersebut akan menampilkan jendela browser tiruan yang netral alih-alih situs yang sebenarnya, dengan widget Anda tetap aktif di atasnya sehingga demo tetap berfungsi sebagaimana mestinya.
• Ini tidak mengubah situs web mereka. Tidak ada yang diinstal dan tidak ada yang dimodifikasi — demo hanya ada di dalam tautan tersebut.

Tautan demo selalu menggunakan perutean default akun Anda, terlepas dari apa yang diatur pada Arahkan obrolan ini ke. Jika Anda ingin obrolan demo ditangani oleh agen tertentu, jadikan agen tersebut sebagai default widget obrolan Anda terlebih dahulu.

Kirim Halaman Berbeda ke Kampanye Berbeda #

Secara default, setiap obrolan yang masuk melalui widget Anda ditangani oleh kampanye atau agen yang sama. Anda dapat menggantinya per halaman, sehingga pengunjung di halaman harga Anda berbicara dengan kampanye 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 kampanye atau agen. Pada halaman Kampanye, buka menu ⋮ pada kampanye dan pilih Tambahkan ke situs web. Pada halaman Agen, klik tombol </> pada baris tersebut, atau buka agen dan buka tab Titik masuk-nya. Dengan cara apa pun, Anda akan mendapatkan cuplikan siap tempel yang sudah diarahkan ke kampanye atau 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.

  Tambahkan ke situs web hanya muncul pada kampanye yang sedang aktif dan diatur untuk menangani obrolan masuk. Kampanye draf belum dapat menerima pengunjung, jadi opsi ini disembunyikan sampai Anda memublikasikannya. Pada halaman Agen, opsi ini muncul pada agen yang aktif. Agen yang dijeda akan menerima obrolan tetapi tidak akan pernah membalas, jadi opsi ini disembunyikan sampai Anda mengaktifkannya kembali. Tidak ada saluran yang perlu diatur untuk agen — agen dapat mengambil obrolan dari saluran mana pun.

• Dari pengaturan widget. Di Pengaturan → Saluran → Kelola pada widget obrolan Anda, atur Teruskan 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.dmchamp.com/v1/chat-widget/CONFIG_ID?campaign=CAMPAIGN_ID"></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-campaign="CAMPAIGN_ID" style="width:100%;height:600px;"></div>
<script src="https://api.dmchamp.com/v1/chat-widget/embed.js" async></script>

Untuk agen, kata-katanya berubah menjadi ?agent=AGENT_ID atau data-agent="AGENT_ID".

Beberapa hal yang perlu diketahui:

• Gunakan tombol salin daripada mengetik ID secara manual. Jika ID tidak cocok dengan kampanye atau agen di akun Anda, obrolan tetap berfungsi tetapi kembali ke perutean default Anda.
• Seseorang yang sudah berada di tengah percakapan tetap bersama siapa pun yang mereka ajak bicara sejak awal, bahkan jika 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.dmchamp.com/v1/chat-widget/CONFIG_ID"></script>

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

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.dmchamp.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, DM Champ 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.dmchamp.com/v1/chat-widget/CONFIG_ID"></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.dmchamp.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 mencari kesalahan pengetikan.

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.dmchamp.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.