เว็บวิดเจ็ต

เว็บวิดเจ็ต

เว็บวิดเจ็ตช่วยให้คุณฝังหน้าต่างแชทสดที่ขับเคลื่อนโดย AI บอตของคุณลงในเว็บไซต์ใดก็ได้โดยตรง ปรับแต่งให้เข้ากับแบรนด์ของคุณและเริ่มใช้งานได้ภายในไม่กี่นาที

การติดตั้ง

1. ไปที่ ช่องทาง → เว็บวิดเจ็ต ในเมนูด้านซ้าย

2. คลิก สร้างวิดเจ็ต และตั้งชื่อ

3. กำหนดค่าการตั้งค่าวิดเจ็ต (ดู การปรับแต่ง ด้านล่าง)

4. คัดลอกโค้ด embed ที่ให้ไว้

5. วางโค้ดลงใน HTML ของเว็บไซต์ของคุณ ก่อนแท็กปิด </body>

6. บันทึกและเผยแพร่ไซต์ของคุณ — วิดเจ็ตจะปรากฏทันที

โค้ด 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>

แทนที่ YOUR_BOT_ID และ YOUR_WIDGET_ID ด้วยค่าที่แสดงในแดชบอร์ดของคุณ

Note

สคริปต์วิดเจ็ตโหลดแบบ asynchronous และจะไม่บล็อกการโหลดหน้าของคุณ

การปรับแต่ง

ตัวเลือก	คำอธิบาย
สีธีม	กำหนดสีหลักให้ตรงกับแบรนด์ของคุณ (รหัส hex หรือตัวเลือกสี)
ข้อความต้อนรับ	ข้อความแรกที่แสดงเมื่อผู้ใช้เปิดวิดเจ็ต
ตำแหน่ง	เลือกการวางตำแหน่งที่มุมล่างขวาหรือมุมล่างซ้ายของหน้าจอ
อวาตาร์	อัปโหลดรูปภาพอวาตาร์แบบกำหนดเองสำหรับบอต

ตัวเลือกเพิ่มเติมได้แก่:

• ชื่อวิดเจ็ต — ชื่อที่แสดงในส่วนหัวของวิดเจ็ต
• ข้อความ Placeholder — ข้อความคำใบ้ภายในกล่องข้อความ
• ดีเลย์เปิดอัตโนมัติ — เปิดวิดเจ็ตโดยอัตโนมัติหลังจาก N วินาที (ไม่บังคับ)
• ซ่อนบนมือถือ — สลับการมองเห็นวิดเจ็ตบนอุปกรณ์มือถือ

วิธีการทำงาน

1. ผู้ใช้เปิดวิดเจ็ต — หน้าต่างแชทเลื่อนเปิดจากมุมของหน้า

2. ส่งข้อความไปยังบอต — ข้อความของผู้ใช้ถูกส่งไปยัง Clienta.ai ผ่านการเชื่อมต่อ WebSocket ที่ปลอดภัย

3. AI ประมวลผลและตอบกลับ — บอตดึงเนื้อหาที่เกี่ยวข้องจากฐานความรู้และสร้างการตอบกลับ

4. ส่งต่อให้มนุษย์เมื่อจำเป็น — หากความเชื่อมั่นต่ำหรือผู้ใช้ขอมนุษย์ การสนทนาจะถูกส่งต่อไปยังเจ้าหน้าที่ที่พร้อมให้บริการผ่านกล่องรับ การสนทนา

แบบฟอร์มติดต่อ

v1.6.8

เมื่อ AI บอตออฟไลน์หรือไม่สามารถตอบสนองได้ วิดเจ็ตจะแสดง บอลลูน CTA เพื่อกระตุ้นให้ผู้เยี่ยมชมทิ้งข้อมูลติดต่อ การแตะที่บอลลูนจะเปิดแบบฟอร์มติดต่อ:

ฟิลด์	จำเป็น	หมายเหตุ
อีเมล	ใช่	จำเป็นเสมอสำหรับการติดตาม
โทรศัพท์	ไม่	มีตัวเลือกรหัสประเทศพร้อมธง emoji สำหรับ 37 ประเทศ (เช่น 🇹🇭 +66, 🇺🇸 +1, 🇬🇧 +44, 🇯🇵 +81) การตรวจสอบฝั่งเซิร์ฟเวอร์รับประกันว่ารหัสที่ส่งมานั้นถูกต้อง
ชื่อ	ใช่	ชื่อของผู้เยี่ยมชม
ข้อความ	ใช่	คำอธิบายปัญหาของผู้เยี่ยมชม

