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

Hướng dẫn từng bước cho trang web Kentico 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 Mã vào Mẫu Trang Chính (Khuyến nghị)

Để thêm chatbot vào tất cả trang web Kentico cùng lúc, sử dụng phương pháp Mẫu Trang Chính:

Đăng nhập vào Quản trị Kentico và điều hướng đến ứng dụng Page templates
Tìm và mở Mẫu trang chính (mẫu được sử dụng trên tất cả các trang)
Nhấp vào tab Header trong trình biên tập mẫu
Trong phần header, dán mã nhúng Asyntai
Ngoài ra, thêm mã vào bố cục mẫu trước thẻ đóng </head>
Nhấp Save để áp dụng thay đổi
Xóa bộ nhớ đệm trang web của bạn và xác minh các thay đổi trên trang trực tiếp

Mẹo: Sử dụng Mẫu Trang Chính đảm bảo chatbot xuất hiện trên mọi trang kế thừa từ mẫu này. Đây là phương pháp hiệu quả nhất cho triển khai toàn trang trong Kentico.

Phương pháp Thay thế 1: Header Mẫu Trang

Nếu bạn muốn thêm chatbot chỉ vào các mẫu trang cụ thể:

Đi đến ứng dụng Page templates trong Quản trị Kentico
Chọn mẫu trang cụ thể bạn muốn chỉnh sửa
Nhấp vào tab Header
Thêm mã nhúng Asyntai bằng thẻ script:

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

Nhấp Save
Tất cả trang sử dụng mẫu này bây giờ sẽ bao gồm chatbot

Lưu ý: Phương pháp này hữu ích khi bạn muốn thêm chatbot vào các phần cụ thể của trang web chia sẻ cùng mẫu trang, thay vì toàn bộ trang web.

Phương pháp Thay thế 2: Web Part HEAD HTML

Để kiểm soát chi tiết hơn trên các trang cụ thể hoặc JavaScript kế thừa qua các trang con:

Mở trang bạn muốn chỉnh sửa trong trình biên tập Trang Kentico
Thêm web part mới vào trang (tốt nhất là trong trang mẹ để kế thừa)
Tìm kiếm và chọn web part HEAD HTML
Trong cấu hình web part, dán mã nhúng Asyntai
Cấu hình web part có thể kế thừa nếu bạn muốn trang con có chatbot
Nhấp OK để lưu web part
Lưu và xuất bản trang

Mẹo: Web part HEAD HTML hoàn hảo để thêm mã vào trang mẹ sẽ tự động lan truyền đến tất cả trang con, tạo cài đặt theo phần.

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

Dành cho nhà phát triển thích quản lý tập lệnh dưới dạng tệp:

Trong dự án Kentico, điều hướng đến thư mục ~/CMSScripts/Custom/
Tạo tệp JavaScript mới (ví dụ: asyntai-widget.js)
Thêm mã để tải động tiện ích Asyntai:

(function() {
    var script = document.createElement('script');
    script.src = 'https://asyntai.com/static/js/chat-widget.js';
    script.setAttribute('data-asyntai-id', 'YOUR_WIDGET_ID');
    script.async = true;
    document.head.appendChild(script);
})();

Tham chiếu tệp này trong header của Mẫu Trang Chính:

<script src="~/CMSScripts/Custom/asyntai-widget.js"></script>

Quan trọng: Phương pháp nâng cao này yêu cầu quyền truy cập hệ thống tệp và kiến thức về cấu trúc thư mục Kentico. Đảm bảo bạn có quyền phù hợp và luôn kiểm tra trong môi trường dàn dựng trước.

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

Sau khi lưu 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 đã lưu tất cả thay đổi và xóa bộ nhớ đệm Kentico (Settings > System > Clear cache). Thử xem trang web trong cửa sổ ẩn danh. Kiểm tra bảng điều khiển trình duyệt (F12) để tìm lỗi JavaScript có thể ngăn tiện ích tải.