Tùy chỉnh giao diện widget
Đặt màu, giao diện sáng tối, vị trí, nút mở chat, đầu khung chat, ngôn ngữ và những trang hiện widget, rồi xem ngay trong khung xem trước.
Cập nhật ngày
Trong bài này
Làm cho widget hợp với thương hiệu của bạn: đúng màu, có logo, nút có chữ, giao diện tối cho website tối màu. Mọi thiết lập nằm trên trang của website trong Hạ Tầng, và khung xem trước bên cạnh hiện widget thật ngay khi bạn thay đổi.
Bạn cần quyền Quản lý với module Hỗ trợ.
Thiết lập nằm ở đâu
- Vào Hỗ trợ khách hàng → Kênh.
- Bấm vào website của bạn trong nhóm Website & ứng dụng.
Trang của website có ba tab:
| Tab | Có gì |
|---|---|
| Cài đặt | Đoạn mã cài đặt, mọi thiết lập widget trong bài này và các bài sau, mã bí mật định danh, và xoá site. |
| Tự động hoá | Tin nhắn nhắc lại (không gửi khi cửa sổ trả lời của kênh đã đóng: 48 giờ sau tin cuối của khách với Zalo OA và TikTok, 24 giờ với Messenger, Instagram và WhatsApp), social proof, đánh giá hài lòng (CSAT), theo dõi chuyển đổi, cùng các luồng và chiến dịch đang chạy trên website. Xem Chiến dịch và Mức độ hài lòng (CSAT). |
| Ứng dụng | Ứng dụng di động dùng chung cài đặt widget của website này. Phần này do lập trình viên thiết lập; xem hướng dẫn SDK. |
Xong, bấm Lưu cài đặt ở cuối biểu mẫu. Dòng "Đã lưu. Widget cập nhật trong vòng một phút." xác nhận đã lưu; khách thấy thay đổi trong vòng một phút mà bạn không phải sửa gì trên website.
Khung xem trước
Khung Xem trước (bên phải biểu mẫu trên màn hình rộng, bên dưới trên màn hình hẹp) chạy widget thật với các thay đổi chưa lưu. Dùng các nút phía trên để chuyển giữa:
- Đang mở và Nút chat: khung chat đang mở, hoặc chỉ nút ở góc màn hình.
- Ngoại tuyến: widget trông thế nào khi không ai trực.
- Form thông tin: biểu mẫu hỏi thông tin khi khách gửi tin nhắn đầu tiên.
- Máy tính và Điện thoại, VI và EN cho ngôn ngữ.
Gõ thử một tin nhắn trong khung xem trước để thấy bong bóng tin nhắn. Những gì gõ ở đây không được gửi đi.

Màu, giao diện và vị trí
Thẻ Chung chứa các thiết lập cơ bản.
| Thiết lập | Tác dụng |
|---|---|
| Tiêu đề widget | Tên trên đầu widget. Đây cũng là tên của website trong Hạ Tầng. |
| Màu | Màu của nút mở chat, đầu khung chat và tin nhắn của khách. Bấm vào ô màu để chọn. |
| Vị trí | Góc dưới phải (mặc định) hoặc Góc dưới trái. |
| Giao diện | Sáng (mặc định), Tối, hoặc Theo hệ thống của khách: theo chế độ sáng tối trên máy khách và tự đổi theo. |
| Trạng thái | Đang hoạt động, hoặc Đã tắt (ẩn widget) để ẩn widget ở mọi nơi mà vẫn giữ lịch sử. |

