Nhúng widget vào website
Lấy đoạn mã nhúng ở tab Cấu hình của kênh tiện ích website, dán vào trang của bạn, khai tên miền được phép và kiểm tra tin nhắn thử về hàng đợi.
Kênh đã dựng xong thì việc còn lại nằm trên website của bạn: hai đoạn script và một tên miền được khai báo. Trang này đi từ nút sao chép trong console tới nút chat hiện ra trên trang.
Mục tiêu
Khung chat xuất hiện ở góc website của bạn, và tin khách gửi từ đó rơi vào hàng đợi Trò chuyện của workspace.
Trước khi bắt đầu
- Một kênh loại tiện ích website đã tồn tại. Chưa có thì làm Tạo kênh đầu tiên trước.
- Một tài khoản sửa được kênh. Quản trị viên luôn sửa được; vai trò khác phải nằm trong một nhóm quyền cho phép.
- Chỗ dán được HTML vào website đó — theme, layout, hoặc trình quản lý thẻ.
- Địa chỉ console của workspace, dạng
https://<domain-cua-ban>. Đoạn mã nhúng được dựng từ chính địa chỉ này.
Các bước
Ở cột trái bấm Kênh, rồi bấm vào kênh tiện ích website bạn muốn nhúng.
Mở tab Cấu hình. Phần Mã nhúng hiện đoạn script kèm một nút sao chép ở góc trên phải khối mã.
Bấm nút sao chép. Console báo Đã sao chép vào clipboard.
Dán đoạn vừa chép vào website, ngay trước thẻ đóng </body>, trên mọi trang
bạn muốn có khung chat.
Thêm baseUrl vào lời gọi run() như mẫu bên dưới. Đoạn console chép ra không
kèm tham số này, và thiếu nó thì khung chat được tải từ http://localhost:5174.
Quay lại tab Cấu hình, gõ tên miền website vào Danh sách tên miền mục tiêu rồi bấm Thêm. Tên miền biến thành một thẻ nhỏ dưới ô nhập.
Bấm Lưu cài đặt, rồi tải lại website của bạn.
Đoạn mã sau khi đã điền, với hai chỗ cần thay:
<script src="https://<domain-cua-ban>/widget.js"></script>
<script>
window.CustomChatSDK.run({
websiteToken: "<WEBSITE_TOKEN>",
baseUrl: "https://<domain-cua-ban>"
});
</script><WEBSITE_TOKEN> là chuỗi console đã điền sẵn cho bạn trong khối Mã nhúng;
nó định danh kênh và là giá trị công khai theo thiết kế. <domain-cua-ban> là
địa chỉ console — cùng một máy chủ phục vụ widget.js và tài liệu khung chat.
run() nhận thêm vài tuỳ chọn. position ("left" hoặc "right") ghi đè
Vị trí tiện ích đã lưu trong console. unreadTitle đổi câu nhấp nháy trên
tiêu đề tab khi có tin chưa đọc. Bỏ position đi nếu bạn muốn cài đặt trong
console có hiệu lực.
Kiểm chứng
Tải lại website và tìm nút chat ở góc dưới màn hình. Bấm vào nút đó, gõ một câu thử rồi gửi.
Trong console, mở Trò chuyện và chọn tab Tất cả. Câu thử phải hiện thành một hội thoại mới, mang tên kênh bạn vừa nhúng, trong vòng vài giây.
Sự cố thường gặp
| Hiện tượng | Nguyên nhân | Cách xử lý |
|---|---|---|
| Không có gì hiện ở góc trang | Lời gọi run() thiếu baseUrl, nên khung chat được tải từ http://localhost:5174 | Thêm baseUrl trỏ về địa chỉ console |
Console của trình duyệt in CustomChatSDK: websiteToken is required | Đoạn mã bị cắt mất tham số websiteToken | Chép lại nguyên khối Mã nhúng |
| Nút chat hiện nhưng bấm vào thì khung trống | Tên miền đang chạy không nằm trong Danh sách tên miền mục tiêu | Thêm đúng tên miền đó, kể cả bản www, rồi lưu |
| Chạy được ở bản thử, không chạy ở bản chính thức | Hai bản nằm trên hai tên miền, mới khai một | Khai cả hai tên miền vào cùng kênh |
| Nút chat nằm sai bên so với cài đặt | Đoạn mã truyền position nên nó thắng cấu hình kênh | Bỏ position khỏi run() |