Widget Web

Widget Web

Widget Web membolehkan anda menanamkan tetingkap sembang langsung yang dikuasai oleh bot AI anda terus ke mana-mana laman web. Sesuaikannya mengikut jenama anda dan laksanakan dalam beberapa minit.

Pemasangan

1. Pergi ke Channels → Web Widget dalam menu sebelah kiri.

2. Klik Create Widget dan beri nama padanya.

3. Konfigurasikan tetapan widget (lihat Penyesuaian di bawah).

4. Salin coretan kod embed yang disediakan.

5. Tampal coretan tersebut ke dalam HTML laman web anda, sejurus sebelum tag penutup </body>.

6. Simpan dan terbitkan laman web anda — widget akan muncul serta-merta.

Kod 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>

Gantikan YOUR_BOT_ID dan YOUR_WIDGET_ID dengan nilai yang ditunjukkan dalam papan pemuka anda.

Note

Skrip widget dimuatkan secara tak segerak dan tidak akan menyekat pemuatan halaman anda.

Penyesuaian

Pilihan	Penerangan
Warna Tema	Tetapkan warna utama mengikut jenama anda (kod hex atau pemilih warna)
Mesej Alu-aluan	Mesej pertama yang dipaparkan apabila pengguna membuka widget
Kedudukan	Pilih penempatan bawah-kanan atau bawah-kiri pada skrin
Avatar	Muat naik gambar avatar tersuai untuk bot

Pilihan tambahan termasuk:

• Tajuk Widget — Nama yang ditunjukkan dalam pengepala widget
• Teks Pemegang Tempat — Teks petunjuk di dalam kotak input mesej
• Kelewatan Buka Automatik — Buka widget secara automatik selepas N saat (pilihan)
• Sembunyikan pada Mudah Alih — Togol keterlihatan widget pada peranti mudah alih

Cara Ia Berfungsi

1. Pengguna membuka widget — Tetingkap sembang gelongsor terbuka dari penjuru halaman.

2. Mesej dihantar ke bot — Mesej pengguna dihantar ke Clienta.ai melalui sambungan WebSocket yang selamat.

3. AI memproses dan memberi respons — Bot mendapatkan semula kandungan yang relevan dari pangkalan pengetahuan dan menjana balasan.

4. Serah kepada manusia jika perlu — Jika keyakinan rendah atau pengguna meminta manusia, perbualan akan dihalakan ke ejen yang tersedia melalui peti masuk Conversations.

Borang Hubungi

v1.6.8

Apabila bot AI tidak dalam talian atau tidak dapat memberi respons, widget menunjukkan belon CTA yang menggalakkan pelawat meninggalkan butiran hubungan mereka. Mengetuk belon tersebut membuka borang hubungi:

Medan	Diperlukan	Nota
E-mel	Ya	Sentiasa diperlukan untuk tindak susulan
Telefon	Tidak	Termasuk pemilih kod negara dengan 37 negara dan bendera emoji (contoh: 🇹🇭 +66, 🇺🇸 +1, 🇬🇧 +44, 🇯🇵 +81). Pengesahan sebelah pelayan memastikan kod yang dihantar adalah sah.
Nama	Tidak	Nama pelawat
Mesej	Tidak	Konteks tambahan

Penghantaran borang hubungi mencipta tiket yang boleh dilihat dalam halaman Tickets pentadbir, memaparkan e-mel dan telefon apabila disediakan.

Sembang Baru Selepas Selesai

v1.6.8

Apabila ejen menyelesaikan perbualan, widget memaparkan notis sistem dan butang “Start New Chat”. Mengkliknya:

1. Mengosongkan sejarah perbualan semasa
2. Menyambung semula dengan sesi WebSocket baharu
3. Mengembalikan widget ke keadaan awalnya

Ini membolehkan pelawat memulakan perbualan baharu tanpa memuat semula halaman.

WebSocket Masa Nyata

Widget menggunakan sambungan WebSocket berterusan untuk pemesejan masa nyata dengan kependaman rendah. Kelakuan utama:

• Sambung semula automatik — Klien menyambung semula secara automatik jika sambungan terputus.
• Penunjuk menaip — Menunjukkan animasi menaip semasa bot menjana respons.
• Penunjuk menaip ejen — v1.6.8 Apabila ejen manusia sedang menaip balasan, widget menunjukkan animasi menaip kepada pelawat secara masa nyata.
• Sejarah mesej — Sejarah perbualan dipelihara dalam sesi pelayar yang sama.
• Penyegerakan merentas tab — Jika pengguna membuka berbilang tab, keadaan perbualan disegerakkan.

