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

Hướng dẫn từng bước cho cửa hàng Shopify

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ã vào giao diện Shopify của bạn

Làm theo các bước sau để thêm chatbot vào cửa hàng Shopify:

Đăng nhập vào bảng Quản trị Shopify
Vào Cửa hàng trực tuyến → Giao diện
Tìm giao diện hiện tại và nhấp nút "..." (ba chấm)
Chọn "Chỉnh sửa mã" từ menu thả xuống
Trong thanh bên trái, dưới Bố cục, nhấp vào theme.liquid
Cuộn để tìm thẻ đóng </body>
Dán mã nhúng Asyntai ngay trước thẻ </body>
Nhấp "Save" ở góc trên bên phải

Mẹo: Sử dụng Ctrl+F (Windows) hoặc Cmd+F (Mac) để tìm nhanh </body> trong tệp theme.liquid.

Thay thế: Sử dụng Ứng dụng Shopify

Nếu bạn không muốn chỉnh sửa mã, bạn có thể sử dụng ứng dụng Shopify để thêm script tùy chỉnh:

Vào Cửa hàng Ứng dụng Shopify
Tìm "Custom Script Injector" hoặc "Header & Footer Scripts"
Cài đặt ứng dụng bạn chọn
Thêm mã nhúng Asyntai của bạn vào phần chân trang

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

Sau khi lưu các thay đổi, hãy truy cập cửa hàng Shopify trong tab trình duyệt mới hoặc cửa sổ ẩn danh. Bạn sẽ thấy nút tiện ích chat ở góc dưới bên phải cửa hàng. Nhấp vào để đảm bảo nó mở và hoạt động đúng.

Không thấy tiện ích? Shopify có thể lưu bộ nhớ đệm các tệp giao diện. Thử mở cửa hàng trong cửa sổ trình duyệt ẩn danh/riêng tư, hoặc đợi vài phút và làm mới trang.

Người dùng Shopify Plus

Nếu bạn sử dụng Shopify Plus, bạn cũng có thể thêm script qua tệp checkout.liquid để hiển thị chatbot trên các trang thanh toán. Tuy nhiên, lưu ý rằng hầu hết cửa hàng chỉ cần nó trên các trang cửa hàng chính.

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. Dán vào theme.liquid ngay trước thẻ body đóng, cùng tệp với mã chat. Giao diện của bạn vẫn giữ trang kết quả tìm kiếm riêng, nên nhấn Enter vẫn hoạt động như trước.

<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