Cách thêm Chatbot AI Asyntai vào October CMS

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

Cách được khuyến nghị để thêm chatbot là chỉnh sửa bố cục mặc định trong phần quản trị October CMS:

Đăng nhập vào phần quản trị October CMS của bạn
Vào CMS > Bố cục trong menu chính
Mở bố cục mặc định của bạn (thường là default.htm)
Tìm thẻ đóng </body> thẻ và {% scripts %} chỗ giữ
Thêm mã nhúng Asyntai ngay trước {% scripts %} và </body>:
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script> {% scripts %} </body>
Nhấp "Lưu" để áp dụng các thay đổi

Mẹo: Placing the script before {% scripts %} and </body> ensures it loads after the page content, which is recommended for chat widgets and won't slow down your page loading.

Alternative Method 1: Using {% put scripts %} Block

Bạn có thể sử dụng chỗ giữ script của October CMS để chèn chatbot từ một trang hoặc partial:

Mở bất kỳ trang hoặc partial nào trong trình soạn thảo CMS
Thêm mã sau bằng cách sử dụng {% put scripts %} khối:
{% put scripts %} <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script> {% endput %}
Thay thế YOUR_WIDGET_ID bằng ID tiện ích thực tế từ bảng điều khiển
Nhấp "Save"

Lưu ý: For this method to work, your layout must include the {% scripts %} placeholder in its markup. This is where October CMS renders all injected scripts. Most default layouts already include this tag.

Phương pháp thay thế 2: Sử dụng Component PHP

Nếu bạn thích cách tiếp cận lập trình, bạn có thể thêm script chatbot thông qua component tùy chỉnh:

Tạo hoặc chỉnh sửa một component trong plugin October CMS của bạn
Trong phương thức onRun() của component, sử dụng phương thức addJs():
public function onRun() { $this->addJs('https://asyntai.com/static/js/chat-widget.js', [ 'async' => true, 'data-asyntai-id' => 'YOUR_WIDGET_ID' ]); }
Thay thế YOUR_WIDGET_ID bằng ID tiện ích thực tế của bạn
Đăng ký component trên các trang bạn muốn chatbot xuất hiện

Mẹo: Sử dụng component cho phép bạn kiểm soát lập trình khi nào và ở đâu chatbot tải. Bạn có thể thêm logic điều kiện trong onRun() để kiểm soát việc tải dựa trên vai trò người dùng, loại trang hoặc các tiêu chí khác.

Phương pháp thay thế 3: Sử dụng Partial

Bạn có thể tạo một partial tái sử dụng cho tiện ích chatbot:

Vào CMS > Partials trong phần quản trị October CMS
Nhấp "+ Thêm" để tạo partial mới
Đặt tên là asyntai-widget.htm
Thêm mã nhúng Asyntai vào partial:
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
Nhấp "Save"
Mở mẫu bố cục và thêm partial trước </body>:
{% partial 'asyntai-widget' %}
Lưu bố cục

Mẹo: Sử dụng partial giúp dễ dàng bật hoặc tắt chatbot trên toàn bộ trang web bằng cách chỉ thêm hoặc xóa partial include khỏi bố cục.

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

Sau khi lưu các thay đổi, hãy truy cập trang web October CMS 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 bạn đã lưu tất cả thay đổi trong phần quản trị CMS. Xóa bộ nhớ đệm trình duyệt hoặc xem trong cửa sổ ẩn danh. Nếu trang web sử dụng bộ nhớ đệm, hãy xóa bộ nhớ đệm October CMS bằng cách chạy php artisan cache:clear từ dòng lệnh, hoặc sử dụng tùy chọn Cài đặt > Hệ thống > Xóa bộ nhớ đệm trong phần quản trị.

Chọn bố cục: Hãy đảm bảo các trang bạn muốn chatbot xuất hiện đang sử dụng đúng bố cục. Bạn có thể kiểm tra bố cục của trang bằng cách mở trang trong CMS > Trang và xem danh sách thả xuống Bố cục trong cài đặt trang.