Giao diện Widget

Tùy chỉnh giao diện chat widget

Phiên bản: 1.0 | Ngày: 2025-10-19 | Trạng thái: ✅ Hoàn thành

---

📋 Tổng Quan

Tùy chỉnh giao diện giúp widget phù hợp với thương hiệu và tăng trải nghiệm người dùng: màu sắc, vị trí, kích thước, hình dạng nút mở, tiêu đề và lời chào.

Vị trí: Manage → AI → Chatbots → Chọn chatbot → Settings → Widget Appearance

---

🎨 Thành Phần Tùy Chỉnh

• Theme Color: Màu chủ đạo (mã hex)

• Position: Góc dưới phải/trái

• Icon Size: Nhỏ / Trung bình / Lớn

• Launcher Shape: Tròn / Vuông

• Welcome Title: Tiêu đề cửa sổ chat

• Welcome Message: Lời chào mở đầu

Mẹo thương hiệu:

• Dùng màu brand chính, tương phản đủ với nền

• Giữ lời chào ngắn, rõ ràng về khả năng của chatbot

---

🧪 Ví Dụ Cấu Hình

Ví dụ 1: Phong cách thương hiệu tối giản

{
  "themeColor": "#0F62FE",
  "position": "bottom-right",
  "iconSize": "medium",
  "launcherShape": "circle",
  "welcomeTitle": "Xin chào!",
  "welcomeMessage": "Tôi có thể giúp gì cho bạn hôm nay?"
}

Ví dụ 2: Tập trung vào hỗ trợ HR

{
  "themeColor": "#2E7D32",
  "position": "bottom-left",
  "iconSize": "large",
  "launcherShape": "rounded",
  "welcomeTitle": "Hỗ trợ Nhân sự",
  "welcomeMessage": "Hỏi tôi về nghỉ phép, phúc lợi, lương..."
}

---

✅ Quy Trình Thiết Lập

1. Mở chatbot → Tab Settings → Widget Appearance

2. Chọn màu, vị trí, kích thước, hình dạng

3. Nhập tiêu đề và lời chào

4. Lưu thay đổi

5. Test trên desktop/tablet/mobile

---

🧠 Best Practices

• Bám sát guideline thương hiệu (brandbook)

• Giữ contrast màu chữ/nền ≥ 4.5:1 để dễ đọc

• Lời chào nêu rõ chatbot làm được gì, gợi ý câu hỏi mẫu

• Test nhiều thiết bị và độ phân giải

---

🧯 Khắc Phục Sự Cố

• Màu hiển thị sai: kiểm tra mã hex và cache CSS

• Nút launcher che nội dung: đổi vị trí/giảm kích thước

• Lời chào không hiện: kiểm tra cấu hình và quyền hiển thị

---

🔗 Tài Liệu Liên Quan

• Display Rules

• Live Chat Widget

• Configure Chatbot

---

Phiên bản: 1.0 Cập nhật cuối: 2025-10-19 Trạng thái: ✅ Hoàn thành