การส่งแบบฟอร์มติดต่อจะสร้างตั๋วที่มองเห็นได้ในหน้า ตั๋ว ของผู้ดูแลระบบ โดยแสดงทั้งอีเมลและโทรศัพท์เมื่อมีการระบุ

แชทใหม่หลังการแก้ไข

v1.6.8

เมื่อเจ้าหน้าที่แก้ไขการสนทนา วิดเจ็ตจะแสดงการแจ้งเตือนจากระบบและปุ่ม “เริ่มแชทใหม่” การคลิกจะ:

1. ล้างประวัติการสนทนาปัจจุบัน
2. เชื่อมต่อใหม่ด้วยเซสชัน WebSocket ที่สดใหม่
3. คืนค่าวิดเจ็ตสู่สถานะเริ่มต้น

ช่วยให้ผู้เยี่ยมชมเริ่มการสนทนาใหม่โดยไม่ต้องรีเฟรชหน้า

WebSocket แบบเรียลไทม์

วิดเจ็ตใช้การเชื่อมต่อ WebSocket แบบถาวรสำหรับการส่งข้อความแบบเรียลไทม์ที่มีความหน่วงต่ำ พฤติกรรมหลัก:

• เชื่อมต่อใหม่อัตโนมัติ — ไคลเอ็นต์เชื่อมต่อใหม่โดยอัตโนมัติหากการเชื่อมต่อหลุด
• ตัวบ่งชี้การพิมพ์ — แสดงแอนิเมชันการพิมพ์ขณะที่บอตกำลังสร้างการตอบกลับ
• ตัวบ่งชี้การพิมพ์ของเจ้าหน้าที่ — v1.6.8 เมื่อเจ้าหน้าที่กำลังพิมพ์การตอบกลับ วิดเจ็ตจะแสดงแอนิเมชันการพิมพ์แก่ผู้เยี่ยมชมแบบเรียลไทม์
• ประวัติข้อความ — ประวัติการสนทนาจะถูกเก็บรักษาไว้ภายในเซสชันเบราว์เซอร์เดียวกัน
• ซิงค์ข้ามแท็บ — หากผู้ใช้เปิดหลายแท็บ สถานะการสนทนาจะถูกซิงค์

การตอบกลับแบบ Markdown

v1.6.4

ข้อความ AI และเจ้าหน้าที่จะแสดงผลเป็น markdown ที่จัดรูปแบบแล้ว แทนที่จะเป็นข้อความธรรมดา รูปแบบที่รองรับได้แก่:

• ตัวหนา, ตัวเอียง, ขีดทับ
• ลิงก์ (เปิดในแท็บใหม่โดยอัตโนมัติ)
• โค้ด inline และบล็อกโค้ดแบบ fenced
• รายการที่มีลำดับและไม่มีลำดับ
• หัวข้อ blockquote และตาราง

เนื้อหา markdown ทั้งหมดได้รับการทำความสะอาดด้วย allowlist ที่เข้มงวดเพื่อป้องกันการโจมตี XSS ไม่จำเป็นต้องกำหนดค่าใดๆ — การแสดงผล markdown เปิดใช้งานโดยค่าเริ่มต้นสำหรับการตอบกลับของ AI และเจ้าหน้าที่ทั้งหมด ข้อความผู้ใช้ยังคงเป็นข้อความธรรมดา

อวาตาร์แบรนด์

v1.6.4

แสดงโลโก้แบรนด์หรืออวาตาร์แบบกำหนดเองในส่วนหัวของวิดเจ็ตและหน้าจอหลัก ตั้งค่า avatarUrl ใน การตั้งค่า → ช่องทาง → เว็บ → ตัวปรับแต่ง หรือส่งผ่านเป็น config.theme.avatarUrl ในโค้ด embed

• รับเฉพาะ URL https:// เท่านั้น
• หาก URL ไม่ถูกต้องหรือโหลดรูปภาพล้มเหลว จะแสดงไอคอนประกายค่าเริ่มต้น
• แนะนำ: รูปภาพสี่เหลี่ยมจัตุรัส (เช่น 128 × 128 px) เพื่อผลลัพธ์ที่ดีที่สุด

