การปรับแต่ง Widget

การปรับแต่ง Widget

ปรับแต่งรูปลักษณ์ของ chat widget ให้เข้ากับแบรนด์และการออกแบบเว็บไซต์ของคุณ

การตั้งค่า

ตัวเลือกการปรับแต่ง widget ทั้งหมดมีอยู่ที่ Settings → Channels → Web เลือก web channel ของคุณแล้วเปิดแท็บ Appearance

---

สีธีม

สีธีมจะถูกนำไปใช้อย่างสม่ำเสมอทั่วทั้ง widget:

• พื้นหลังปุ่ม Launcher
• พื้นหลัง Header bar
• สีปุ่มส่ง
• สีไฮไลต์ลิงก์
• พื้นหลัง bubble ข้อความผู้ใช้

เลือกสีที่เข้ากับอัตลักษณ์แบรนด์ของคุณและให้ความคมชัดที่ดีกับข้อความสีขาว

---

ข้อความต้อนรับ

ข้อความต้อนรับคือข้อความแรกที่ลูกค้าเห็นเมื่อเปิด widget รักษาให้เป็นมิตรและอธิบายอย่างชัดเจนว่าบอทสามารถช่วยอะไรได้บ้าง

ตัวอย่าง:

1. “สวัสดีครับ/ค่ะ! วันนี้ให้ช่วยอะไรได้บ้างครับ/ค่ะ?”
2. “ยินดีต้อนรับสู่ Acme Support ถามฉันได้เลยเกี่ยวกับผลิตภัณฑ์และบริการของเรา”
3. “สวัสดีครับ/ค่ะ! ฉันพร้อมช่วยเหลือ ต้องการให้ช่วยเรื่องอะไรครับ/ค่ะ?”

---

ตำแหน่ง Widget

ตำแหน่ง	ค่าการตั้งค่า	เมื่อใดควรใช้
ล่างขวา	bottom-right (ค่าเริ่มต้น)	ตำแหน่งมาตรฐาน เหมาะกับเว็บไซต์ส่วนใหญ่
ล่างซ้าย	bottom-left	เมื่อด้านขวาขัดแย้งกับองค์ประกอบอื่น

---

Avatar

v1.6.4

แสดง avatar แบบกำหนดเองในส่วนหัวของ widget และหน้าจอหลักโดยระบุ URL ของรูปภาพ

ผ่าน Dashboard: ตั้งค่า URL ของ avatar ใน Settings → Channels → Web → Customizer → Avatar URL

ผ่าน Embed Code: ส่ง avatarUrl ในการกำหนดค่าธีม:

<script>
  window.ClientaConfig = {
    botId: "YOUR_BOT_ID",
    widgetId: "YOUR_WIDGET_ID",
    theme: {
      avatarUrl: "https://example.com/your-logo.png"
    }
  };
</script>

ข้อกำหนด:

• ต้องเป็น URL แบบ https:// (URL แบบ http, data: และ javascript: จะถูกปฏิเสธด้วยเหตุผลด้านความปลอดภัย)
• ขนาดที่แนะนำ: 128 × 128 พิกเซล (สี่เหลี่ยมจัตุรัส)
• รูปแบบที่รองรับ: PNG, JPG, WebP, SVG
• หาก URL ไม่ถูกต้องหรือรูปภาพโหลดไม่ได้ ไอคอนเริ่มต้นจะแสดงขึ้น

---

โหมดข้อความทักทาย

v1.6.2

ข้อความทักทายรองรับสามโหมดภาษา ไปที่ Settings → Channels → Web → Customizer แล้วมองหาส่วน Greeting Mode

Static

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

ป้อนข้อความทักทายเดียวในช่องข้อความ ตัวอย่าง: “สวัสดีครับ/ค่ะ! วันนี้ให้ช่วยอะไรได้บ้างครับ/ค่ะ?”

Match Visitor (locale)

แสดงข้อความทักทายที่แตกต่างกันสำหรับแต่ละภาษา widget จะอ่านภาษาที่ตรวจพบของผู้เยี่ยมชมและแสดงข้อความทักทายที่ตรงกัน

1. เลือกโหมด Match Visitor
2. ช่องจะปรากฏสำหรับแต่ละ locale ที่รองรับทั้ง 15 รายการ
3. กรอกข้อความทักทายสำหรับแต่ละภาษาที่คุณต้องการรองรับ
4. เว้นช่องของ locale ว่างไว้เพื่อใช้ข้อความทักทายแบบ Static สำหรับภาษานั้น

ตัวอย่างการตั้งค่า:

• Thai: “สวัสดีค่ะ! มีอะไรให้ช่วยไหม?”
• English: “Hi! How can I help you today?”
• Japanese: “こんにちは！何かお手伝いできますか？“

