Quick Start 4 / 4

Nhúng Widget vào Website

Thêm chatbot VNBOT vào bất kỳ website nào chỉ với một đoạn script nhỏ.

~2 phút
XEM VIDEO TRƯỚC KHI BẮT ĐẦU

Video hướng dẫn sắp có

Các bước thực hiện6 bước

1

Mở mục Kênh

Từ Dashboard, chọn "Kênh" (Pages) trong thanh điều hướng bên trái.

2

Chọn "Nhúng vào Website"

Nhấn "Kết nối kênh" ở góc trên bên phải, sau đó chọn "Nhúng vào Website" từ danh sách nền tảng.

3

Đặt tên và tạo mã nhúng

Đặt tên cho kênh website này (ví dụ: "Cửa hàng ABC"), sau đó nhấn "Tạo mã nhúng". Hệ thống tạo một đoạn script dành riêng cho website của bạn.

4

Sao chép đoạn script

Nhấn "Sao chép" để copy toàn bộ đoạn mã vào clipboard. Script được tạo riêng cho kênh website của bạn và chứa token định danh duy nhất.

html
<script src="https://vnbot.vn/webchat.js" data-token="TOKEN_CỦA_BẠN"></script>
5

Dán script vào website

Chỉ cần dán script một lần duy nhất vào thẻ đóng </body> của layout gốc. Vị trí cụ thể tuỳ theo nền tảng bạn đang dùng:

Để giới hạn trang hiển thị: sau khi tạo xong, nhấn biểu tượng ✏️ trên card kênh, chọn tab "Hành vi" và cấu hình "Chỉ hiển thị trên" hoặc "Không hiển thị trên". Hỗ trợ wildcard * cho tất cả trang con (ví dụ: /blog/*).
WordPressAppearance → Theme Editor → footer.php → dán trước </body>
ShopifyOnline Store → Themes → Edit code → theme.liquid → dán trước </body>
WixSettings → Custom Code → Add Code → chọn "Body - end"
SquarespaceSettings → Advanced → Code Injection → Footer
WebflowProject Settings → Custom Code → Footer Code → Publish lại
Next.jsDán vào app/layout.tsx (root layout) hoặc pages/_app.tsx
Vue / Nuxt / AngularDán vào file layout gốc của ứng dụng, tương tự Next.js
Static HTMLDán vào từng file .html trước </body>. Nếu server hỗ trợ SSI, dùng <!--#include file="widget.html" --> để tránh lặp lại
6

Kiểm tra widget hiển thị

Tải lại website của bạn. Widget chat xuất hiện ở góc dưới bên phải (hoặc bên trái nếu đã cấu hình). Nhấn vào để thử gửi tin nhắn.

Bài viết này có hữu ích không?