ดู การปรับแต่งวิดเจ็ต — อวาตาร์ สำหรับรายละเอียด

ป้ายกำกับ AI เทียบกับมนุษย์

v1.6.4

ข้อความที่ไม่ใช่ของผู้ใช้ทุกข้อความจะแสดงป้ายกำกับผู้เขียนขนาดเล็กที่ระบุผู้ส่ง:

ประเภทผู้เขียน	ป้ายกำกับที่แสดง
AI บอต	”AI Assistant” (แปลตามภาษา)
เจ้าหน้าที่มนุษย์	ชื่อเจ้าหน้าที่ (เช่น “Sarah”)

ป้ายกำกับได้รับการแปลเป็นภาษาที่รองรับทั้ง 15 ภาษาและเข้าถึงได้สำหรับโปรแกรมอ่านหน้าจอ ช่วยให้ผู้เยี่ยมชมแยกแยะระหว่างการตอบกลับที่สร้างโดย AI และมนุษย์ได้อย่างชัดเจน รองรับแนวทางปฏิบัติที่ดีที่สุดด้านความโปร่งใส

ภาษาการทักทาย

v1.6.2

ข้อความทักทายของวิดเจ็ตรองรับสามโหมดภาษา กำหนดค่าใน การตั้งค่า → ช่องทาง → เว็บ → ตัวปรับแต่ง → โหมดการทักทาย:

โหมด	พฤติกรรม
Static	แสดงการทักทายเดียวกันกับผู้เยี่ยมชมทุกคนโดยไม่คำนึงถึงภาษา
Match Visitor	แสดงการทักทายต่อภาษา — กำหนดข้อความทักทายที่แตกต่างกันสำหรับแต่ละโลแคลใน 15 โลแคล
Org-Main	แสดงการทักทายในภาษาตอบกลับหลักขององค์กรเสมอ (ตั้งค่าใน การตั้งค่า AI)

ในโหมด Match Visitor โลแคลใดที่ไม่ได้กำหนดค่าการทักทายจะ fallback ไปยังข้อความทักทายแบบ Static

ดู การปรับแต่งวิดเจ็ต — โหมดการทักทาย สำหรับการกำหนดค่าทีละขั้นตอน

ตัวเลือกภาษา

v1.6.2

วิดเจ็ตสามารถแสดงไอคอนโลกในส่วนหัวที่ให้ผู้เยี่ยมชมเลือกภาษาที่ต้องการได้อย่างชัดเจน ฟีเจอร์นี้ ปิดใช้งานโดยค่าเริ่มต้น และต้องเปิดใช้งานต่อวิดเจ็ตใน การตั้งค่า → ช่องทาง → เว็บ → ตัวปรับแต่ง

เมื่อเปิดใช้งาน:

• ไอคอนโลก (🌐) จะปรากฏในส่วนหัวของวิดเจ็ต
• ผู้เยี่ยมชมสามารถเลือกจากโลแคลที่รองรับได้สูงสุด 15 ตัว
• การเลือกภาษาจะ ล็อก การตอบกลับ AI ทั้งหมดเป็นภาษานั้นสำหรับเซสชัน ซึ่งจะแทนที่การตรวจจับอัตโนมัติ
• การล็อกจะยังคงอยู่แม้ว่าผู้เยี่ยมชมจะพิมพ์ในภาษาอื่น

Note

การล็อกตัวเลือกภาษามีความสำคัญเหนือกว่าการตรวจจับอัตโนมัติ แต่สามารถถูกแทนที่ได้โดยการตั้งค่า บังคับภาษานี้ ใน การตั้งค่า AI หากเปิดใช้งาน Force ภาษาขององค์กรจะชนะเสมอโดยไม่คำนึงถึงการเลือกของผู้เยี่ยมชม

ปุ่มลัดเริ่มแชท

v1.6.12

หน้าเริ่มของวิดเจ็ตจะแสดง ปุ่มลัดเริ่มแชท (Quick Start chips) สูงสุดสามปุ่ม — ทางลัดแบบแตะครั้งเดียวเพื่อเริ่มการสนทนาพร้อมข้อความสำเร็จรูป โดยค่าเริ่มต้นปุ่มเหล่านี้จะ แปลตามภาษา ของผู้เยี่ยมชมแต่ละคน

