#20. Nhúng widget chat vào website và cấu hình hiển thị

  • Kênh
  • 30/10/2026
  • 13 lượt xem

Video hướng dẫn

Xem nhanh video hướng dẫn dưới đây, hoặc đọc các bước chi tiết ngay bên dưới video.

Giới thiệu

Website widget là khung chat bong bóng quen thuộc ở góc các website. Khách vào web, bấm bong bóng, nhắn tin — tin chảy thẳng vào hộp thư SellMate Chat như một kênh bình thường. Kết nối widget gồm 3 bước: Tên & tên miền → Mã nhúng → Xong. Sau khi nối, bạn còn cấu hình hiển thị (màu sắc, lời chào, ảnh đại diện…) ngay trong trang Kênh.

Các bước thực hiện

Bước 1: Tạo widget — đặt tên và khai báo tên miền

Vào Kênh → Thêm kênh → Website widget. Ở bước 1/3, điền:

  • Tên kênh: tên hiển thị trong hộp thư (ví dụ “Chat trên sellmate.vn”).
  • Tên miền được phép nhúng: mỗi dòng một địa chỉ gốc, đầy đủ https:// (ví dụ https://shop.example.com). Chỉ các tên miền khai ở đây mới nhúng được widget — đây là lớp chống người khác sao chép mã chat sang web của họ. Để trống nghĩa là không site nào nhúng được.

Bấm Tạo widget để sang bước Mã nhúng.

Hộp thoại Kết nối Website widget ở bước Tên & tên miền được khoanh đỏ
Bước 1: Đặt tên kênh và khai báo tên miền được phép nhúng.

Bước 2: Lấy mã nhúng và gắn vào website

Ở bước 2/3, hệ thống hiện đoạn mã nhúng của widget. Người quản trị website sao chép đoạn mã này và dán vào mã nguồn của website (thường là ngay trước thẻ đóng trong template chung của site) — dán một nơi, khung chat hiện trên mọi trang.

Với kênh widget đã tạo, bạn mở lại mã bất cứ lúc nào: vào Kênh, bấm thẻ kênh widget, cột chi tiết có nút Lấy mã nhúng và Chạy thử (mở thử widget ngay trong trang quản trị). Mã nhúng là thông tin riêng của kênh — bài viết không chụp đoạn mã thật; chỉ gửi mã cho người quản trị website của chính doanh nghiệp bạn.

Chi tiết kênh widget với các nút Lấy mã nhúng, Chạy thử, Nhật ký được khoanh đỏ
Bước 2: Trong chi tiết kênh widget có sẵn nút “Lấy mã nhúng” và “Chạy thử”.

Bước 3: Cấu hình hiển thị của widget

Vẫn trong chi tiết kênh, mở mục Cấu hình widget ở phần Thao tác khác. Panel cấu hình mở ra với khung Xem trước trực tiếp ở trên: mọi thay đổi bạn chọn sẽ hiện ngay trên bản xem trước (tiêu đề khung chat, lời chào “Xin chào! Chúng tôi có thể giúp gì cho bạn?”, bong bóng chat).

Các mục chính trong phần Giao diện: Tên hiển thị trên khung chat, Dòng phụ dưới tên (ví dụ “Thường phản hồi trong ít phút”), Màu chủ đạo (nhập mã màu hoặc chọn trong dãy màu sẵn), Ảnh đại diện (logo vuông, tối đa 5MB). Cuộn xuống còn phần Bong bóng chat và các mục khác như giờ làm việc, form trước khi chat.

Panel có hai nút ở góc trên: Kiểm thử (xem thử widget như khách thấy) và Lưu lại — chỉ bấm Lưu lại khi bạn thật sự muốn áp dụng thay đổi lên website thật. Khi đang xem và học, đóng panel mà không lưu.

Panel Cấu hình widget với khung xem trước và mục Giao diện được khoanh đỏ
Bước 3: Cấu hình widget — xem trước trực tiếp ở phía trên, chỉnh giao diện ở phía dưới.

Kết quả

Khách vào website thấy bong bóng chat ở góc trang với đúng màu sắc và lời chào của doanh nghiệp; tin nhắn của họ xuất hiện trong hộp thư dưới kênh widget tương ứng.

Lưu ý

  • Gắn mã xong mà không thấy bong bóng chat: kiểm tra tên miền — tên miền đang mở phải khớp đúng dòng đã khai ở bước 1 (kể cả khác biệt www / không www). Thêm dòng tên miền rồi kiểm tra lại.
  • Đổi màu/tên hiển thị xong nhưng web vẫn hiện cũ: có thể trình duyệt đang cache — tải lại trang bằng Ctrl + F5 hoặc mở tab ẩn danh để kiểm tra.
  • Một website nên chỉ gắn một đoạn mã widget SellMate; gắn trùng hai lần sẽ hiện hai bong bóng chat chồng nhau.

Bài viết tiếp theo

→ Phân công kênh: người quản lý, nhóm phụ trách, tự phân công

Bài viết liên quan