Kustomisasi Widget Ter-host

Sesuaikan antarmuka siap pakai yang dimuat oleh https://chattybox.ai/widget.js. Untuk contoh instalasi framework dan platform kanonis, lihat Panduan Instalasi.

Sebelum Menyesuaikan

Buat proyek, indeks kontennya, dan verifikasi jawaban representatif di Test Chat sebelum meluangkan waktu untuk presentasi. Lihat Memulai untuk urutan lengkapnya.

Konfigurasikan Widget Ter-host

1. Buka Dasbor dan pilih proyek Anda.
2. Buka tab Embed.
3. Pratinjau dan simpan tampilan serta perilaku bahasa widget.

Tab Embed mengatur presentasi dan membuat kode instalasi, tetapi kunci publik dikelola secara terpisah. Saat siap menginstal:

1. Buka Public Keys dan buat kunci browser.
2. Batasi origin yang diizinkan ke domain situs web yang dituju.
3. Kembali ke Embed, pilih kuncinya, lalu salin cuplikan yang dibuat.
4. Ikuti Panduan Instalasi untuk platform Anda.

<script
  src="https://chattybox.ai/widget.js"
  data-api-key="YOUR_API_KEY"
  data-api-url="https://adorable-woodpecker-629.convex.site/chat"
  async
></script>

tip

Perubahan presentasi widget yang disimpan di dasbor diterapkan tanpa mengganti cuplikan di situs Anda.

---

Kustomisasi Visual

ChattyBox dilengkapi editor visual terintegrasi penuh. Anda dapat menyesuaikan tampilan dan nuansa widget agar sesuai dengan merek tanpa menyentuh kode apa pun.

Kontrol Dasbor

1. Accent Color - Pilih warna utama merek Anda. Ini memengaruhi peluncur, sorotan utama, dan pesan pengguna.

2. Position - Pilih tempat widget muncul di layar.

3. Header Title - Atur judul yang ditampilkan di bagian atas jendela chat.

4. Welcome Message - Sesuaikan pesan pertama yang dilihat pengunjung saat membuka chat.

catatan

Perubahan di dasbor diterapkan seketika. Anda tidak perlu memperbarui kode sematan di situs.

Opsi Lanjutan

Pengaturan Dasbor vs Atribut Skrip

Sebagian besar perilaku widget sebaiknya dikelola dari dasbor agar Anda tidak perlu melakukan deployment ulang situs untuk perubahan sederhana.

Gunakan dasbor untuk warna, posisi, ikon, judul header, pesan sambutan, bahasa default, pengelolaan kunci publik, scraping, dan analitik.

Jika proyek menggunakan pembatasan origin kunci publik, sinkronkan pembatasan tersebut dengan domain tempat widget dipasang.

Gunakan atribut skrip hanya untuk nilai yang diperlukan widget saat halaman dimuat:

• data-api-key mengidentifikasi kunci widget publik.
• data-api-url memberi tahu widget ke mana harus mengirim permintaan. Dalam produksi, ini adalah URL stabil https://...convex.site/chat dari dasbor Anda.
• data-locale secara opsional memaksa bahasa UI widget tertentu untuk halaman tersebut.

Jika widget tidak muncul setelah instalasi, lihat Pemecahan Masalah.

Untuk contoh khusus platform, mulai dari Docusaurus, MkDocs, VitePress, WordPress, atau GitBook.

Menyembunyikan Widget di Halaman Tertentu

Jika perlu menyembunyikan widget di halaman tertentu, Anda dapat melakukannya dengan CSS:

.chattybox-widget {
  display: none;
}

Integrasi Khusus

Memerlukan penyiapan yang lebih khusus daripada widget ter-host? Bangun antarmuka sendiri dengan SDK JavaScript, atau hubungi support@chattybox.ai untuk bantuan arsitektur.

Dukungan Multibahasa

Widget ChattyBox otomatis menyesuaikan preferensi bahasa pengunjung dan memberikan pengalaman terlokalisasi bagi pengguna di seluruh dunia.

Bahasa yang Didukung Secara Resmi

Antarmuka widget (tombol, label, dan pesan sistem) secara resmi didukung dalam 14 bahasa:

Bahasa	Kode	UI Widget	Kualitas Respons AI
Inggris	en	Dukungan Penuh	Sangat Baik
Prancis	fr	Dukungan Penuh	Tinggi
Jerman	de	Dukungan Penuh	Tinggi
Spanyol	es	Dukungan Penuh	Tinggi
Italia	it	Dukungan Penuh	Tinggi
Belanda	nl	Dukungan Penuh	Tinggi
Portugis	pt	Dukungan Penuh	Tinggi
Polandia	pl	Dukungan Penuh	Tinggi
Swedia	sv	Dukungan Penuh	Tinggi
Indonesia	id	Dukungan Penuh	Sedang
Estonia	et	Dukungan Penuh	Sedang
Finlandia	fi	Dukungan Penuh	Sedang
Wales	cy	Dukungan Penuh	Sedang
Ceko	cs	Dukungan Penuh	Sedang