ในฐานะผู้ดูแล คุณสามารถแทนที่ปุ่มเริ่มต้นด้วยชุดของคุณเองได้ที่ การตั้งค่า → ช่องทาง → เว็บ → ตัวปรับแต่ง → ปุ่มลัดเริ่มแชท:

• กำหนดปุ่มกำหนดเอง 1 ถึง 5 ปุ่ม
• แต่ละปุ่มมี ข้อความ (จำเป็น สูงสุด 100 ตัวอักษร) และ ไอคอน (emoji หรือข้อความสั้น สูงสุด 10 ตัวอักษร) ที่เลือกได้
• ปุ่ม คืนค่าเริ่มต้น จะลบปุ่มกำหนดเองของคุณเพื่อให้วิดเจ็ตแสดงปุ่มเริ่มต้นตามภาษาอีกครั้ง

เมื่อไม่ได้กำหนดปุ่มกำหนดเองไว้ วิดเจ็ตจะแสดงปุ่มเริ่มต้นตามภาษา ปุ่มกำหนดเองจะมีผลสำหรับผู้เยี่ยมชมใหม่ในการโหลดการตั้งค่าครั้งถัดไป

Caution

ปุ่มกำหนดเอง ไม่ถูกแปล — ข้อความที่คุณกรอกจะแสดงตรงๆ ในทุกภาษา หากคุณให้บริการหลายภาษาและต้องการให้ปุ่มเปลี่ยนตามภาษาของผู้เยี่ยมชม ให้คงค่าเริ่มต้นไว้ (ซึ่งจะแปลอัตโนมัติ)

รองรับ RTL (ขวาไปซ้าย)

v1.6.2

วิดเจ็ตและหน้า landing รองรับ เลย์เอาต์ RTL อย่างเต็มรูปแบบสำหรับภาษาอาหรับและฮีบรู เมื่อผู้เยี่ยมชมใช้โลแคล RTL:

• เลย์เอาต์ทั้งหมดจะสะท้อน (การจัดวางข้อความ การนำทาง องค์ประกอบ UI)
• แอตทริบิวต์ <html dir="rtl"> จะถูกตั้งค่าโดยอัตโนมัติ
• ข้อความแชทและกล่องข้อความจะจัดวางอย่างถูกต้องสำหรับการอ่านแบบ RTL

ไม่จำเป็นต้องกำหนดค่าด้วยตนเอง — RTL จะเปิดใช้งานโดยอัตโนมัติตามโลแคลที่เลือก

Fallback เมื่อ Mount Timeout

v1.6.5

หากสคริปต์วิดเจ็ต (widget.js) โหลดไม่สำเร็จภายใน 10 วินาที การฝังจะแสดง UI สำรอง แทนที่จะเว้นพื้นที่ว่าง UI สำรองมีปุ่มลองใหม่เพื่อให้ผู้เยี่ยมชมสามารถพยายามโหลดวิดเจ็ตใหม่โดยไม่ต้องรีเฟรชหน้า

ช่วยปกป้องประสบการณ์ผู้ใช้เมื่อปัญหาเครือข่าย โปรแกรมบล็อกโฆษณา หรือการหยุดให้บริการของ CDN ป้องกันไม่ให้วิดเจ็ตโหลดขึ้น

การออกแบบใหม่ทางภาพของวิดเจ็ต

v1.6.8

วิดเจ็ตได้รับการรีเฟรชภาพในเวอร์ชัน v1.6.8 ด้วยรูปลักษณ์ที่ทันสมัยและประณีต:

