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

Hướng dẫn từng bước cho trang web Concrete CMS (trước đây là Concrete5)

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 Mã vào Chân trang Giao diện (Khuyến nghị)

Cách tốt nhất để thêm chatbot vào tất cả các trang web Concrete CMS là chỉnh sửa tệp chân trang giao diện:

Truy cập cài đặt Concrete CMS qua FTP hoặc Trình quản lý Tệp
Điều hướng đến thư mục /application/themes/your_theme_name/
Tìm và mở tệp footer.php (hoặc mẫu chân trang tương đương)
Tìm dòng có thẻ đóng </body>
Dán mã nhúng Asyntai ngay trước thẻ </body>
Lưu tệp và tải lên lại máy chủ nếu chỉnh sửa cục bộ
Xóa bộ nhớ đệm Concrete CMS: Bảng điều khiển → Hệ thống & Cài đặt → Xóa bộ nhớ đệm

Mẹo: Thêm mã trướ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: Khối HTML (Dễ nhất cho Người không phải Nhà phát triển)

Nếu bạn không muốn chỉnh sửa tệp giao diện, bạn có thể sử dụng khối HTML tích hợp của Concrete CMS:

Đăng nhập vào Bảng Điều khiển Concrete CMS
Điều hướng đến trang bạn muốn thêm chatbot
Nhấp Edit Page (biểu tượng bút chì trong thanh công cụ)
Nhấp Add Block trong khu vực bạn muốn đặt mã
Tìm kiếm và chọn khối HTML
Dán mã nhúng Asyntai vào trình biên tập HTML
Nhấp Add để lưu khối
Nhấp Publish để đưa thay đổi lên trực tuyến

Lưu ý: Phương pháp khối HTML tuyệt vời để thêm chatbot vào các trang cụ thể. Để cài đặt toàn trang, bạn sẽ cần thêm khối HTML vào mỗi trang, hoặc sử dụng phương pháp chân trang giao diện mô tả ở trên. Vị trí trực quan của khối không ảnh hưởng đến nơi chatbot xuất hiện - nó vẫn hiển thị ở góc dưới bên phải.

Phương pháp Thay thế 2: Tệp Header Giao diện

Bạn cũng có thể thêm mã vào tệp header giao diện để cài đặt toàn trang:

Truy cập tệp Concrete CMS qua FTP hoặc Trình quản lý Tệp
Điều hướng đến /application/themes/your_theme_name/
Mở tệp header.php (hoặc elements/header.php)
Tìm thẻ đóng </head>
Dán mã nhúng Asyntai ngay trước thẻ </head>
Lưu và tải lên tệp
Xóa bộ nhớ đệm từ Bảng Điều khiển

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

Mẹo: Đảm bảo bao gồm các phần tử header cần thiết bằng <?php View::element('header_required'); ?> trong tệp header.php để Concrete CMS hoạt động đúng.

Phương pháp Thay thế 3: Mẫu Tùy chỉnh (Nâng cao)

Cho nhà phát triển muốn kiểm soát nhiều hơn, bạn có thể tạo mẫu trang tùy chỉnh:

Tạo tệp mẫu trang mới trong /application/themes/your_theme_name/
Hoặc sao chép mẫu hiện có (ví dụ: default.php) và đổi tên
Thêm mã nhúng Asyntai vào tệp mẫu trước </body>
Trong Bảng điều khiển Concrete CMS, đi đến Pages & Themes
Nhấp vào Page Types
Chọn loại trang bạn muốn sử dụng mẫu này
Gán mẫu tùy chỉnh vào loại trang
Tất cả các trang sử dụng loại trang này bây giờ sẽ bao gồm chatbot

Quan trọng: Luôn sao lưu tệp giao diện trước khi thay đổi. Thử nghiệm các sửa đổi trên trang dàn dựng trước nếu có thể. Chỉnh sửa không chính xác tệp giao diện có thể làm hỏng bố cục hoặc chức năng trang web.

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

Sau khi thực hiện thay đổi và xóa bộ nhớ đệm, 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. 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 Concrete CMS (Dashboard → System & Settings → Clear Cache). Thử xem trang web trong cửa sổ ẩn danh. Kiểm tra bạn đã lưu và tải lên tất cả thay đổi tệp. Mở bảng điều khiển trình duyệt (F12) để kiểm tra lỗi JavaScript.