Widget Web

Widget Web

Widget Web memungkinkan Anda menyematkan jendela live chat yang ditenagai oleh bot AI Anda langsung ke website mana pun. Sesuaikan tampilan agar cocok dengan merek Anda dan deploy dalam hitungan menit.

Instalasi

1. Buka Channels → Web Widget di menu kiri.

2. Klik Create Widget dan beri nama.

3. Atur pengaturan widget (lihat bagian Kustomisasi di bawah).

4. Salin cuplikan kode embed yang tersedia.

5. Tempel cuplikan tersebut ke HTML website Anda, tepat sebelum tag penutup </body>.

6. Simpan dan publikasikan situs Anda — widget akan langsung muncul.

Kode Embed

<!-- Clienta.ai Web Widget -->
<script>
  window.ClientaConfig = {
    botId: "YOUR_BOT_ID",
    widgetId: "YOUR_WIDGET_ID",
  };
</script>
<script
  src="https://api.clienta.ai/widget/YOUR_WIDGET_ID/loader.js"
  async
></script>

Ganti YOUR_BOT_ID dan YOUR_WIDGET_ID dengan nilai yang ditampilkan di dashboard Anda.

Catatan

Skrip widget dimuat secara asinkron dan tidak akan memblokir pemuatan halaman Anda.

Kustomisasi

Opsi	Deskripsi
Warna Tema	Atur warna utama agar sesuai dengan merek Anda (kode hex atau color picker)
Pesan Sambutan	Pesan pertama yang ditampilkan saat pengguna membuka widget
Posisi	Pilih penempatan di kanan bawah atau kiri bawah layar
Avatar	Unggah gambar avatar kustom untuk bot

Opsi tambahan meliputi:

• Judul Widget — Nama yang ditampilkan di header widget
• Teks Placeholder — Teks petunjuk di dalam kotak input pesan
• Penundaan Buka Otomatis — Membuka widget secara otomatis setelah N detik (opsional)
• Sembunyikan di Mobile — Aktifkan/nonaktifkan visibilitas widget di perangkat mobile

Cara Kerja

1. Pengguna membuka widget — Jendela chat meluncur keluar dari sudut halaman.

2. Pesan dikirim ke bot — Pesan pengguna dikirimkan ke Clienta.ai melalui koneksi WebSocket yang aman.

3. AI memproses dan merespons — Bot mengambil konten relevan dari basis pengetahuan dan menghasilkan balasan.

4. Handoff ke manusia jika diperlukan — Jika tingkat kepercayaan rendah atau pengguna meminta agen manusia, percakapan akan diarahkan ke agen yang tersedia melalui kotak masuk Conversations.

Formulir Kontak

v1.6.8

Saat bot AI sedang offline atau tidak dapat merespons, widget menampilkan balon CTA yang meminta pengunjung untuk meninggalkan detail kontak mereka. Mengetuk balon tersebut membuka formulir kontak:

Kolom	Wajib	Catatan
Email	Ya	Selalu diperlukan untuk tindak lanjut
Telepon	Tidak	Dilengkapi pemilih kode negara dengan 37 negara dan emoji bendera (mis. 🇹🇭 +66, 🇺🇸 +1, 🇬🇧 +44, 🇯🇵 +81). Validasi sisi server memastikan kode yang dimasukkan valid.
Nama	Tidak	Nama pengunjung
Pesan	Tidak	Konteks tambahan

Pengiriman formulir kontak membuat tiket yang terlihat di halaman Tickets pada admin, menampilkan email dan telepon jika keduanya disertakan.

Chat Baru Setelah Resolve

v1.6.8

Saat agen menyelesaikan percakapan, widget menampilkan notifikasi sistem dan tombol “Mulai Chat Baru”. Mengkliknya akan:

1. Menghapus riwayat percakapan saat ini
2. Menyambung kembali dengan sesi WebSocket yang baru
3. Mengembalikan widget ke kondisi awal

Ini memungkinkan pengunjung memulai percakapan baru tanpa perlu me-refresh halaman.

WebSocket Real-time

Widget menggunakan koneksi WebSocket persisten untuk pesan real-time dengan latensi rendah. Perilaku utama:

• Sambung ulang otomatis — Klien secara otomatis menyambung kembali jika koneksi terputus.
• Indikator mengetik — Menampilkan animasi mengetik saat bot sedang menghasilkan respons.
• Indikator mengetik agen — v1.6.8 Saat agen manusia sedang mengetik balasan, widget menampilkan animasi mengetik kepada pengunjung secara real time.
• Riwayat pesan — Riwayat percakapan dipertahankan dalam sesi browser yang sama.
• Sinkronisasi antar tab — Jika pengguna membuka beberapa tab, status percakapan akan disinkronkan.

Respons Markdown

v1.6.4

Pesan AI dan agen dirender sebagai markdown berformat alih-alih teks biasa. Pemformatan yang didukung meliputi:

• Tebal, miring, dicoret
• Tautan (terbuka di tab baru secara otomatis)
• Kode inline dan blok kode berpagar
• Daftar terurut dan tidak terurut
• Heading, blockquote, dan tabel

Semua konten markdown disanitasi dengan daftar izin yang ketat untuk mencegah serangan XSS. Tidak diperlukan konfigurasi — rendering markdown diaktifkan secara default untuk semua respons AI dan agen. Pesan pengguna tetap berupa teks biasa.

Avatar Merek

v1.6.4

Tampilkan logo merek atau avatar kustom Anda di header widget dan layar beranda. Atur avatarUrl di Settings → Channels → Web → Customizer atau lewatkan sebagai config.theme.avatarUrl di kode embed.

• Hanya URL https:// yang diterima
• Jika URL tidak valid atau gambar gagal dimuat, ikon bintang default akan ditampilkan
• Disarankan: gambar berbentuk persegi (mis. 128 × 128 px) untuk hasil terbaik

Lihat Kustomisasi Widget — Avatar untuk detailnya.

Label AI vs Manusia

v1.6.4

Setiap pesan non-pengguna menampilkan label pengirim kecil yang mengidentifikasi siapa yang mengirim:

Tipe pengirim	Label yang ditampilkan
Bot AI	”AI Assistant” (terlokalisasi)
Agen manusia	Nama agen (mis. “Sarah”)

Label terlokalisasi dalam 15 bahasa yang didukung dan dapat diakses oleh pembaca layar. Ini membantu pengunjung membedakan dengan jelas antara respons yang dihasilkan AI dan respons manusia, mendukung praktik transparansi terbaik.

Bahasa Sapaan

v1.6.2

Pesan sapaan widget mendukung tiga mode bahasa, yang dikonfigurasi di Settings → Channels → Web → Customizer → Greeting Mode:

Mode	Perilaku
Static	Menampilkan sapaan yang sama kepada setiap pengunjung tanpa memandang bahasa
Match Visitor	Menampilkan sapaan per bahasa — konfigurasikan teks sapaan yang berbeda untuk masing-masing dari 15 lokal
Org-Main	Selalu menampilkan sapaan dalam bahasa respons utama organisasi (diatur di AI Settings)

Dalam mode Match Visitor, lokal mana pun yang tidak memiliki sapaan yang dikonfigurasi akan menggunakan teks sapaan statis sebagai cadangan.

Lihat Kustomisasi Widget — Greeting Mode untuk konfigurasi langkah demi langkah.

Pemilih Bahasa

v1.6.2

Widget dapat menampilkan ikon globe di header yang memungkinkan pengunjung memilih bahasa pilihan mereka secara eksplisit. Fitur ini dinonaktifkan secara default dan harus diaktifkan per widget di Settings → Channels → Web → Customizer.

Saat diaktifkan:

• Ikon globe (🌐) muncul di header widget
• Pengunjung dapat memilih dari hingga 15 lokal yang didukung
• Memilih bahasa akan mengunci semua respons AI ke bahasa tersebut untuk sesi ini, menggantikan deteksi otomatis
• Kunci tetap berlaku meskipun pengunjung mengetik dalam bahasa yang berbeda

Catatan

Kunci pemilih bahasa lebih diutamakan daripada deteksi otomatis, tetapi dapat digantikan oleh pengaturan Force this language di AI Settings. Jika Force diaktifkan, bahasa organisasi selalu menang terlepas dari pilihan pengunjung.

Dukungan RTL (Kanan-ke-Kiri)

v1.6.2

