Tùy Chỉnh Widget

Tùy Chỉnh Widget

Cá nhân hóa giao diện widget trò chuyện để phù hợp với thương hiệu và thiết kế trang web của bạn.

Cài Đặt

Tất cả các tùy chọn tùy chỉnh widget đều có tại Cài đặt → Kênh → Web. Chọn kênh web của bạn và mở tab Giao diện.

---

Màu Chủ Đề

Màu chủ đề được áp dụng nhất quán trên toàn bộ widget:

• Nền nút khởi chạy
• Nền thanh tiêu đề
• Màu nút gửi
• Màu liên kết được tô sáng
• Nền bong bóng tin nhắn của người dùng

Chọn màu phù hợp với nhận diện thương hiệu của bạn và đảm bảo độ tương phản tốt so với chữ trắng.

---

Màu Phụ

v1.6.11

Màu nhấn tùy chọn được áp dụng cho các thành phần UI phụ như điểm nổi bật và biểu tượng. Khi không được đặt, màu phụ được tự động suy ra bằng cách dịch chuyển màu sắc chính 10°.

Mặc định: Tự động suy ra từ màu chính (hue + 10°)

Định dạng: Mã hex 6 chữ số (#RRGGBB)

Qua Dashboard: Đặt tại Cài đặt → Kênh → Web → Trình tùy chỉnh → Màu Phụ.

Qua Mã nhúng: Truyền secondaryColor trong cấu hình theme:

<script>
  window.ClientaConfig = {
    botId: "YOUR_BOT_ID",
    widgetId: "YOUR_WIDGET_ID",
    theme: {
      secondaryColor: "#0062cc"
    }
  };
</script>

---

Tin Nhắn Chào Mừng

Tin nhắn chào mừng là văn bản đầu tiên khách hàng thấy khi mở widget. Hãy giữ nó thân thiện và giải thích rõ ràng bot có thể hỗ trợ những gì.

Ví dụ:

1. “Xin chào! Tôi có thể giúp gì cho bạn hôm nay?”
2. “Chào mừng đến với Hỗ trợ Acme. Hãy hỏi tôi bất cứ điều gì về sản phẩm và dịch vụ của chúng tôi.”
3. “Xin chào! Tôi ở đây để hỗ trợ bạn. Tôi có thể giúp gì cho bạn?”

---

Vị Trí Widget

Vị trí	Giá trị cài đặt	Khi nào sử dụng
Dưới bên phải	bottom-right (mặc định)	Vị trí tiêu chuẩn, phù hợp với hầu hết các trang web
Dưới bên trái	bottom-left	Khi phía phải xung đột với các thành phần khác

---

Ảnh Đại Diện

v1.6.4

Hiển thị ảnh đại diện tùy chỉnh trong tiêu đề widget và màn hình trang chủ bằng cách cung cấp URL hình ảnh.

Qua Bảng điều khiển: Đặt URL ảnh đại diện tại Cài đặt → Kênh → Web → Trình tùy chỉnh → URL Ảnh đại diện.

Qua Mã nhúng: Truyền avatarUrl trong cấu hình theme:

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

Yêu cầu:

• Phải là URL https:// (các URL http, data: và javascript: bị từ chối vì lý do bảo mật)
• Kích thước khuyến nghị: 128 × 128 pixel (hình vuông)
• Định dạng hỗ trợ: PNG, JPG, WebP, SVG
• Nếu URL không hợp lệ hoặc hình ảnh không tải được, biểu tượng mặc định sẽ được hiển thị

---

Biểu Tượng Launcher

v1.6.11

Thay thế SVG bong bóng chat mặc định bằng biểu tượng tùy chỉnh trên nút launcher.

Mặc định: Biểu tượng SVG bong bóng chat tích hợp

Định dạng: URL https:// đến hình ảnh (http:// bị từ chối vì lý do bảo mật)

Khuyến nghị: 28 × 28 pixel, PNG hoặc SVG với độ trong suốt

Qua Dashboard: Đặt tại Cài đặt → Kênh → Web → Trình tùy chỉnh → Bubble Icon.

Qua Mã nhúng: Truyền bubbleIcon trong cấu hình theme:

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

Yêu cầu:

• Phải dùng https:// (http:// và các giao thức khác bị từ chối vì lý do bảo mật)
• Nếu URL không tải được, biểu tượng SVG mặc định sẽ tự động hiển thị

---

Chế Độ Lời Chào

v1.6.2

Tin nhắn chào hỗ trợ ba chế độ ngôn ngữ. Vào Cài đặt → Kênh → Web → Trình tùy chỉnh và tìm phần Chế độ Lời chào.

Tĩnh

Cùng một văn bản chào được hiển thị cho mọi khách truy cập bất kể ngôn ngữ. Đây là chế độ mặc định.

Nhập một lời chào duy nhất vào ô văn bản. Ví dụ: “Xin chào! Tôi có thể giúp gì cho bạn hôm nay?”

Theo Ngôn ngữ Khách truy cập (locale)

Hiển thị lời chào khác nhau cho mỗi ngôn ngữ. Widget đọc ngôn ngữ được phát hiện của khách truy cập và hiển thị lời chào tương ứng.

1. Chọn chế độ Theo Ngôn ngữ Khách truy cập.
2. Một trường xuất hiện cho mỗi trong số 15 locale được hỗ trợ.
3. Điền văn bản lời chào cho từng ngôn ngữ bạn muốn hỗ trợ.
4. Để trống trường của một locale để dự phòng sang lời chào Tĩnh cho ngôn ngữ đó.

Cấu hình ví dụ:

• Tiếng Thái: “สวัสดีค่ะ! มีอะไรให้ช่วยไหม?”
• Tiếng Anh: “Hi! How can I help you today?”
• Tiếng Nhật: “こんにちは！何かお手伝いできますか？“

Ngôn ngữ Chính của Tổ chức

Lời chào luôn được hiển thị bằng ngôn ngữ phản hồi chính của tổ chức, bất kể ngôn ngữ của khách truy cập. Chế độ này đọc ngôn ngữ được cài đặt tại Cài đặt AI → Ngôn ngữ Phản hồi Chính.

Sử dụng Ngôn ngữ Chính của Tổ chức khi nhóm của bạn hoạt động bằng một ngôn ngữ và bạn muốn tất cả lời chào nhất quán.

---

Bộ Chọn Ngôn Ngữ

v1.6.2

Bộ chọn ngôn ngữ thêm biểu tượng địa cầu (🌐) vào tiêu đề widget để khách truy cập có thể chủ động chọn ngôn ngữ của mình. Tính năng này bị tắt theo mặc định.

Để bật: Trong Cài đặt → Kênh → Web → Trình tùy chỉnh, bật Hiển thị Bộ chọn Ngôn ngữ lên ON.

Khi khách truy cập chọn một ngôn ngữ từ danh sách thả xuống:

• Tất cả phản hồi AI được khóa theo ngôn ngữ đó cho phiên
• Khóa này ghi đè tính năng tự động phát hiện ngay cả khi khách truy cập nhập bằng ngôn ngữ khác
• Giao diện widget chuyển sang ngôn ngữ đã chọn

Xem Widget Web — Bộ chọn Ngôn ngữ để có cái nhìn tổng quan đầy đủ về hành vi.

---

Ngôn Ngữ Mặc Định

v1.6.8

Đặt ngôn ngữ mặc định cho widget để khách truy cập thấy giao diện bằng locale ưa thích của bạn trước khi có bất kỳ quá trình tự động phát hiện nào xảy ra. Vào Cài đặt → Kênh → Web → Trình tùy chỉnh → Ngôn ngữ Mặc định và chọn từ danh sách thả xuống.

Chuỗi ưu tiên ngôn ngữ là:

1. Bắt buộc Ngôn ngữ Này (Cài đặt AI) — ghi đè tất cả khi được bật
2. Lựa chọn rõ ràng của Khách truy cập (qua bộ chọn ngôn ngữ, nếu được bật)
3. Ngôn ngữ Mặc định — cài đặt này
4. Locale cấu hình nhúng — giá trị locale trong mã nhúng
5. Tiếng Thái — dự phòng khi không có gì khác được cài đặt

Chọn “Không — theo cấu hình nhúng” để bỏ qua cài đặt này và dựa vào giá trị locale của mã nhúng.

Ghi chú

Ngôn ngữ Mặc định chỉ ảnh hưởng đến ngôn ngữ giao diện widget. Ngôn ngữ phản hồi AI được kiểm soát riêng trong Cài đặt AI.

---

Chế Độ Tối & Biến CSS

v1.6.8

Widget hỗ trợ nút chuyển đổi chế độ tối tích hợp mà khách truy cập có thể kích hoạt từ tiêu đề trò chuyện. Toàn bộ giao diện widget được tạo theme bằng các thuộc tính tùy chỉnh CSS, đảm bảo giao diện nhất quán ở cả hai chế độ.

Các Biến CSS Chính

Biến	Mô tả
--cw-primary	Màu thương hiệu chính (từ cài đặt màu chủ đề của bạn)
--cw-primary-rgb	Các thành phần RGB của màu chính, dùng cho hiệu ứng trong suốt
--cw-bg	Màu nền widget
--cw-bg-secondary	Nền phụ (trường nhập liệu, phần tử biểu mẫu)
--cw-surface	Màu bề mặt cho thẻ, tooltip, đoạn trích dẫn
--cw-text	Màu chữ chính
--cw-text-secondary	Màu chữ phụ/mờ
--cw-border	Màu viền cho thanh phân cách và đường viền ô nhập liệu

Khi chế độ tối được bật, widget áp dụng class cw-dark hoặc cw-light cho container gốc, và tất cả các biến CSS cập nhật tự động. Tiêu đề gradient, bong bóng tin nhắn, biểu mẫu liên hệ và chip trích dẫn đều tuân theo chế độ hiện tại.

Ghi chú

Chế độ tối là nút chuyển đổi phía khách truy cập — nó không lưu trữ qua các phiên. Widget mặc định ở chế độ sáng trừ khi khách truy cập kích hoạt chế độ tối trong phiên trò chuyện của họ.

---

Xem Trước

Sau khi thực hiện thay đổi, sử dụng bảng Xem trước Trực tiếp ở phía bên phải của trang cài đặt để xem chính xác widget sẽ xuất hiện như thế nào trên trang web của bạn — trước khi lưu.

---

Mẹo

Mẹo

• Kiểm tra widget của bạn trên cả máy tính để bàn và thiết bị di động để đảm bảo nó không che khuất nội dung trang quan trọng.
• Sử dụng màu chủ đề có độ tương phản cao để giữ widget dễ tiếp cận cho tất cả người dùng.
• Giữ tin nhắn chào mừng ngắn gọn — một hoặc hai câu là lý tưởng. Khách hàng muốn đặt câu hỏi, không phải đọc cả một đoạn văn.