Respons Markdown

v1.6.4

Mesej AI dan ejen dipaparkan sebagai markdown berformat dan bukannya teks biasa. Format yang disokong termasuk:

• Tebal, condong, garis palang
• Pautan (dibuka dalam tab baharu secara automatik)
• kod sebaris dan blok kod berpagar
• Senarai tertib dan tidak tertib
• Tajuk, petikan blok, dan jadual

Semua kandungan markdown dibersihkan dengan senarai putih yang ketat untuk mencegah serangan XSS. Tiada konfigurasi diperlukan — pemaparan markdown didayakan secara lalai untuk semua respons AI dan ejen. Mesej pengguna kekal sebagai teks biasa.

Avatar Jenama

v1.6.4

Paparkan logo jenama atau avatar tersuai anda dalam pengepala widget dan pada skrin utama. Tetapkan avatarUrl dalam Settings → Channels → Web → Customizer atau hantarnya sebagai config.theme.avatarUrl dalam kod embed.

• Hanya URL https:// yang diterima
• Jika URL tidak sah atau gambar gagal dimuatkan, ikon bunga api lalai akan ditunjukkan
• Disyorkan: gambar persegi (contoh: 128 × 128 px) untuk hasil terbaik

Lihat Penyesuaian Widget — Avatar untuk butiran.

Label AI vs Manusia

v1.6.4

Setiap mesej bukan pengguna memaparkan label penulis kecil yang mengenal pasti penghantar:

Jenis penulis	Label yang ditunjukkan
Bot AI	”AI Assistant” (setempat)
Ejen manusia	Nama ejen (contoh: “Sarah”)

Label disetempatkan dalam kesemua 15 bahasa yang disokong dan boleh diakses oleh pembaca skrin. Ini membantu pelawat membezakan dengan jelas antara respons yang dijana AI dan respons manusia, menyokong amalan terbaik ketelusan.

Bahasa Ucapan

v1.6.2

Mesej ucapan widget menyokong tiga mod bahasa, dikonfigurasikan dalam Settings → Channels → Web → Customizer → Greeting Mode:

Mod	Kelakuan
Static	Memaparkan ucapan yang sama kepada setiap pelawat tanpa mengira bahasa
Match Visitor	Menunjukkan ucapan mengikut bahasa — konfigurasikan teks ucapan berbeza untuk setiap daripada 15 lokal
Org-Main	Sentiasa menunjukkan ucapan dalam bahasa respons utama organisasi (ditetapkan dalam AI Settings)

Dalam mod Match Visitor, mana-mana lokal tanpa ucapan yang dikonfigurasikan akan menggunakan teks ucapan statik sebagai sandaran.

Lihat Penyesuaian Widget — Mod Ucapan untuk konfigurasi langkah demi langkah.

Pemilih Bahasa

v1.6.2

Widget boleh memaparkan ikon glob dalam pengepala yang membolehkan pelawat memilih bahasa pilihan mereka secara eksplisit. Ciri ini dilumpuhkan secara lalai dan mesti didayakan setiap widget dalam Settings → Channels → Web → Customizer.

Apabila didayakan:

• Ikon glob (🌐) muncul dalam pengepala widget
• Pelawat boleh memilih daripada sehingga 15 lokal yang disokong
• Memilih bahasa mengunci semua respons AI kepada bahasa tersebut untuk sesi itu, mengatasi pengesanan automatik
• Kunci kekal walaupun pelawat menaip dalam bahasa lain

Note

Kunci pemilih bahasa mengutamakan pengesanan automatik tetapi boleh ditolak oleh tetapan Force this language dalam AI Settings. Jika Force didayakan, bahasa organisasi sentiasa menang tanpa mengira pilihan pelawat.

Sokongan RTL (Kanan-ke-Kiri)

v1.6.2

Widget dan halaman pendaratan menyokong sepenuhnya susun atur RTL untuk bahasa Arab dan Ibrani. Apabila pelawat menggunakan lokal RTL:

