Lewati ke konten utama
ChattyBox Logo

Penyiapan dan kustomisasi widget

Tambahkan widget chat berbasis AI ke situs Anda dalam kurang dari 5 menit.

Penyiapan cepat​

Membuat chatbot aktif itu sederhana. Anda hanya perlu menyalin potongan kode kecil dari dasbor.

Langkah 1: ambil kode sematan​

  1. Buka dasbor dan pilih proyek Anda.
  2. Masuk ke tab Sematkan.
  3. Pilih kunci API yang ingin digunakan atau buat yang baru.
  4. Salin potongan kode yang dibuat.

Langkah 2: tambahkan ke situs​

Tempelkan potongan kode tepat sebelum tag penutup </body> di setiap halaman tempat widget chat harus muncul.

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

:::tip Kiat Selesai. Anda tidak perlu mengatur warna atau opsi di kode; semuanya dikelola dari dasbor. :::

Kustomisasi visual​

ChattyBox memiliki editor visual bawaan. Anda dapat menyesuaikan tampilan widget agar sesuai dengan merek tanpa mengubah kode.

Kontrol di dasbor​

  1. Warna aksen - Pilih warna utama merek untuk peluncur, sorotan, dan pesan pengguna.
  2. Posisi - Tentukan tempat widget muncul di layar.
  3. Judul header - Atur judul di bagian atas jendela chat.
  4. Pesan sambutan - Sesuaikan pesan pertama yang dilihat pengunjung.
catatan

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

Opsi lanjutan​

Pengaturan dasbor dan atribut skrip​

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

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

Jika proyek memakai pembatasan asal untuk kunci publik, jaga agar pembatasan itu sesuai dengan domain tempat widget dipasang.

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

  • data-api-key mengidentifikasi kunci publik widget.
  • data-api-url memberi tahu widget ke mana permintaan dikirim.
  • data-locale dapat memaksa bahasa antarmuka tertentu untuk halaman tersebut.

Jika widget tidak muncul setelah instalasi, lihat pemecahan masalah.

Menyembunyikan widget di halaman tertentu​

Anda dapat menyembunyikan widget di halaman pilihan dengan CSS:

.chattybox-widget {
  display: none;
}

Integrasi khusus​

Butuh penyiapan yang lebih sesuai daripada widget standar?

Hubungi kami di [email protected] dan kami akan membantu memilih pendekatan integrasi yang tepat.

Dukungan multibahasa​

Widget ChattyBox otomatis menyesuaikan diri dengan preferensi bahasa pengunjung dan memberikan pengalaman yang terlokalisasi.

Bahasa yang didukung resmi​

Antarmuka widget, termasuk tombol, label, dan pesan sistem, didukung resmi dalam 14 bahasa:

BahasaKodeAntarmuka widgetKualitas jawaban AI
InggrisenDukungan penuhSangat baik
PrancisfrDukungan penuhTinggi
JermandeDukungan penuhTinggi
SpanyolesDukungan penuhTinggi
ItaliaitDukungan penuhTinggi
BelandanlDukungan penuhTinggi
PortugisptDukungan penuhTinggi
PolandiaplDukungan penuhTinggi
SwediasvDukungan penuhTinggi
IndonesiaidDukungan penuhSedang
EstoniaetDukungan penuhSedang
FinlandiafiDukungan penuhSedang
WalescyDukungan penuhSedang
CekocsDukungan penuhSedang

:::note Dukungan bahasa tambahan Walau antarmuka widget secara resmi mendukung 14 bahasa, AI di baliknya dapat memahami dan menjawab dalam 100+ bahasa. Namun, kami tidak dapat menjamin kualitas tinggi yang sama untuk bahasa di luar daftar resmi. :::

Cara kerja deteksi bahasa​

Widget memakai sistem deteksi bertingkat:

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

Menimpa bahasa secara manual​

Untuk memaksa bahasa widget terlepas dari pengaturan browser, tambahkan data-locale:

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

:::tip Kasus penggunaan Ini berguna jika situs multibahasa memiliki URL berbeda untuk tiap bahasa, misalnya /de/ atau /fr/. Atur data-locale sesuai bahasa halaman agar pengalaman tetap konsisten. :::

Pengaturan bahasa di dasbor​

Dasbor aplikasi memungkinkan Anda mengatur preferensi bahasa widget per proyek:

  • Deteksi otomatis (disarankan) - Otomatis mengikuti bahasa browser pengunjung.
  • Bahasa tetap - Memaksa widget selalu memakai bahasa tertentu.
  • Izinkan penimpaan skrip - Mengaktifkan atau menonaktifkan penimpaan melalui data-locale.

Pengaturan ini tersedia di dasbor → Proyek → Sematkan → Bahasa widget.

Mencocokkan bahasa konten​

Untuk pengalaman multibahasa terbaik, chatbot harus menjawab dalam bahasa yang sama dengan pertanyaan pengguna. Caranya:

  1. Scrape semua versi bahasa dokumentasi menggunakan sitemap.xml.
  2. Scraper otomatis menandai konten dengan bahasanya.
  3. Sistem RAG mengambil versi bahasa yang sesuai dengan kueri.

Penyiapan di dasbor: saat mengatur scraping, gunakan URL sitemap.xml, misalnya https://yourdocs.com/sitemap.xml, agar semua versi bahasa ditemukan dan diindeks otomatis.

Pemecahan masalah​

Widget masih tampil dalam bahasa Inggris​

  • Bersihkan cache browser - File widget.js mungkin tersimpan di cache. Lakukan refresh keras (Ctrl+F5 / Cmd+Shift+R).
  • Periksa data-locale - Pastikan atribut memakai kode bahasa yang didukung.
  • Periksa bahasa browser - Pastikan preferensi bahasa sudah benar.
  • Periksa HTML lang - Pastikan halaman memakai <html lang="id"> atau kode yang sesuai.

Sumber muncul dalam bahasa yang salah​

  • Scrape ulang konten - Pastikan semua versi bahasa sudah diindeks.
  • Gunakan sitemap.xml - Ini membantu scraper menemukan URL /de/, /fr/, dan seterusnya.
  • Periksa bahasa pertanyaan - AI mencoba menyesuaikan bahasa jawaban dengan bahasa pertanyaan.

Terjemahan hilang​

  • Periksa bahasa yang didukung - Hanya 14 bahasa 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 tampil dengan benar.
  3. Scrape semua versi bahasa - Gunakan sitemap.xml untuk pengindeksan multibahasa lengkap.
  4. Pantau distribusi bahasa - Lihat analitik untuk mengetahui bahasa yang paling sering dipakai pengunjung.