Org-Main

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

ใช้ Org-Main เมื่อทีมของคุณดำเนินการในภาษาเดียวและต้องการให้ข้อความทักทายทั้งหมดสอดคล้องกัน

---

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

v1.6.2

ตัวเลือกภาษาจะเพิ่มไอคอนโลก (🌐) ไปที่ส่วนหัวของ widget เพื่อให้ผู้เยี่ยมชมสามารถเลือกภาษาได้อย่างชัดเจน โดยค่าเริ่มต้นปิดใช้งาน

วิธีเปิดใช้งาน: ใน Settings → Channels → Web → Customizer สลับ Show Language Selector เป็น ON

เมื่อผู้เยี่ยมชมเลือกภาษาจาก dropdown:

• การตอบสนองของ AI ทั้งหมดจะถูกล็อกเป็นภาษานั้นตลอด session
• การล็อกจะแทนที่การตรวจจับอัตโนมัติแม้ว่าผู้เยี่ยมชมจะพิมพ์ภาษาอื่น
• UI ของ widget จะเปลี่ยนเป็นภาษาที่เลือก

ดู Web Widget — Language Selector สำหรับภาพรวมพฤติกรรมทั้งหมด

---

ภาษาเริ่มต้น

v1.6.8

ตั้งค่าภาษาเริ่มต้นสำหรับ widget เพื่อให้ผู้เยี่ยมชมเห็น UI ในภาษาที่คุณต้องการก่อนที่จะมีการตรวจจับอัตโนมัติ ไปที่ Settings → Channels → Web → Customizer → Default Language และเลือกจาก dropdown

ลำดับความสำคัญของภาษาคือ:

1. Force This Language (AI Settings) — แทนที่ทุกอย่างเมื่อเปิดใช้งาน
2. การเลือกอย่างชัดเจนของผู้เยี่ยมชม (ผ่านตัวเลือกภาษา หากเปิดใช้งาน)
3. Default Language — การตั้งค่านี้
4. Embed config locale — ค่า locale ในโค้ด embed
5. Thai — ค่าสำรองเมื่อไม่มีการตั้งค่าอื่น

เลือก “None — follow embed config” เพื่อข้ามการตั้งค่านี้และใช้ค่า locale จากโค้ด embed แทน

Note

Default Language ส่งผลต่อภาษา UI ของ widget เท่านั้น ภาษาในการตอบสนองของ AI ถูกควบคุมแยกต่างหากใน AI Settings

---

Dark Mode & CSS Variables

v1.6.8

widget รองรับปุ่มสลับ dark mode ในตัวที่ผู้เยี่ยมชมสามารถเปิดใช้งานจากส่วนหัวของ chat UI ของ widget ทั้งหมดถูกออกแบบโดยใช้ CSS custom properties เพื่อให้รูปลักษณ์สอดคล้องกันในทั้งสองโหมด

CSS Variables หลัก

Variable	คำอธิบาย
--cw-primary	สีแบรนด์หลัก (จากการตั้งค่าสีธีมของคุณ)
--cw-primary-rgb	ส่วนประกอบ RGB ของสีหลัก ใช้สำหรับเอฟเฟกต์ความโปร่งใส
--cw-bg	สีพื้นหลัง widget
--cw-bg-secondary	พื้นหลังรอง (ช่องป้อนข้อมูล องค์ประกอบแบบฟอร์ม)
--cw-surface	สี Surface สำหรับการ์ด tooltips ส่วนอ้างอิง
--cw-text	สีข้อความหลัก
--cw-text-secondary	สีข้อความรอง/สีอ่อน
--cw-border	สีขอบสำหรับตัวคั่นและขอบช่องป้อนข้อมูล

เมื่อสลับ dark mode widget จะใช้ class cw-dark หรือ cw-light กับ container หลัก และ CSS variables ทั้งหมดจะอัปเดตโดยอัตโนมัติ ส่วนหัวแบบ gradient, message bubbles, แบบฟอร์มติดต่อ และ citation chips ทั้งหมดจะปฏิบัติตามโหมดปัจจุบัน

Note

Dark mode เป็นปุ่มสลับฝั่งผู้เยี่ยมชม — ไม่มีการบันทึกข้ามเซสชัน widget จะใช้ light mode เป็นค่าเริ่มต้น เว้นแต่ผู้เยี่ยมชมจะเปิดใช้งาน dark mode ระหว่าง chat session

---

ตัวอย่างก่อนบันทึก

หลังจากทำการเปลี่ยนแปลง ใช้แผง Live Preview ทางด้านขวาของหน้าการตั้งค่าเพื่อดูว่า widget จะปรากฏบนเว็บไซต์ของคุณอย่างไร — ก่อนบันทึก

---

เคล็ดลับ

Tip

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