Gắn AI Agent lên website
Kênh "Website" giúp bạn tích hợp khung chat trực tiếp vào website của doanh nghiệp: khách có thể nhắn tin ngay trên trang đang xem, AI Agent phản hồi tức thì và mọi cuộc trò chuyện đều đổ về chung mục "Hộp thư" cùng với Facebook và Zalo. Bạn chỉ cần tạo khung chat trong Repio, sao chép một đoạn mã ngắn rồi dán vào website mà không cần am hiểu lập trình.
Trong bài này1/11 · Chuẩn bị trước khi bắt đầu
- 1Chuẩn bị trước khi bắt đầu
- 2Bước 1: Tạo khung chat trong Repio
- 3Bước 2: Dán đoạn mã vào website
- 4Dán mã trên các nền tảng phổ biến
- 5Không rành code? Nhờ AI cài giúp
- 6Bước 3: Kiểm tra khung chat
- 7Tùy chỉnh giao diện và lời chào
- 8Mở khung chat từ nút trên website
- 9Vì sao khung chat không hiện trên website?
- 10Nhãn "Đang hiển thị" nhưng website chưa hiện khung chat
- 11Quản lý hội thoại từ website trong Hộp thư
Cần làm trước
Nội dung này chỉ hiệu quả khi bạn đã hoàn thành:
- 1
Cơ chế hoạt động của AI Agent: Khung chat chỉ hiển thị trên website khi AI Agent phụ trách đã được kích hoạt. Bạn hãy tạo, chạy thử nghiệm và kích hoạt Agent trước.
Thuật ngữ nghiệp vụ
- Khung chat website (widget)
- Biểu tượng nút chat tròn và cửa sổ trò chuyện hiển thị ở góc màn hình website. Khách nhấp vào để trò chuyện trực tiếp với AI Agent.
- Đoạn mã cài đặt
- Đoạn mã thẻ
<script>mang mã định danh riêng của khung chat (bắt đầu bằngwc_). Chỉ cần dán đoạn mã này vào website, khung chat sẽ tự động hiển thị. - Tên miền website
- Danh sách các tên miền website được phép hiển thị khung chat. Khung chat sẽ không xuất hiện trên bất kỳ website nào ngoài danh sách này, kể cả khi đã dán mã.
- Một AI Agent đã được kích hoạt. Nếu Agent vẫn ở trạng thái bản nháp, bạn vẫn có thể chọn nhưng khung chat sẽ tạm ẩn cho đến khi Agent được kích hoạt chính thức.
- Website sử dụng giao thức bảo mật HTTPS (địa chỉ bắt đầu bằng
https://). Hầu hết website hiện nay đều đã đáp ứng tiêu chuẩn này. - Quyền quản trị để chỉnh sửa mã nguồn website, hoặc nhờ người quản lý website (đơn vị thiết kế web, lập trình viên) hỗ trợ. Thao tác dán mã rất đơn giản, chỉ mất khoảng 5 phút.
Điền "Tên hiển thị".
Khách sẽ thấy tên này ở phần tiêu đề đầu khung chat, bạn nên đặt theo tên cửa hàng hoặc thương hiệu của mình (ví dụ: Spa Hoa Mai).
Chọn "AI agent trả lời" rồi nhấp nút "Tạo khung chat".
Agent chưa kích hoạt sẽ có chú thích (bản nháp) phía sau tên. Sau khi tạo, Repio sẽ chuyển đến trang chi tiết của kênh mới, kèm thông báo: "Đã tạo khung chat. Dán đoạn mã bên dưới vào website là xong."
Tại trang chi tiết kênh, khung "Cài lên website" sẽ cung cấp sẵn đoạn mã cài đặt dành riêng cho bạn. Bạn nhấp nút "Sao chép mã", sau đó dán đoạn mã này một lần duy nhất ngay trước thẻ </body>, tại vị trí áp dụng chung cho mọi trang của website (thường là tệp chân trang hoặc layout dùng chung).
Đoạn mã có cấu trúc như sau:
<script src="https://app.repio.io/widget.js" data-repio="wc_xxxxxxxxxxxxxxxxxxxxxxxx" async></script>
Lưu ý quan trọng: Bạn hãy luôn sao chép đoạn mã trực tiếp từ kênh của mình trong Repio. Đoạn mã ở trên chỉ mang tính minh họa, phần wc_xxx… mẫu sẽ không hoạt động. Khi dán mã, hãy giữ nguyên cấu trúc mặc định: không sửa src, data-repio và luôn giữ nguyên thuộc tính async.
| Nền tảng | Vị trí dán đoạn mã |
|---|---|
| Website tự viết (HTML / PHP) | Dán ngay trước thẻ </body> trong tệp giao diện dùng chung (ví dụ: index.html, footer.php). Nếu mỗi trang là một tệp riêng, hãy dán vào từng tệp. |
| WordPress | Cài đặt một plugin chèn mã header/footer (ví dụ: WPCode) và dán vào ô "Footer". Hoặc bạn có thể dán trực tiếp vào tệp footer.php của giao diện (theme), ngay trước thẻ </body>. |
| Shopify, Haravan | Mở trình chỉnh sửa mã nguồn giao diện (theme), mở tệp theme.liquid và dán ngay trước thẻ </body>. |
| Wix | Vào mục Settings → Custom Code, thêm đoạn mã mới, chọn áp dụng cho "All pages" và đặt vị trí tại "Body - end". Lưu ý: Wix chỉ hỗ trợ chèn mã khi website sử dụng gói trả phí và đã kết nối tên miền riêng. |
| Trình tạo landing page (LadiPage…) | Dán vào ô chèn mã tùy chỉnh (HTML/JavaScript) trong phần cài đặt của trang. Hãy lưu ý khai báo chính xác tên miền của trang vào Repio, bao gồm cả tên miền phụ miễn phí do nền tảng cấp (ví dụ: tenban.ladi.site). |
| Next.js | Trong tệp app/layout.tsx (hoặc pages/_document.tsx), sử dụng component Script từ next/script với strategy="afterInteractive", truyền các thuộc tính src và data-repio tương ứng. |
Mẹo hữu ích: Tên các mục trên mỗi nền tảng có thể khác đôi chút tùy phiên bản. Nguyên tắc chung luôn là: dán đoạn mã một lần duy nhất vào khu vực dùng chung cho mọi trang, càng gần cuối trang (ngay trước thẻ </body>) càng tốt.
Bên cạnh nút "Sao chép mã", Repio trang bị thêm nút "Sao chép hướng dẫn cho AI". Nút này sẽ sao chép một bản hướng dẫn kỹ thuật hoàn chỉnh gồm: đoạn mã của bạn, vị trí dán mã trên từng nền tảng, danh sách tên miền đã khai báo và các bước kiểm tra sau khi cài.
Bạn chỉ cần gửi nội dung này cho ChatGPT, Claude hoặc Cursor để AI hỗ trợ cài đặt, hoặc gửi trực tiếp cho đơn vị đang quản lý website. Họ sẽ có đầy đủ thông tin để thực hiện ngay mà không cần trao đổi thêm.
Nhấp nút "Mở trang thử" ở khung "Xem trước" để trò chuyện thử nghiệm.
Repio sẽ mở một trang web thử nghiệm có tích hợp sẵn khung chat của bạn, ngay cả khi bạn chưa gắn mã lên website chính thức. Tin nhắn gửi tại đây là dữ liệu thật: cuộc trò chuyện sẽ đổ về mục "Hộp thư" và AI Agent sẽ phản hồi trực tiếp.
Truy cập website của bạn (tải lại trang) và tìm biểu tượng chat tròn ở góc màn hình.
Mặc định nút chat sẽ nằm ở góc dưới bên phải màn hình (hoặc góc bạn đã tùy chỉnh). Bạn nhấp vào nút để mở khung chat và gửi thử một câu hỏi.
Mở mục "Hộp thư" trong Repio để theo dõi cuộc trò chuyện vừa tạo.
Khách từ website sẽ hiển thị với định dạng tên Khách web … cho đến khi họ để lại tên. Tại đây, bạn và đội ngũ có thể quản lý và tiếp quản hội thoại tương tự như các kênh khác.
Mẹo hữu ích: Nhãn trạng thái ở góc khung "Cài lên website" giúp bạn nắm nhanh tình trạng hoạt động: "Đang hiển thị" là khung chat đã sẵn sàng; nếu là "Đang ẩn", kênh vẫn còn thiếu điều kiện, bạn hãy xem hướng dẫn khắc phục bên dưới.
Khung "Giao diện và thông tin" trên trang chi tiết kênh gồm 3 tab cài đặt. Mọi thay đổi đều được hiển thị trực quan ngay tại khung "Xem trước" bên phải; bạn chỉ cần nhấp nút "Lưu thay đổi" để lưu cấu hình.
Sau khi thay đổi cài đặt, bạn không cần dán lại đoạn mã: khung chat trên website sẽ tự động cập nhật trong vòng khoảng một phút.
| Tab | Các mục tùy chỉnh |
|---|---|
| Giao diện | Tên hiển thị, Logo (định dạng PNG, JPG hoặc WebP, dung lượng tối đa 2 MB), Màu chủ đạo, Màu chữ và biểu tượng (Tự động, Trắng hoặc Đen) và Vị trí nút chat: góc dưới bên phải, góc dưới bên trái, hoặc tùy chỉnh khoảng cách tới mép màn hình (tối đa 1000 px). |
| Trò chuyện | Lời chào (tin nhắn mở đầu khi khách mở khung chat), Câu hỏi gợi ý (tối đa 4 câu, khách chạm một lần để hỏi nhanh) và Thời gian phản hồi (dòng trạng thái nhỏ dưới tên thương hiệu, ví dụ: Thường trả lời trong vài phút). |
| Hành vi | Tên miền website, Tự mở khung chat khi khách truy cập website trên máy tính và Hỏi thông tin trước khi chat: họ tên, số điện thoại, email. |
Mẹo hữu ích: Bật tùy chọn "Hỏi thông tin trước khi chat" để thu thập họ tên và số điện thoại của khách ngay từ tin nhắn đầu tiên. Thông tin này sẽ được lưu tự động vào mục Liên hệ, giúp đội ngũ của bạn chủ động gọi lại tư vấn ngay cả khi khách đã rời khỏi website.
Nếu website của bạn đã có sẵn các nút kêu gọi hành động như Chat với chúng tôi hoặc Tư vấn miễn phí, bạn có thể liên kết để nút đó tự động mở khung chat Repio khi khách nhấp vào. Đoạn mã cài đặt cung cấp sẵn ba hàm JavaScript: RepioWidget.open(), RepioWidget.close() và RepioWidget.toggle(). Đoạn mã HTML mẫu dành cho lập trình viên:
<button type="button" onclick="window.RepioWidget?.open()">Chat với chúng tôi</button>Trước tiên, bạn hãy kiểm tra nhãn trạng thái ở khung "Cài lên website". Nếu nhãn hiển thị là "Đang ẩn", dòng thông báo ngay bên dưới sẽ chỉ rõ nguyên nhân cụ thể:
- "Chọn AI agent cho kênh này ở mục Tự động hóa bên dưới…": Kênh chưa có Agent phụ trách. Bạn hãy chọn một Agent tại khung "Tự động hóa" ở góc dưới bên phải.
- "AI agent của kênh vẫn là bản nháp…": Agent đã được gán vào kênh nhưng chưa được kích hoạt. Bạn hãy mở Agent và tiến hành kích hoạt Agent.
- "Kênh đã ngắt kết nối…": Kênh website này đã bị ngắt kết nối. Bạn cần tạo lại kênh khung chat mới và dán đoạn mã cài đặt mới vào website.
Trong trường hợp này, nguyên nhân thường xuất phát từ phía website của bạn. Bạn hãy lần lượt kiểm tra theo các điểm sau:
1. Tên miền chưa được đăng ký: Tên miền website bạn đang truy cập phải nằm trong danh sách "Tên miền website" (ở tab "Hành vi"). Trường hợp phổ biến là website đang chạy trên một tên miền khác với tên miền đã khai báo (ví dụ: tên miền tạm do nền tảng khởi tạo).
2. Website chưa hỗ trợ HTTPS: Khung chat chỉ hoạt động trên các địa chỉ sử dụng giao thức bảo mật https://.
3. Đoạn mã chưa có trên trang đang xem: Đoạn mã mới chỉ được dán vào một vài trang đơn lẻ, hoặc thay đổi trên website chưa được lưu và xuất bản. Nếu website sử dụng tiện ích bộ nhớ đệm (cache), bạn hãy xóa cache trình duyệt hoặc cache website rồi tải lại trang.
4. Website chặn script bên ngoài: Nếu website thiết lập chính sách bảo mật nội dung (Content-Security-Policy), quản trị viên website cần cấp phép cho tên miền https://app.repio.io trong các chỉ thị script-src, connect-src và frame-src.
Mẹo hữu ích: Lập trình viên có thể mở bảng điều khiển Console của trình duyệt (phím F12) để xác định nhanh nguyên nhân: Repio sẽ ghi một dòng thông báo bắt đầu bằng [Repio] nếu tên miền chưa được cấp phép hoặc khi kênh chưa có Agent hoạt động. Khi chạy thử nghiệm trên máy tính cá nhân, bạn có thể thêm localhost vào danh sách tên miền.
Hội thoại từ website được vận hành tương tự như trên Facebook và Zalo: AI Agent sẽ tự động phản hồi theo khung giờ hoạt động đã thiết lập, chủ động chuyển giao cho nhân viên khi cần thiết, và đội ngũ tư vấn có thể trả lời trực tiếp ngay trong mục "Hộp thư". Toàn bộ tin nhắn phản hồi sẽ xuất hiện tức thì trong khung chat của khách hàng mà không cần phải tải lại trang.
Đặc biệt, AI Agent còn nhận biết chính xác trang web mà khách hàng đang xem (bao gồm tiêu đề và địa chỉ trang) tại thời điểm nhắn tin. Nhờ đó, nếu khách hỏi "chi phí dịch vụ này bao nhiêu?" khi đang xem trang niềng răng, AI sẽ hiểu ngay ngữ cảnh để tư vấn chính xác về dịch vụ niềng răng.
