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

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

Nền tảng:

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

Đầu tiên, đi đến Bảng điều khiển Asyntai và cuộn xuống phần "Mã Nhúng". Sao chép mã nhúng duy nhất của bạn sẽ trông như thế này:

<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></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 vào Mẫu MODX (Khuyến nghị)

Cách được khuyến nghị để thêm chatbot là chỉnh sửa trực tiếp Mẫu MODX trong MODX Manager:

Đăng nhập vào MODX Manager (bảng quản trị)
Trong thanh bên trái, đi đến Elements > Templates
Mở mẫu của trang web (thường gọi là "BaseTemplate" hoặc mẫu đang hoạt động)
Tìm thẻ đóng </body> trong mã mẫu
Dán mã nhúng Asyntai ngay trước thẻ đóng </body>
Nhấp "Save" để lưu mẫu

<!-- Your existing template content -->

<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
</body>
</html>

Mẹo: Thêm mã ngay trước thẻ đóng </body> đảm bảo chatbot tải sau tất cả nội dung trang, là vị trí được khuyến nghị cho tiện ích trò chuyện và sẽ không làm chậm tải trang.

Phương pháp Thay thế 1: Sử dụng Chunk MODX

Bạn có thể sử dụng MODX Chunk để giữ mã nhúng riêng biệt và có thể tái sử dụng:

Trong MODX Manager, đi đến Elements > Chunks
Nhấp "New Chunk" để tạo chunk mới
Đặt tên chunk "asyntaiWidget"
Dán mã nhúng Asyntai vào khu vực nội dung chunk
Nhấp "Save"
Mở mẫu (trong Elements > Templates)
Thêm lệnh gọi chunk [[$asyntaiWidget]] ngay trước thẻ đóng </body>
Lưu mẫu

<!-- In your Template, before </body> -->
[[$asyntaiWidget]]
</body>
</html>

Mẹo: Sử dụng Chunk giúp dễ quản lý và cập nhật mã nhúng tại một nơi, đặc biệt nếu bạn sử dụng nhiều mẫu trên trang web.

Phương pháp Thay thế 2: Sử dụng Cài đặt Hệ thống MODX (HTML Head/Footer)

Một số thiết lập MODX bao gồm placeholder cho script chân trang qua System Settings:

Trong MODX Manager, đi đến System > System Settings
Lọc theo "htmlhead" hoặc tìm kiếm cài đặt hệ thống tùy chỉnh cho script chân trang
Nếu thiết lập có placeholder cho script chân trang (như [[++footer_scripts]]), bạn có thể sử dụng nó
Đặt giá trị cài đặt hệ thống thành mã nhúng Asyntai
Đảm bảo placeholder tương ứng [[++footer_scripts]] có mặt trong mẫu trước thẻ đóng </body>
Lưu cài đặt hệ thống

<!-- In your Template, before </body> -->
[[++footer_scripts]]
</body>
</html>

Lưu ý: Phương pháp này phụ thuộc vào thiết lập MODX có cài đặt hệ thống tùy chỉnh cho script chân trang. Nếu không có, bạn có thể tạo cài đặt hệ thống tùy chỉnh và tham chiếu trong mẫu bằng cú pháp [[++setting_key]].

Phương pháp Thay thế 3: Sử dụng Plugin MODX (OnWebPagePrerender)

Để có cách tiếp cận nâng cao, bạn có thể tạo Plugin MODX tự động chèn mã chatbot vào mọi trang:

Trong MODX Manager, đi đến Elements > Plugins
Nhấp "New Plugin" để tạo plugin mới
Đặt tên plugin "AsyntaiChatbot"
Dán mã PHP sau vào khu vực mã plugin:

$output = &$modx->resource->_output;
$script = '<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>';
$output = str_replace('</body>', $script . '</body>', $output);

Nhấp tab "System Events"
Đánh dấu ô bên cạnh "OnWebPagePrerender" để kích hoạt plugin trên sự kiện đó
Nhấp "Save"

Quan trọng: Thay thế YOUR_WIDGET_ID bằng ID tiện ích thực tế từ Bảng điều khiển Asyntai. Plugin này sẽ tự động chèn tập lệnh chatbot vào mọi trang trên trang MODX trước khi hiển thị.

Bước 3: Xóa Bộ nhớ đệm và Xác minh

Sau khi thêm mã nhúng bằng bất kỳ phương pháp nào ở trên, bạn cần xóa bộ nhớ đệm MODX và xác minh cài đặt:

Trong MODX Manager, đi đến Manage > Clear Cache (hoặc nhấp biểu tượng xóa bộ nhớ đệm trong menu trên cùng)
Mở 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 của trang
Nhấp vào nó để đảm bảo nó mở và hoạt động chính xác

Không thấy tiện ích? Đảm bảo bạn đã xóa bộ nhớ đệm MODX từ Manage > Clear Cache trong MODX Manager. Cũng thử xóa bộ nhớ đệm trình duyệt hoặc xem trang web trong cửa sổ ẩn danh. Nếu bạn sử dụng phương pháp Plugin, xác minh sự kiện hệ thống "OnWebPagePrerender" đã được đánh dấu cho plugin.