Cách Thêm Chatbot AI Asyntai vào Adobe Commerce (Magento)

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

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: Sử dụng Trình tạo Trang (Khuyến nghị)

Cách dễ nhất để thêm chatbot là sử dụng khối HTML Code của Trình tạo Trang:

Đăng nhập vào Bảng Quản trị Magento
Đi đến Content → Pages
Chỉnh sửa trang Chủ (hoặc bất kỳ trang nào bạn muốn chatbot)
Trong Trình tạo Trang, kéo phần tử "HTML Code" vào trang
Dán mã nhúng Asyntai của bạn
Nhấp "Save"
Xóa bộ nhớ đệm: System → Cache Management → Flush Magento Cache

Quan trọng: Sử dụng Trình tạo Trang chỉ thêm mã vào từng trang. Để cài đặt toàn trang, sử dụng phương pháp Layout XML bên dưới.

Thay thế: Sử dụng Layout XML (Tất cả Trang)

Để thêm chatbot vào tất cả các trang, hãy tạo một tệp bố cục trong giao diện của bạn:

Điều hướng đến thư mục giao diện: app/design/frontend/[Vendor]/[theme]/
Tạo cấu trúc thư mục nếu chưa tồn tại: Magento_Theme/layout/
Tạo hoặc chỉnh sửa tệp default_head_blocks.xml
Thêm mã sau:
<?xml version="1.0"?> <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> <head> <script src="https://asyntai.com/static/js/chat-widget.js" src_type="url" async="true" data-asyntai-id="YOUR_WIDGET_ID"/> </head> </page>
Thay thế YOUR_WIDGET_ID bằng ID tiện ích thực tế của bạn
Chạy: bin/magento cache:flush
Chạy: bin/magento setup:static-content:deploy -f (nếu ở chế độ sản xuất)

Thay thế: Sử dụng Khối CMS

Bạn cũng có thể tạo khối CMS và bao gồm nó trong chân trang:

Đi đến Content → Blocks
Nhấp "Add New Block"
Đặt tiêu đề như "Asyntai Chatbot"
Đặt Identifier thành asyntai_chatbot
Trong trình chỉnh sửa nội dung, chuyển sang chế độ HTML và dán mã nhúng của bạn
Nhấp "Save Block"
Thêm khối vào mẫu chân trang bằng cách sử dụng: {{block id="asyntai_chatbot"}}
Xóa bộ nhớ đệm

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

Sau khi lưu thay đổi và xóa bộ nhớ đệm, truy cập cửa hàng 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 trò chuyện ở góc dưới bên phải. Nhấp vào nó để đảm bảo nó mở và hoạt động chính xác.