Bỏ qua đến nội dung chính
Chuyển đến nội dung
webzone.
VI
Nhận tư vấn

Gắn khung chat lên website

Lấy đoạn mã ở trang Kênh & tích hợp, khai báo tên miền được phép, rồi dán mã ngay trước thẻ đóng body của website. Khung chat chỉ chạy trên tên miền đã khai báo.

Cập nhật 13/11/2026 · Phiên bản 1.0.0

Ngôn ngữ
Mục lục
  1. Bạn cần gì
  2. Các bước
  3. Thử trước khi gắn
  4. Tuỳ chọn trên điện thoại
  5. data-offset-mobile
  6. data-keep-clear và data-wz-keep-clear
  7. Các thuộc tính khác
  8. Tiếp theo

Bạn cần gì

  • Tài khoản WZ SmartAgent với vai trò chủ tài khoản hoặc quản trị kỹ thuật (IT). Hai vai trò này tạo được mã gắn chat.
  • Quyền sửa mã HTML của website, hoặc nhờ người làm website giúp.

Các bước

  1. Đăng nhập https://app.webzone.vn/ và mở Kênh & tích hợp.
  2. Ở thẻ Chat trên website, bấm Tạo mã gắn chat.
  3. Ở ô Tên miền được phép, nhập mỗi dòng một tên miền, dạng https://ten-mien.vn. Khung chat chỉ chạy trên các tên miền này.
  4. Bấm nút sao chép cạnh đoạn mã.
  5. Dán đoạn mã vào website, ngay trước thẻ </body>, trên mọi trang muốn có khung chat.
  6. Mở website, tải lại trang và thấy nút chat ở góc dưới.

Đoạn mã có dạng như sau. Khoá pk_live_… là khoá công khai của riêng doanh nghiệp bạn, lấy từ bảng điều khiển.

<script src="https://cdn.webzone.vn/widget/v1/widget.js" data-key="pk_live_…" data-api="https://api.webzone.vn" async></script>

Thử trước khi gắn

Mở Nhắn thử trợ lý trong bảng điều khiển để chat với trợ lý của bạn trước khi đưa lên website thật.

Tuỳ chọn trên điện thoại

Bảng điều khiển có mục Tuỳ chọn thêm cho đoạn mã ngay dưới đoạn mã, giải thích hai thuộc tính sau.

data-offset-mobile

Khoảng cách tính bằng px từ mép dưới màn hình điện thoại tới nút chat. Nếu website có thanh nút cố định ở chân trang, đặt giá trị bằng chiều cao thanh đó. Nút chat và thông báo cookie sẽ nằm ngay trên thanh.

<script src="https://cdn.webzone.vn/widget/v1/widget.js" data-key="pk_live_…" data-api="https://api.webzone.vn" data-offset-mobile="88" async></script>

data-keep-clear và data-wz-keep-clear

data-keep-clear nhận một bộ chọn CSS chỉ các nút quan trọng của trang, ví dụ nút kêu gọi hành động rộng hết màn hình. Trên điện thoại, khi nút chat có thể che nút đó, nút chat tự nhích lên phía trên.

<script src="https://cdn.webzone.vn/widget/v1/widget.js" data-key="pk_live_…" data-api="https://api.webzone.vn" data-keep-clear="#main-cta" async></script>

Bạn cũng có thể gắn thuộc tính data-wz-keep-clear lên từng nút, không cần sửa đoạn mã. Hai cách dùng chung được.

<a href="/dat-lich" class="nut-dat-lich" data-wz-keep-clear>Đặt lịch</a>
  • Nút chat không bao giờ bị ẩn vì các nút này; nó chỉ nhích lên.
  • Nút chat không nhích quá cao trên màn hình, để luôn nằm trong tầm nhìn.
  • Nếu bộ chọn CSS viết sai, trình duyệt ghi một cảnh báo trong console và chỉ các nút có data-wz-keep-clear được tính.

Các thuộc tính khác

  • data-position và data-position-mobile: đặt nút chat bên right (mặc định) hoặc left.
  • data-offset: khoảng cách từ mép dưới trên máy tính, mặc định 20 px.
  • data-color: màu nút chat, dạng mã màu như #0b63c4.
  • data-locale: ngôn ngữ khung chat, một trong vi-VN, en-US, zh-CN, ja-JP, ko-KR, th-TH, es-ES. Nếu bỏ trống, khung chat theo ngôn ngữ của trang.
  • data-open-selector: bộ chọn CSS các nút chat sẵn có của website. Bấm nút đó sẽ mở khung chat, và khi nút đó đang hiện thì nút chat của WZ SmartAgent ẩn đi.

Một phần tử bất kỳ có thuộc tính data-wz-consent sẽ mở lại thông báo đồng ý, để khách đổi lựa chọn. Giá trị data-wz-consent="settings" mở phần lựa chọn chi tiết.

Tiếp theo