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

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

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: Sử dụng HTML Bổ sung (Khuyến nghị)

Moodle có tính năng tích hợp để thêm HTML/JavaScript tùy chỉnh vào tất cả các trang:

Đăng nhập vào trang Moodle của bạn với tư cách quản trị viên
Vào Quản trị trang web
Chuyển đến Giao diện → HTML bổ sung
Cuộn xuống phần "Trước khi đóng BODY"
Dán mã nhúng Asyntai vào khu vực văn bản
Nhấp "Lưu thay đổi"

Mẹo: Việc thêm mã vào "Trước khi đóng BODY" sẽ đặt nó ngay trước thẻ đóng </body>, đây là vị trí được khuyến nghị cho tiện ích chat và đảm bảo nó tải sau nội dung chính của trang.

Thay thế: Sử dụng Cài đặt giao diện

Nhiều giao diện Moodle (bao gồm Boost và các biến thể của nó) có cài đặt riêng để thêm JavaScript tùy chỉnh:

Vào Quản trị trang web → Giao diện → Chủ đề
Nhấp vào Cài đặt chủ đề cho giao diện đang sử dụng của bạn (ví dụ: Boost)
Tìm phần "SCSS thô", "HTML bổ sung", hoặc "JavaScript tùy chỉnh"
If there's a JavaScript field, paste your Asyntai embed code there
Nhấp "Lưu thay đổi"
Xóa bộ nhớ đệm: Quản trị trang web → Phát triển → Xóa bộ nhớ đệm

Lưu ý: Cài đặt cụ thể của chủ đề khác nhau giữa các giao diện. Nếu chủ đề của bạn không có trường JavaScript, hãy sử dụng phương pháp HTML bổ sung ở trên.

Thay thế: Tạo plugin cục bộ

Để kiểm soát nhiều hơn, bạn có thể tạo một plugin cục bộ đơn giản:

Tạo cấu trúc thư mục: local/asyntaichatbot/ trong bộ cài đặt Moodle của bạn
Tạo version.php:
<?php defined('MOODLE_INTERNAL') || die(); $plugin->component = 'local_asyntaichatbot'; $plugin->version = 2024010100; $plugin->requires = 2022041900;
Tạo lib.php:
<?php defined('MOODLE_INTERNAL') || die(); function local_asyntaichatbot_before_footer() { global $PAGE; $PAGE->requires->js_call_amd('local_asyntaichatbot/loader', 'init'); }
Tạo thư mục amd/src/ và tệp loader.js:
define([], function() { return { init: function() { var script = document.createElement('script'); script.async = true; script.src = 'https://asyntai.com/static/js/chat-widget.js'; script.setAttribute('data-asyntai-id', 'YOUR_WIDGET_ID'); document.body.appendChild(script); } }; });
Thay thế YOUR_WIDGET_ID bằng ID tiện ích thực tế của bạn
Vào Quản trị trang web → Thông báo để cài đặt plugin
Xóa bộ nhớ đệm sau khi cài đặt

Quan trọng: Phương pháp plugin cục bộ yêu cầu quyền truy cập dòng lệnh để tạo tệp. Đối với hầu hết người dùng, phương pháp HTML bổ sung đơn giản và đủ dùng hơn.

Thay thế: Chỉnh sửa mẫu chân trang của giao diện

Bạn cũng có thể chỉnh sửa trực tiếp mẫu chân trang của giao diện:

Chuyển đến thư mục giao diện của bạn: theme/YOUR_THEME/
Tìm các tệp bố cục (ví dụ: layout/columns2.php hoặc templates/columns2.mustache)
Find the closing </body> tag or the footer section
Add your Asyntai embed code just before </body>
Lưu tệp
Xóa bộ nhớ đệm Moodle

Quan trọng: Việc chỉnh sửa trực tiếp tệp giao diện có nghĩa là các thay đổi có thể bị mất khi cập nhật giao diện. Sử dụng giao diện con hoặc phương pháp HTML bổ sung để có giải pháp lâu dài hơn.

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

Sau khi lưu các thay đổi và xóa bộ nhớ đệm, hãy truy cập trang Moodle của bạn 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. 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 xóa tất cả bộ nhớ đệm Moodle: vào Quản trị trang web → Phát triển → Xóa tất cả bộ nhớ đệm. Cũng thử xóa bộ nhớ đệm trình duyệt hoặc xem trong cửa sổ ẩn danh. Nếu bạn đang sử dụng plugin bộ nhớ đệm hoặc reverse proxy, hãy xóa cả những bộ nhớ đệm đó.