Tích hợp chatbot vào website của doanh nghiệp
Thời điểm khách hàng đang xem trang sản phẩm và phát sinh câu hỏi là thời điểm có tỉ lệ chuyển đổi cao nhất. Kênh Website cung cấp khung chat hoạt động ngay trên trang của bạn, với câu trả lời hiển thị dần theo luồng.
Tổng quan về kênh Website
Khác với các kênh còn lại, kênh Website không có nền tảng trung gian. Website của bạn kết nối trực tiếp với hệ thống.
Mỗi kênh Website tương ứng với một điểm cuối công khai riêng. Trang web gửi lên định danh phiên cùng nội dung khách hàng nhập, hệ thống khởi tạo hội thoại, để trợ lý xử lý rồi trả kết quả về. Vì không phụ thuộc webhook của bên thứ ba, câu trả lời được trả về ngay trong cùng một lượt gọi mà không phát sinh độ trễ hàng đợi.
Khách truy cập website thường ở trạng thái ẩn danh. Định danh phiên là cơ chế giúp hệ thống nhận diện cùng một người dùng khi họ quay lại, nhờ đó trợ lý duy trì được ngữ cảnh của hội thoại trước đó.
Điều kiện chuẩn bị
- Danh sách tên miền được phép
- Khai báo chính xác các địa chỉ sẽ gọi tới kênh này, ví dụ https://shop.vn và https://www.shop.vn. Đây là cơ chế ngăn bên thứ ba sử dụng mã kênh của bạn trên website của họ và phát sinh chi phí cho tài khoản của bạn. Nếu để trống, mọi tên miền đều gọi được, chỉ nên áp dụng trong giai đoạn phát triển trên máy cá nhân.
- Một trợ lý đã hoàn tất thiết lập
- Kênh chưa gắn trợ lý vẫn tiếp nhận tin nhắn vào hộp thư nhưng không có phản hồi tự động. Nên hoàn tất việc thiết lập trợ lý và nạp tài liệu trước khi kết nối kênh.
- Quyền chỉnh sửa mã nguồn website
- Bạn cần quyền chèn một thẻ script vào phần cuối trang. Với các nền tảng phổ biến như WordPress, Shopify hay Haravan, thao tác này thực hiện trực tiếp trong phần cấu hình mà không cần lập trình.
Các bước kết nối trong dashboard
- 1Truy cập mục Kênh và tạo kết nối mới
Mở /dashboard/kenh và chọn loại kênh Website.
- 2Đặt tên kênh
Tên nội bộ giúp nhận diện kênh trong hộp thư, ví dụ "Chat trang chủ". Khách hàng không nhìn thấy tên này.
- 3Chọn trợ lý phụ trách
Xác định trợ lý sẽ tiếp nhận khách hàng trên website. Thông tin này thay đổi được về sau mà không phải kết nối lại kênh.
- 4Khai báo tên miền được phép nhúng
Nhập các địa chỉ, phân tách bằng dấu phẩy. Cần khai báo cả biến thể có www và không có www nếu website sử dụng đồng thời cả hai.
- 5Sao chép mã nhúng
Trang chi tiết kênh hiển thị sẵn đoạn mã nhúng kèm mã kênh. Dán đoạn mã này vào trước thẻ đóng body của website là hoàn tất.
Đoạn mã nhúng
Một thẻ script duy nhất, không phụ thuộc framework và không yêu cầu thư viện bổ sung.
<script
src="https://cdn.chattudong.com/widget.js"
data-channel="ch_xxxxxxxx"
data-title="Hỗ trợ khách hàng"
data-greeting="Xin chào, chúng tôi có thể hỗ trợ gì cho bạn?"
data-color="#155dfc"
data-position="bottom-right"
defer
></script>| data-channel (bắt buộc) | Mã kênh lấy ở trang chi tiết kênh |
|---|---|
| data-api | Gốc API, mặc định suy ra từ src của script |
| data-title | Tiêu đề hiển thị trên đầu khung chat |
| data-greeting | Câu chào hiển thị khi khách mở khung chat |
| data-color | Màu chủ đạo của khung chat |
| data-position | bottom-right (mặc định) hoặc bottom-left |
| data-visitor-name | Tên khách hàng nếu website đã xác thực người dùng |
Bạn có thể trải nghiệm trực tiếp kết quả tại chính website này: khung chat ở góc màn hình được nhúng bằng đúng đoạn mã trên.
Dành cho đội ngũ tự phát triển giao diện
Nếu doanh nghiệp muốn tự xây dựng giao diện khung chat thay vì dùng widget mặc định, hệ thống cung cấp ba điểm cuối công khai dưới đây. Đây cũng là lý do danh sách tên miền được phép có vai trò quan trọng, bởi các điểm cuối này không yêu cầu khoá API.
| Gửi tin, chờ trả lời | POST /widget/{channelId}/messages |
|---|---|
| Gửi tin, nhận trả lời theo luồng | POST /widget/{channelId}/stream |
| Lấy tin mới trong hội thoại | GET /widget/{channelId}/messages?conversationId=… |
Tham số gửi lên thống nhất ở cả ba điểm cuối: định danh phiên, nội dung khách hàng nhập và tên khách hàng nếu website đã có thông tin này. Phiên bản theo luồng trả về từng phần nội dung để khung chat hiển thị dần. Điểm cuối lấy tin mới phục vụ trường hợp nhân viên trả lời thủ công từ hộp thư, khi đó trang web chủ động kiểm tra tin nhắn mới.
Chi tiết tham số và ví dụ mã nguồn có trong tài liệu dành cho lập trình viên.
Lưu ý khi triển khai
- Khách hàng gửi được hình ảnh và tệp đính kèm qua khung chat. Tệp được lưu vào hội thoại để nhân viên xem và xử lý, tuy nhiên trợ lý chưa tự động phân tích nội dung bên trong tệp.
- Định danh phiên được widget lưu tại trình duyệt và giữ nguyên giữa các lần truy cập. Nếu tự phát triển giao diện, cần bảo đảm cơ chế tương tự, nếu không mỗi lần tải lại trang sẽ được ghi nhận là một khách hàng mới và trợ lý mất ngữ cảnh.
- Kênh chưa gắn trợ lý vẫn tiếp nhận tin nhắn vào hộp thư nhưng không có phản hồi tự động. Cấu hình này phù hợp khi doanh nghiệp chỉ muốn nhân viên trực tiếp trao đổi với khách hàng.
- Chuyển kênh sang trạng thái tạm dừng khi cần ngừng trả lời tự động: tin nhắn vẫn được ghi nhận đầy đủ, chỉ trợ lý ngừng hoạt động.
Kết nối thêm kênh khác
Toàn bộ kênh tập trung về cùng một hộp thư, dùng chung trợ lý và chung kho tri thức. Việc bổ sung kênh mới không yêu cầu thiết lập lại trợ lý từ đầu.