Cách thêm Asyntai AI Chatbot vào Webflow

Hướng dẫn từng bước cho các trang web Webflow

Nền tảng:

Bước 1: Lấy Mã Nhúng của Bạn

First, go to your Asyntai Dashboard and scroll down to the "Embed Code" section. Copy your unique embed code which will look like this:

<script>(function(){var l=function(){var s=document.createElement("script");s.src="https://widget.asyntai.com/static/js/chat-widget.js";s.async=true;s.setAttribute("data-asyntai-id","YOUR_WIDGET_ID");document.head.appendChild(s)};if(document.readyState==="complete"){l()}else{window.addEventListener("load",l)}})();</script>

Lưu ý: Mã ở trên chỉ là ví dụ. Bạn phải sao chép mã nhúng duy nhất của riêng mình từ Bảng điều khiển vì nó chứa ID tiện ích cá nhân của bạn.

Bước 2: Thêm mã qua Cài đặt trang (Tất cả các trang)

Để thêm chatbot vào tất cả các trang của trang web Webflow của bạn cùng một lúc:

Đăng nhập vào tài khoản Webflow của bạn và chọn dự án của bạn
Nhấp vào biểu tượng bánh răng (Cài đặt trang) trong thanh bên trái
Nhấp vào "Custom Code" trong menu cài đặt
Cuộn xuống phần "Footer Code" (trước thẻ </body>)
Dán mã nhúng Asyntai của bạn
Nhấp "Save Changes"
Xuất bản trang web để áp dụng thay đổi

Mẹo: Thêm mã vào phần Footer đặt nó ngay trước thẻ đóng </body>, được khuyến nghị cho các widget chat vì nó không làm chậm việc tải trang của bạn.

Thay thế: Mã tùy chỉnh theo trang cụ thể

Nếu bạn chỉ muốn chatbot trên các trang cụ thể:

Mở dự án của bạn trong Webflow Designer
Nhấp vào bảng điều khiển Pages (biểu tượng thư mục) trong thanh bên trái
Di chuột qua trang bạn muốn chỉnh sửa và nhấp vào biểu tượng bánh răng
Cuộn xuống "Custom Code"
Dán mã nhúng Asyntai của bạn vào phần "Before </body> tag"
Nhấp "Save"
Xuất bản trang web của bạn

Thay thế: Sử dụng phần tử Embed

Bạn cũng có thể thêm chatbot bằng phần tử Embed ở bất kỳ đâu trên trang của bạn:

Mở dự án của bạn trong Webflow Designer
Nhấp nút "+" để mở bảng điều khiển Thêm
Tìm kiếm "Embed" hoặc tìm nó trong mục Components
Kéo phần tử Embed vào trang của bạn
Dán mã nhúng Asyntai vào trình soạn thảo mã
Nhấp "Save & Close"
Xuất bản trang web của bạn

Quan trọng: Khi sử dụng phần tử Embed, bạn sẽ cần thêm nó vào mỗi trang nơi bạn muốn chatbot. Để cài đặt toàn trang, hãy sử dụng phương pháp Cài đặt trang ở trên.

Bước 3: Xác minh Cài đặt

Sau khi xuất bản trang web, hãy mở nó trong một tab trình duyệt mới hoặc cửa sổ ẩn danh. Bạn sẽ thấy nút widget chat ở góc dưới bên phải. Nhấp vào để đảm bảo nó mở và hoạt động đúng.

Không thấy tiện ích? Hãy đảm bảo bạn đã xuất bản trang web sau khi thêm mã. Mã tùy chỉnh chỉ xuất hiện trên trang trực tiếp, không phải trong bản xem trước Designer. Thử xóa bộ nhớ đệm trình duyệt hoặc xem trong cửa sổ ẩn danh.

Thêm Thanh tìm kiếm AI

Thanh tìm kiếm AI là một widget riêng với mã riêng. Thêm nó cùng với chat, hoặc dùng một mình. Nó cần gói Standard trở lên: ở gói thấp hơn, thanh vẫn hiện nhưng không trả về kết quả.

Thêm thuộc tính data-replace vào thẻ script và thanh này sẽ thay chỗ thanh sẵn có của giao diện. Thêm ở Site Settings, Custom Code, Footer, cùng chỗ với mã chat, nhờ vậy nó nằm ngay trước thẻ body đóng.

<script src="https://widget.asyntai.com/static/js/search-widget.js" data-asyntai-id="YOUR_WIDGET_ID" data-replace="auto" async></script>

Đọc hướng dẫn đầy đủ về Thanh tìm kiếm AI