Widget dan halaman landing mendukung penuh tata letak RTL untuk bahasa Arab dan Ibrani. Saat pengunjung menggunakan lokal RTL:

• Seluruh tata letak akan tercermin (perataan teks, navigasi, elemen UI)
• Atribut <html dir="rtl"> diatur secara otomatis
• Pesan chat dan kotak input sejajar dengan benar untuk alur baca RTL

Tidak diperlukan konfigurasi manual — RTL aktif secara otomatis berdasarkan lokal yang dipilih.

Fallback Timeout Pemasangan

v1.6.5

Jika skrip widget (widget.js) gagal dimuat dalam 10 detik, embed akan menampilkan UI cadangan alih-alih membiarkan ruang kosong. Cadangan ini mencakup tombol coba lagi agar pengunjung dapat mencoba memuat ulang widget tanpa me-refresh halaman.

Ini melindungi pengalaman pengguna saat masalah jaringan, pemblokir iklan, atau gangguan CDN mencegah widget terpasang.

Desain Ulang Visual Widget

v1.6.8

Widget mendapatkan tampilan visual yang diperbarui di v1.6.8 dengan tampilan yang modern dan lebih halus:

• Header gradien — Header widget menggunakan gradien halus berdasarkan warna tema Anda, dengan titik status dan tampilan avatar.
• Gelembung pesan membulat — Gelembung chat menggunakan radius border yang lebih besar (rounded-2xl) untuk tampilan yang lebih lembut.
• Animasi buka/tutup — Widget meluncur masuk dan keluar dengan animasi CSS yang halus alih-alih muncul seketika.
• Launcher yang didesain ulang — Gelembung launcher chat adalah squircle 60px dengan bayangan glow berwarna merek dan animasi masuk.
• Tombol mode gelap — Tombol toggle di header chat memungkinkan pengunjung beralih antara mode terang dan gelap selama sesi mereka.
• Focus ring bertema — Kolom input menampilkan focus ring berwarna merek untuk aksesibilitas.
• Lencana notifikasi — Lencana pesan belum dibaca muncul di gelembung launcher.

Perubahan visual ini berlaku secara otomatis — tidak diperlukan perubahan konfigurasi.

Chip Kutipan

v1.6.5

Saat bot AI merespons dengan informasi yang bersumber dari basis pengetahuan Anda, chip kutipan muncul di bawah pesan. Setiap chip mewakili dokumen yang diambil yang berkontribusi pada jawaban tersebut.

Perilaku	Deskripsi
Tampilan chip	Menampilkan hingga 3 chip judul dokumen. Jika lebih banyak sumber digunakan, chip “+N lainnya” menunjukkan kutipan tambahan.
Klik untuk perluas	Mengklik chip akan menampilkan/menyembunyikan cuplikan inline yang menunjukkan 200 karakter pertama dari konten yang diambil. Hanya satu cuplikan yang dapat terbuka pada satu waktu.
Pemotongan judul	Judul dokumen yang panjang dipotong hingga 40 karakter dengan elipsis.
Tema	Chip menggunakan warna utama widget Anda sebagai tint halus, dengan dukungan penuh mode gelap dan RTL.
Aksesibilitas	Chip dapat dinavigasi dengan keyboard dengan label ARIA yang tepat (aria-expanded), peran list, dan dukungan pembaca layar.

Chip kutipan memberikan transparansi kepada pengunjung mengenai sumber jawaban bot, membangun kepercayaan pada respons AI. Tidak diperlukan konfigurasi — kutipan muncul secara otomatis saat pipeline RAG mengambil dokumen yang relevan.

Gulir Otomatis

v1.6.8

Widget secara otomatis menggulir ke pesan terbaru setiap kali konten baru tiba. Ini berlaku untuk:

• Pesan baru dari bot AI atau agen manusia
• Konten streaming saat bot menghasilkan respons secara real time

Guliran menggunakan animasi halus sehingga transisi terasa natural. Tidak diperlukan konfigurasi — gulir otomatis selalu aktif.

Batas Saluran per Paket

Paket	Maks Saluran
Free	1
Starter	2
Growth	5
Plus	6
Pro	15
Scale	30
Enterprise	50

Tips

Perlu widget di beberapa domain? Setiap domain memerlukan konfigurasi widget tersendiri. Buat satu widget per domain untuk melacak analitik secara terpisah.