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

Hướng dẫn từng bước cho trang web Backdrop 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 Giao diện (Khuyến nghị)

Backdrop CMS sử dụng các tệp mẫu .tpl.php trong giao diện của nó. Cách tiếp cận được khuyến nghị là thêm mã nhúng trực tiếp vào mẫu trang của giao diện đang hoạt động:

Truy cập cài đặt Backdrop CMS của bạn qua FTP hoặc Trình quản lý Tệp
Điều hướng đến thư mục giao diện đang hoạt động: themes/yourtheme/
Mở tệp page.tpl.php (hoặc layout.tpl.php tùy thuộc vào giao diện của bạn)
Tìm thẻ đóng </body> hoặc dòng <?php print $page_bottom; ?>
Dán mã nhúng Asyntai của bạn ngay trước dòng đó
Lưu tệp

<!-- Asyntai AI Chatbot -->
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
<?php print $page_bottom; ?>
</body>

Mẹo: Đặt mã ngay trước <?php print $page_bottom; ?> hoặc thẻ đóng </body> đảm bảo chatbot tải sau nội dung trang, cung cấp hiệu suất tải trang tốt hơn. Phương pháp này tự động thêm chatbot vào mọi trang sử dụng giao diện này.

Phương pháp Thay thế 1: Sử dụng Module Tùy chỉnh

Bạn có thể tạo module Backdrop CMS đơn giản để chèn tập lệnh chatbot bằng backdrop_add_js():

Tạo thư mục module: modules/custom/asyntai_widget/
Tạo tệp module asyntai_widget.module với mã sau:
// modules/custom/asyntai_widget/asyntai_widget.module function asyntai_widget_init() { backdrop_add_js('https://asyntai.com/static/js/chat-widget.js', array( 'type' => 'external', 'scope' => 'footer', 'attributes' => array('async' => 'async', 'data-asyntai-id' => 'YOUR_WIDGET_ID'), )); }
Tạo tệp asyntai_widget.info:
name = Asyntai AI Chatbot Widget description = Adds the Asyntai AI chatbot widget to all pages. backdrop = 1.x package = Custom type = module
Đi đến Functionality (admin/modules) trong bảng quản trị Backdrop
Tìm "Asyntai AI Chatbot Widget" trong gói Custom và bật nó
Nhấp "Save configuration"

Lưu ý: Thay thế YOUR_WIDGET_ID trong mã module bằng ID tiện ích thực tế của bạn từ Bảng điều khiển Asyntai. Cách tiếp cận module tùy chỉnh an toàn khi nâng cấp và sẽ không bị ghi đè khi cập nhật giao diện.

Phương pháp Thay thế 2: Sử dụng Module "Add to Head" của Backdrop

Module đóng góp "Add to Head" cung cấp cách dễ dàng để chèn tập lệnh mà không cần chỉnh sửa mã:

Tải xuống và cài đặt module đóng góp "Add to Head" từ trang web Backdrop CMS
Đi đến Configuration > Development > Add to Head
Thêm mã nhúng Asyntai của bạn vào phần chân trang
Nhấp "Save configuration"

Mẹo: Sử dụng module "Add to Head" là phương pháp dễ nhất nếu bạn không muốn chỉnh sửa tệp giao diện hoặc tạo module tùy chỉnh. Nó cung cấp giao diện quản trị đơn giản để quản lý các tập lệnh được chèn.

Phương pháp Thay thế 3: Sử dụng Hệ thống Khối

Hệ thống bố cục và khối của Backdrop CMS cũng có thể được sử dụng để thêm chatbot:

Đăng nhập vào bảng quản trị Backdrop CMS của bạn
Đi đến Structure > Layouts
Chọn bố cục bạn muốn chỉnh sửa (ví dụ: bố cục mặc định)
Nhấp "Add block" trong vùng chân trang
Chọn "Custom block"
Đặt định dạng khối thành "Full HTML" hoặc "Raw HTML"
Dán mã nhúng Asyntai của bạn vào nội dung khối
Đặt tiêu đề cho khối (ví dụ: "Asyntai Chatbot") và tùy chọn đánh dấu "Hide title"
Nhấp "Save block" rồi "Save layout"

Quan trọng: Đảm bảo định dạng văn bản được đặt thành "Full HTML" hoặc "Raw HTML" để thẻ script không bị loại bỏ. Định dạng "Filtered HTML" mặc định sẽ xóa thẻ script vì lý do bảo mật.

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

Sau khi thực hiện các thay đổi, xóa bộ nhớ đệm của Backdrop CMS và xác minh cài đặt:

Đi đến Configuration > Performance trong bảng quản trị
Nhấp "Clear all caches"
Mở trang web 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 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

Không thấy tiện ích? Đảm bảo bạn đã xóa bộ nhớ đệm Backdrop CMS tại Configuration > Performance. Thử xem trang web trong cửa sổ ẩn danh hoặc xóa bộ nhớ đệm trình duyệt. Mở bảng điều khiển trình duyệt (F12) để kiểm tra lỗi JavaScript. Nếu bạn sử dụng phương pháp module tùy chỉnh, xác minh module đã được bật trong Functionality.