:::note Dukungan Bahasa Tambahan Meskipun kami secara resmi mendukung 14 bahasa untuk antarmuka widget, AI di baliknya dapat memahami dan menjawab dalam 100+ bahasa. Namun, kami tidak dapat menjamin respons berkualitas tinggi untuk bahasa di luar daftar resmi. :::

Cara Kerja Deteksi Bahasa

Widget menggunakan sistem deteksi bertingkat:

1. Atribut data-locale - Prioritas tertinggi. Atur pada kode sematan untuk memaksa bahasa tertentu.
2. Atribut halaman <html lang> - Widget memeriksa bahasa yang dinyatakan pada halaman.
3. Bahasa browser (navigator.language) - Menggunakan preferensi pengunjung.
4. Fallback default - Bahasa Inggris jika tidak ada bahasa yang terdeteksi.

Penggantian Bahasa Manual

Untuk memaksa widget ditampilkan dalam bahasa tertentu terlepas dari pengaturan browser, tambahkan atribut data-locale:

<script
  src="https://chattybox.ai/widget.js"
  data-api-key="YOUR_API_KEY"
  data-locale="de"
  data-api-url="https://adorable-woodpecker-629.convex.site/chat"
  async
></script>

:::tip Kasus Penggunaan Ini sangat berguna jika situs multibahasa memiliki URL sendiri untuk setiap versi bahasa (misalnya /de/, /fr/). Atur data-locale agar sesuai dengan bahasa setiap halaman untuk pengalaman yang konsisten. :::

Pengaturan Bahasa Dasbor

Dasbor aplikasi memungkinkan Anda mengonfigurasi preferensi bahasa widget per proyek:

• Auto-detect (Disarankan) - Secara otomatis mengikuti bahasa browser pengunjung
• Fixed Language - Memaksa widget selalu ditampilkan dalam bahasa tertentu
• Allow Script Override - Mengaktifkan/menonaktifkan penggantian atribut data-locale

Akses pengaturan ini di Dasbor → Proyek → tab Embed → bagian Widget Language.

Pencocokan Bahasa Konten

Untuk pengalaman multibahasa terbaik, chatbot harus mengembalikan jawaban dalam bahasa yang sama dengan pertanyaan pengguna. Untuk mencapainya:

1. Scrape semua versi bahasa dokumentasi Anda menggunakan file sitemap.xml
2. Scraper akan otomatis memberi tag bahasa pada konten
3. Sistem RAG mengambil versi bahasa yang sesuai berdasarkan kueri

Penyiapan di Dasbor Aplikasi: Saat mengonfigurasi scraping, gunakan URL sitemap.xml (misalnya https://yourdocs.com/sitemap.xml) agar semua versi bahasa konten ditemukan dan diindeks secara otomatis.

Pemecahan Masalah

Widget Masih Menampilkan Bahasa Inggris

• Hard refresh sebagai diagnosis - Muat ulang dengan Ctrl+F5 atau Cmd+Shift+R, lalu periksa panel jaringan browser untuk permintaan widget dan terjemahan
• Periksa data-locale - Pastikan atribut diatur dengan benar menggunakan kode bahasa yang didukung
• Verifikasi bahasa browser - Pastikan bahasa pilihan browser sudah diatur dengan benar
• Periksa HTML lang halaman - Pastikan halaman memiliki <html lang="de"> (atau kode yang sesuai)

Sumber Berada dalam Bahasa yang Salah

• Scrape ulang konten - Pastikan semua versi bahasa sudah diindeks
• Gunakan sitemap.xml - Ini memastikan scraper menemukan semua URL /de/, /fr/, dan seterusnya
• Periksa bahasa kueri - AI berusaha mencocokkan bahasa respons dengan bahasa kueri

Terjemahan Hilang

• Periksa bahasa yang didukung - Hanya 14 bahasa yang tercantum di atas yang memiliki terjemahan UI terjamin

Praktik Terbaik

1. Tetapkan <html lang> di halaman Anda - Membantu aksesibilitas dan deteksi widget
2. Uji dengan data-locale selama pengembangan - Pastikan setiap bahasa dirender dengan benar
3. Scrape semua versi bahasa - Gunakan sitemap.xml untuk pengindeksan multibahasa yang menyeluruh
4. Pantau distribusi bahasa - Periksa analitik untuk melihat bahasa yang paling sering digunakan pengunjung