• Keseluruhan susun atur dicerminkan (penjajaran teks, navigasi, elemen UI)
• Atribut <html dir="rtl"> ditetapkan secara automatik
• Mesej sembang dan kotak input disejajarkan dengan betul untuk aliran bacaan RTL

Tiada konfigurasi manual diperlukan — RTL diaktifkan secara automatik berdasarkan lokal yang dipilih.

Sandaran Tamat Masa Lekapan

v1.6.5

Jika skrip widget (widget.js) gagal dimuatkan dalam masa 10 saat, embed memaparkan UI sandaran dan bukannya meninggalkan ruang kosong. Sandaran merangkumi butang cuba semula supaya pelawat boleh cuba memuat semula widget tanpa memuat semula halaman.

Ini melindungi pengalaman pengguna apabila masalah rangkaian, penyekat iklan, atau gangguan CDN menghalang widget daripada dipasang.

Reka Bentuk Visual Widget Baharu

v1.6.8

Widget menerima penyegaran visual dalam v1.6.8 dengan tampilan moden yang lebih halus:

• Pengepala kecerunan — Pengepala widget menggunakan kecerunan halus berdasarkan warna tema anda, dengan titik status dan paparan avatar.
• Belon mesej membulat — Belon sembang menggunakan jejari sempadan yang lebih besar (rounded-2xl) untuk penampilan yang lebih lembut.
• Animasi buka/tutup — Widget gelongsor masuk dan keluar dengan animasi CSS yang lancar dan bukannya muncul serta-merta.
• Pelancar reka bentuk baharu — Pelancar belon sembang adalah squircle 60px dengan bayang cahaya berwarna jenama dan animasi masuk.
• Togol mod gelap — Butang togol dalam pengepala sembang membolehkan pelawat bertukar antara mod terang dan gelap semasa sesi mereka.
• Gelang fokus bertema — Medan input menunjukkan gelang fokus berwarna jenama untuk kebolehaksesan.
• Lencana pemberitahuan — Lencana mesej yang belum dibaca muncul pada belon pelancar.

Perubahan visual ini digunakan secara automatik — tiada perubahan konfigurasi diperlukan.

Cip Petikan

v1.6.5

Apabila bot AI memberi respons dengan maklumat yang bersumber dari pangkalan pengetahuan anda, cip petikan muncul di bawah mesej. Setiap cip mewakili dokumen yang didapatkan semula yang menyumbang kepada jawapan.

Kelakuan	Penerangan
Paparan cip	Menunjukkan sehingga 3 cip tajuk dokumen. Jika lebih banyak sumber digunakan, cip “+N lagi” menunjukkan petikan tambahan.
Klik untuk kembangkan	Mengklik cip akan togolkan coretan sebaris yang menunjukkan 200 aksara pertama kandungan yang didapatkan semula. Hanya satu coretan boleh dibuka pada satu masa.
Pemotongan tajuk	Tajuk dokumen yang panjang dipotong kepada 40 aksara dengan elipsis.
Penjenamaan	Cip menggunakan warna utama widget anda sebagai warna tint yang halus, dengan sokongan penuh mod gelap dan RTL.
Kebolehaksesan	Cip boleh dinav igasi dengan papan kekunci dengan label ARIA yang betul (aria-expanded), peranan senarai, dan sokongan pembaca skrin.

Cip petikan memberikan ketelusan kepada pelawat tentang asal-usul jawapan bot, membina kepercayaan dalam respons AI. Tiada konfigurasi diperlukan — petikan muncul secara automatik apabila saluran paip RAG mendapatkan semula dokumen yang relevan.

Tatal Automatik

v1.6.8

Widget menatal secara automatik ke mesej terbaru setiap kali kandungan baharu tiba. Ini terpakai kepada:

• Mesej baharu daripada bot AI atau ejen manusia
• Kandungan penstriman semasa bot menjana respons secara masa nyata

Tatal menggunakan animasi lancar supaya peralihan terasa semula jadi. Tiada konfigurasi diperlukan — tatal automatik sentiasa aktif.

Had Saluran Mengikut Pelan

Pelan	Had Saluran
Free	1
Starter	2
Growth	5
Plus	6
Pro	15
Scale	30
Enterprise	50

Tip

Perlukan widget pada berbilang domain? Setiap domain memerlukan konfigurasi widget tersendiri. Cipta satu widget setiap domain untuk menjejaki analitik secara berasingan.