• ส่วนหัวแบบ Gradient — ส่วนหัวของวิดเจ็ตใช้ gradient ที่ละเอียดอ่อนตามสีธีมของคุณ พร้อมจุดสถานะและการแสดงอวาตาร์
• ฟองข้อความโค้งมน — ฟองแชทใช้รัศมีขอบที่ใหญ่ขึ้น (rounded-2xl) เพื่อรูปลักษณ์ที่นุ่มนวลกว่า
• การเปิด/ปิดแบบ Animated — วิดเจ็ตเลื่อนเข้าและออกด้วยแอนิเมชัน CSS ที่ราบรื่นแทนที่จะปรากฏทันที
• ตัวเปิดใช้งานที่ออกแบบใหม่ — ตัวเปิดใช้งานฟองแชทเป็น squircle ขนาด 60px พร้อมเงา glow ในสีแบรนด์และแอนิเมชันการเข้า
• ปุ่มสลับ Dark Mode — ปุ่มสลับในส่วนหัวแชทให้ผู้เยี่ยมชมสลับระหว่างโหมดสว่างและมืดระหว่างเซสชัน
• วงแหวน Focus ตามธีม — ฟิลด์ input แสดงวงแหวน focus ในสีแบรนด์เพื่อการเข้าถึง
• แบดจ์การแจ้งเตือน — แบดจ์ข้อความที่ยังไม่ได้อ่านจะปรากฏบนฟองตัวเปิดใช้งาน

การเปลี่ยนแปลงภาพเหล่านี้ใช้งานโดยอัตโนมัติ — ไม่จำเป็นต้องเปลี่ยนการกำหนดค่า

ชิปอ้างอิง

v1.6.5

เมื่อ AI บอตตอบด้วยข้อมูลที่ได้จากฐานความรู้ของคุณ ชิปอ้างอิง จะปรากฏใต้ข้อความ แต่ละชิปแทนเอกสารที่ดึงมาซึ่งมีส่วนร่วมในการตอบ

พฤติกรรม	คำอธิบาย
การแสดงชิป	แสดงชิปชื่อเอกสารสูงสุด 3 ชิป หากมีการใช้แหล่งที่มาเพิ่มเติม ชิป “+N more” จะบ่งชี้การอ้างอิงเพิ่มเติม
คลิกเพื่อขยาย	การคลิกชิปจะสลับ snippet แบบ inline ที่แสดง 200 ตัวอักษรแรกของเนื้อหาที่ดึงมา สามารถเปิด snippet ได้ครั้งละหนึ่งรายการเท่านั้น
การตัดชื่อ	ชื่อเอกสารที่ยาวจะถูกตัดให้เหลือ 40 ตัวอักษรพร้อมจุดไข่ปลา
การตั้งธีม	ชิปใช้สีหลักของวิดเจ็ตเป็น tint ที่ละเอียดอ่อน พร้อมรองรับ dark mode และ RTL อย่างเต็มรูปแบบ
การเข้าถึง	ชิปสามารถนำทางด้วยคีย์บอร์ดพร้อม ARIA labels ที่เหมาะสม (aria-expanded) บทบาทรายการ และการรองรับโปรแกรมอ่านหน้าจอ

ชิปอ้างอิงให้ความโปร่งใสแก่ผู้เยี่ยมชมว่าคำตอบของบอตมาจากไหน ช่วยสร้างความไว้วางใจในการตอบกลับของ AI ไม่จำเป็นต้องกำหนดค่าใดๆ — การอ้างอิงจะปรากฏโดยอัตโนมัติเมื่อ RAG pipeline ดึงเอกสารที่เกี่ยวข้อง

การเลื่อนอัตโนมัติ

v1.6.8

วิดเจ็ตจะเลื่อนไปยังข้อความล่าสุดโดยอัตโนมัติทุกครั้งที่มีเนื้อหาใหม่มาถึง ซึ่งใช้กับ:

• ข้อความใหม่จาก AI บอตหรือเจ้าหน้าที่มนุษย์
• เนื้อหา streaming ขณะที่บอตสร้างการตอบกลับแบบเรียลไทม์

การเลื่อนใช้แอนิเมชันที่ราบรื่นเพื่อให้การเปลี่ยนผ่านรู้สึกเป็นธรรมชาติ ไม่จำเป็นต้องกำหนดค่าใดๆ — การเลื่อนอัตโนมัติจะทำงานตลอดเวลา

ขีดจำกัดช่องทางตามแผน

แผน	ช่องทางสูงสุด
Free	1
Starter	2
Growth	5
Plus	6
Pro	15
Scale	30
Enterprise	50

Tip

ต้องการวิดเจ็ตบนหลายโดเมน? แต่ละโดเมนต้องมีการกำหนดค่าวิดเจ็ตของตัวเอง สร้างวิดเจ็ตหนึ่งรายการต่อโดเมนเพื่อติดตามการวิเคราะห์แยกต่างหาก