Tùy chỉnh màu sắc widget chat theo thương hiệu

1. Tổng quan

Bài viết này hướng dẫn anh/chị cách thay đổi màu sắc của widget chat (chatbot) để đồng bộ với nhận diện thương hiệu của doanh nghiệp. Việc tùy chỉnh màu sắc giúp tạo sự chuyên nghiệp và tăng độ tin tưởng của khách hàng khi tương tác với nhân viên AI trên website.

Nội dung chính:

  • Thiết lập màu sắc chủ đạo cho widget.
  • Tùy chỉnh chi tiết màu sắc các thành phần: Thanh tiêu đề, khung chat và nút gửi văn bản.

Đối tượng áp dụng: Quản trị viên hệ thống Agentwork.

2. Hướng dẫn thực hiện

2.1. Truy cập tính năng tùy chỉnh màu sắc

Để bắt đầu thay đổi giao diện, anh/chị thực hiện các bước sau:

  • Bước 1: Tại màn hình Phát hành trên kênh Chatbot, anh/chị tìm đến mục Thiết lập màu sắc thương hiệu, nhấn vào nút [Tùy chỉnh] để hệ thống hiển thị màn hình thiết lập chi tiết.

  • Bước 2: Hệ thống hiển thị bảng Thiết lập màu sắc thương hiệu, tại đây anh/chị có thể chọn nhanh các mẫu màu có sẵn hoặc tự cấu hình theo ý muốn.

2.2. Tùy chỉnh chi tiết màu sắc các thành phần

Để widget có màu sắc chính xác nhất với bộ nhận diện thương hiệu, anh/chị thực hiện tùy chỉnh tại mục Tùy chỉnh chi tiết:

  • Thiết lập màu Thanh tiêu đề:
    • Màu nền bắt đầu: Nhấn vào ô mã màu, chọn màu sắc mong muốn để thiết lập màu nền cho phần đầu của widget.
    • Màu nền kết thúc: Nhấn vào ô mã màu, chọn màu sắc mong muốn để thiết lập màu nền cho phần cuối của thanh tiêu đề (tạo hiệu ứng gradient nếu cần).
    • Màu chữ: Nhấn vào ô mã màu để chọn màu sắc cho các dòng chữ hiển thị trên thanh tiêu đề.

  • Thiết lập màu Khung chat:
    • Màu nền: Nhấn vào ô mã màu để chọn màu nền cho vùng hiển thị nội dung trò chuyện.
    • Màu chữ: Nhấn vào ô mã màu để chọn màu sắc cho các dòng tin nhắn hiển thị trong khung chat.

  • Thiết lập màu Nút gửi văn bản:
    • Màu nền: Nhấn vào ô mã màu để chọn màu cho nút gửi tin nhắn.
    • Màu icon: Nhấn vào ô mã màu để chọn màu sắc cho biểu tượng (icon) gửi tin nhắn trên nút.

  • Bước 3: Sau khi đã hoàn tất các tùy chỉnh, anh/chị nhấn nút [Áp dụng] ở góc dưới bên phải để lưu lại các thay đổi và cập nhật giao diện mới cho widget chat.

3. Lưu ý

  • Kiểm tra hiển thị: Sau khi nhấn [Áp dụng], anh/chị nên truy cập vào website đang gắn widget để kiểm tra thực tế màu sắc có hiển thị đúng và dễ đọc hay không.
  • Độ tương phản: Khi tùy chỉnh màu chữ và màu nền, anh/chị nên lưu ý chọn các cặp màu có độ tương phản tốt để đảm bảo khách hàng có thể đọc tin nhắn một cách rõ ràng nhất.
Cập nhật Tháng 9 8, 2026


Bài viết này hữu ích chứ?

Nền tảng quản trị doanh nghiệp hợp nhất MISA AMIS với gần 200.000 khách hàng doanh nghiệp đang sử dụng

Bài viết liên quan