Nút mở chat
Nút tròn ở góc màn hình dùng để mở chat.
- Biểu tượng: Bong bóng chat, Tai nghe hỗ trợ, Dấu hỏi hoặc Tin nhắn tròn, theo màu của bạn.
- Chữ trên nút (tiếng Việt) và Chữ trên nút (tiếng Anh): tối đa 24 ký tự, ví dụ "Tư vấn" hay "Chat with us". Nút tròn thành nút dài có chữ. Để trống cả hai nếu chỉ muốn biểu tượng. Có chữ sẽ giúp khách không nhầm khi website đã có một nút chat hay nút "Liên hệ" khác.
- Ảnh riêng (tuỳ chọn): địa chỉ
https://của một ảnh vuông, ví dụ logo, để thay cho biểu tượng.
Khi khung chat đang đóng, nút hiện một chấm đỏ với số câu trả lời khách chưa đọc.
Kích thước và khoảng cách tới góc
- Độ rộng khung chat: Hẹp (340px), Vừa (380px) (mặc định) hoặc Rộng (440px). Trên điện thoại, khung chat luôn mở toàn màn hình.
- Khoảng cách nút chat tới góc (px): Desktop: dưới và Desktop: cạnh (trống là 20 px), Điện thoại: dưới và Điện thoại: cạnh (trống là 16 px). Nếu website trên điện thoại có thanh cố định ở cuối màn hình, như nút "Thêm vào giỏ" hay thanh menu, hãy tăng Điện thoại: dưới để nút chat nằm phía trên. Khi để trống cả hai ô điện thoại, điện thoại dùng số của máy tính.
Đầu khung chat
Thẻ Đầu khung chat quyết định phần trên cùng của khung chat.
- Hiển thị: Ảnh nhân viên đang trực (mặc định) hiện tối đa ba nhân viên đang trực tuyến. Ảnh nhân viên đang trực, không ai trực thì logo cũng vậy, nhưng hiện logo khi không ai trực. Ảnh một nhân viên được chọn luôn hiện người bạn chọn ở ô Nhân viên hiển thị, ví dụ chủ shop, dù họ có trực hay không. Logo doanh nghiệp hiện logo trong ô Logo (URL https, ảnh vuông), hoặc chữ cái đầu của tiêu đề widget nếu chưa có logo.
- Dòng giới thiệu (Tiếng Việt) và Dòng giới thiệu (English): tối đa 120 ký tự, ví dụ "Thường trả lời trong vài phút".
Dưới dòng giới thiệu, đầu khung chat ghi "Chúng tôi đang trực tuyến", hoặc "Hiện chúng tôi vắng mặt" kèm giờ quay lại nếu bạn dùng giờ làm việc. Xem Giờ làm việc và tin nhắn ngoài giờ.
Ngôn ngữ
Widget nói tiếng Việt hoặc tiếng Anh. Trong thẻ Tin nhắn, Ngôn ngữ mặc định quyết định ngôn ngữ:
- Tự động (theo trình duyệt) (mặc định): tiếng Việt cho khách có trình duyệt tiếng Việt, tiếng Anh cho những người còn lại.
- Tiếng Việt hoặc English: luôn dùng ngôn ngữ đó.
Các nội dung bạn tự viết, như lời chào hay chữ trên nút, đều có ô tiếng Việt và ô tiếng Anh. Có khách nước ngoài thì điền cả hai. Lập trình viên cũng có thể đổi ngôn ngữ theo từng trang; plugin WordPress tự làm việc này.
Nơi hiện widget
Thẻ Nơi hiện widget giới hạn widget ở một số trang hoặc thiết bị:
- Thiết bị: Mọi thiết bị, Chỉ máy tính hoặc Chỉ điện thoại (màn hình rộng từ 640 px trở xuống).
- Chỉ hiện trên URL chứa (mỗi dòng một chuỗi; trống = mọi trang): ví dụ
/san-pham. Widget chỉ hiện trên trang có địa chỉ chứa một trong các chuỗi này. - Ẩn trên URL chứa (mỗi dòng một chuỗi): ví dụ
/checkoutđể widget không hiện ở trang thanh toán. - Phát âm thanh khi có tin nhắn mới và Nhấp nháy tiêu đề tab khi khách đang ở tab khác: bật sẵn, để khách không bỏ lỡ câu trả lời của bạn.
Khung chat khách đang mở vẫn hiện, kể cả khi họ chuyển sang trang bạn đã loại trừ.
Bước tiếp theo
Bài viết này có giúp ích cho bạn không?
Bài viết liên quan
- Lời chào và nút liên hệChào khách bằng một câu mở đầu, cho lời chào bật lên trên nút chat sau vài giây, và thêm nút Zalo, Messenger, gọi điện, email trong widget.
- Giờ làm việc và tin nhắn ngoài giờQuyết định khi nào widget hiện trực tuyến, khách thấy gì khi đội ngũ vắng mặt, và cách bạn biết có tin nhắn đến ngoài giờ.
- Hỏi thông tin liên hệ khi khách nhắn tin đầu tiênBật form thông tin khách để lấy tên, số điện thoại hoặc email khi khách gửi tin nhắn đầu tiên, để liên hệ lại được cả khi khách đã rời website.
Chưa tìm thấy điều bạn cần?
Đội ngũ của chúng tôi trả lời qua chat, bằng tiếng Việt hoặc tiếng Anh.
Bạn đang tích hợp API hoặc SDK? Xem tài liệu cho lập trình viên →