Cách Thêm Chatbot AI Asyntai vào Drupal

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

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 Module Header and Footer Scripts (Khuyến nghị)

Cách dễ nhất để thêm chatbot là sử dụng module "Header and Footer Scripts":

Đăng nhập vào bảng quản trị Drupal
Đi đến Extend và nhấp "Install new module"
Search for "Header and Footer Scripts" or download it from Drupal.org
Cài đặt và bật module
Đi đến Configuration → Development → Header and Footer Scripts
Nhấp vào tab "Footer"
Dán mã nhúng Asyntai vào khu vực văn bản footer scripts
Nhấp "Save configuration"

Mẹo: Thêm mã vào phần footer đảm bảo nó tải sau nội dung trang, được khuyến nghị cho tiện ích trò chuyện.

Thay thế: Chỉnh sửa Mẫu Giao diện

Bạn có thể thêm mã trực tiếp vào tệp mẫu giao diện:

Điều hướng đến thư mục giao diện: themes/your_theme/
Mở tệp html.html.twig (hoặc tạo nếu chưa tồn tại)
Tìm thẻ đóng </body>
Dán mã nhúng Asyntai ngay trước thẻ </body>
Lưu tệp
Xóa bộ nhớ đệm Drupal: Configuration → Performance → Clear all caches

Quan trọng: Thay đổi tệp giao diện có thể bị ghi đè khi cập nhật giao diện. Hãy cân nhắc sử dụng giao diện con hoặc module Header and Footer Scripts cho giải pháp lâu dài hơn.

Thay thế: Sử dụng Libraries (Cho Nhà phát triển)

Dành cho nhà phát triển thích sử dụng hệ thống thư viện tài sản của Drupal:

Tạo hoặc chỉnh sửa tệp *.libraries.yml của giao diện
Thêm mục thư viện mới:
asyntai-chatbot: js: https://asyntai.com/static/js/chat-widget.js: { type: external, attributes: { async: true, data-asyntai-id: YOUR_WIDGET_ID } }
Đính kèm thư viện trong tệp *.info.yml của giao diện:
libraries: - your_theme/asyntai-chatbot
Xóa bộ nhớ đệm Drupal

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

Sau khi lưu thay đổi và xóa bộ nhớ đệm, truy cập trang web 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.