Chương 3
Kênh
Kênh là nơi trợ lý gặp khách: khung chat trên website, Zalo OA, Facebook Messenger. Chương này tập trung vào Web Chat, kênh dùng được ngay với mọi gói: tạo chatbot, chỉnh hành vi và giao diện theo thương hiệu, gắn vào trợ lý rồi dán một đoạn mã lên website.
Bốn video, mỗi video dưới một phút rưỡi, đi đúng thứ tự bạn sẽ làm lần đầu. Zalo OA và Facebook có video riêng sau.
4 video · 4:51
Mỗi website một chatbot. Video này tạo chatbot mới rồi chỉnh những gì khách nhìn thấy đầu tiên: tên bot, dòng trạng thái, bong bóng chào và tự động mở.
Dùng khi: Khi bắt đầu đưa trợ lý lên một website, hoặc khi cần một chatbot riêng cho trang đích, trang bán hàng khác.
Các bước
- 1Vào Kênh ở thanh bên. Ba thẻ: Web Chat, API (sắp ra mắt) và Mạng xã hội. Bấm Web Chat.
- 2Danh sách Web Chatbot cho biết số chatbot đã dùng trên hạn mức của gói. Bấm Tạo Chatbot, đặt tên và mô tả ngắn.
- 3Tạo xong bạn ở ngay trang cấu hình. Tab Hành vi: đổi Tên bot, Trạng thái trực tuyến và Placeholder ô nhập. Khung Xem trước trực tiếp bên phải đổi theo từng phím.
- 4Trong thẻ Nút launcher, bật Bong bóng chào mừng và viết câu mời chat. Thẻ Tự động mở: bật để khung chat tự bung ra sau vài giây khách vào trang.
- 5Bấm Lưu thay đổi. Chưa kịp lưu thì bản nháp vẫn nằm trên máy bạn nhờ Tự động lưu nháp.
Tên chatbot: Tư vấn StepX
Mô tả: Chat hỗ trợ trên trang chủ stepx.vn
Tên bot: Minh Anh — Trạng thái: Trả lời trong 1 phút
Bong bóng chào: Chào bạn, mình giúp gì được?
Lưu ý
- Tên chatbot chỉ nhận chữ, số, khoảng trắng, gạch ngang và gạch dưới; có dấu tiếng Việt vẫn được.
- Bong bóng chào và Tự động mở là hai công tắc riêng: bong bóng chỉ mời, tự động mở mới bung khung chat.
Kết quả: Có một Web Chatbot với tên, trạng thái, bong bóng chào và tự động mở đúng ý, sẵn sàng chỉnh giao diện.
Tab Giao diện có sẵn tám bộ màu, hoặc sửa từng màu cho đúng thương hiệu. Video này đổi bộ màu, chỉnh màu chính, cỡ chữ, bo góc và xem dòng Powered by StepX nằm ở đâu.
Dùng khi: Sau khi tạo chatbot, trước khi dán lên website, để khung chat hợp với màu sắc trang của bạn.
Các bước
- 1Ở trang chi tiết chatbot, mở tab Giao diện. Thẻ Giao diện: chọn một bộ có sẵn trong ô Giao diện mặc định, ví dụ Đại dương. Khung chat đổi ngay.
- 2Thẻ Màu sắc: bấm vào ô màu để sửa từng màu: nền, chữ, bong bóng chat, nút bấm. Sửa bất kỳ màu nào thì bộ màu chuyển sang Tuỳ chỉnh.
- 3Thẻ Kiểu chữ & bố cục: font, cỡ chữ cơ bản, độ bo góc và độ nổi bóng.
- 4Thẻ Thương hiệu: công tắc hiện badge Powered by StepX. Gỡ được ở gói Enterprise. Thẻ Nâng cao mở khung JSON để dán nguyên một file theme.
- 5Bấm Lưu thay đổi. Khung xem trước bên phải chính là những gì khách sẽ thấy trên website.
Lưu ý
- Chọn bộ màu có sẵn trước rồi mới sửa vài màu, nhanh hơn dựng từ đầu.
- Theme JSON trong mục Nâng cao dùng để sao chép giao diện giữa các chatbot hoặc giữa các tổ chức.
Kết quả: Khung chat mang màu sắc và kiểu chữ của thương hiệu, biết cách gỡ Powered by và dùng theme JSON.
Chatbot chỉ trả lời khi được gắn vào một trợ lý và website nằm trong danh sách domain được phép. Video này gắn trợ lý, thêm domain, dán mã nhúng vào file HTML của website rồi chat thử.
Dùng khi: Khi chatbot đã chỉnh xong và bạn muốn nó xuất hiện thật trên website.
Các bước
- 1Vào Trợ lý, mở trợ lý sẽ trả lời, chọn mục Kênh. Dòng Kênh đã dùng cho biết còn gắn được bao nhiêu kênh theo gói.
- 2Bấm Liên kết kênh, chọn chatbot vừa tạo. Trợ lý dùng persona và tri thức của mình cho kênh này.
- 3Trong Cấu hình, mục Domain được phép: nhập domain website, bấm Thêm. Bấm Lưu và xuất bản, xác nhận. Liên kết và domain chỉ có hiệu lực sau bước này.
- 4Cuộn tới Mã nhúng, bấm Sao chép mã. Mã gồm một thẻ script tải widget và một lệnh khởi tạo với ID kênh, ID trợ lý.
- 5Mở file HTML của website trong trình soạn code (video dùng VS Code), tìm thẻ đóng body ở cuối file, dán mã ngay phía trên rồi lưu.
- 6Tải lại website: nút chat và bong bóng chào xuất hiện ở góc phải dưới. Gõ một câu hỏi, trợ lý trả lời bằng tri thức đã nạp; hội thoại lưu về trang Hội thoại.
<script src="https://widget.stepx.vn/chatbot-widget.iife.js"></script>
<script>window.initChatbotWidget({ channelId: "…", agentId: "…", mode: "live" });</script>
Dán ngay trước </body>, một lần cho mọi trang dùng chung layout.
Lưu ý
- Chỉ domain trong danh sách mới nhúng được; nhập đúng domain thật, không cần https hay đường dẫn.
- Số domain và số kênh mỗi trợ lý phụ thuộc gói; hết suất thì huỷ liên kết kênh cũ hoặc nâng gói.
- Website dùng nhiều trang thì đặt mã vào layout hoặc footer chung để không phải dán từng trang.
Kết quả: Website của bạn có khung chat hoạt động thật, trợ lý trả lời theo tri thức, hội thoại về trang Hội thoại.
Khi có nhiều website, bảng Web Chatbot là nơi quản lý: chatbot nào gắn trợ lý nào, ghim cái hay dùng, nhân bản cho website mới và xoá an toàn.
Dùng khi: Khi mở website thứ hai, thứ ba, hoặc khi dọn các chatbot thử nghiệm.
Các bước
- 1Bảng Web Chatbot có cột Tên, Mô tả, Trợ lý đang sử dụng và Trạng thái. Menu ba chấm ở cuối dòng: Ghim để đưa lên đầu.
- 2Nhân bản: tạo bản sao với cùng giao diện, hành vi và domain; tên mặc định thêm (copy). Dùng cho website khác có cùng phong cách.
- 3Chỉnh sửa: đổi tên và mô tả, không đụng cấu hình.
- 4Xoá: hộp xác nhận liệt kê ba thứ sẽ mất: cấu hình, lịch sử hội thoại và mọi đoạn nhúng đang trỏ tới chatbot. Gõ DELETE để xác nhận.
Lưu ý
- Bản nhân bản chưa gắn trợ lý; vào Trợ lý, mục Kênh để liên kết như chatbot mới.
- Trước khi xoá, kiểm tra cột Trợ lý đang sử dụng để không làm ngừng một website đang chạy.
Kết quả: Quản lý được nhiều chatbot: ghim, nhân bản cho website mới, sửa thông tin và xoá đúng cái cần xoá.