Cách Thêm Chatbot AI Asyntai vào Adobe Experience Manager

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

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ã bằng Thành phần Trang (Khuyến nghị)

Phương pháp được khuyến nghị là thêm mã chatbot vào phần head của thành phần trang AEM để cài đặt toàn trang:

Đăng nhập vào phiên bản AEM Author của bạn
Điều hướng đến CRXDE Lite (thường tại http://your-aem-instance:4502/crx/de)
Tìm mẫu thành phần trang của bạn (thường ở /apps/your-project/components/page)
Tìm hoặc tạo tệp head.html hoặc headerlibs.html
Thêm mã nhúng Asyntai của bạn vào tệp này
Nhấp "Save All" trong menu trên cùng
Sao chép các thay đổi sang phiên bản xuất bản của bạn

Mẹo: Đặt mã trong tệp head.html đảm bảo chatbot xuất hiện trên tất cả các trang sử dụng mẫu đó. Đây là cách tiếp cận sạch nhất cho cài đặt toàn trang.

Phương pháp Thay thế 1: Thư viện Client (ClientLibs)

Để có cách tiếp cận có cấu trúc hơn, bạn có thể sử dụng hệ thống Thư viện Client của AEM:

Tạo thư mục thư viện client mới tại /apps/your-project/clientlibs
Đặt loại nút cq:clientLibraryFolder
Tạo tệp js.txt liệt kê các tệp JavaScript của bạn
Thêm mã nhúng Asyntai của bạn vào một tệp JavaScript trong thư mục này
Bao gồm thư viện client trong thành phần trang của bạn bằng cách sử dụng:

<sly data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html"
     data-sly-call="${clientlib.js @ categories='your-category-name'}" />

Lưu ý: Phương pháp này được khuyến nghị cho các dự án có cấu trúc ClientLib hiện có và cung cấp tổ chức tốt hơn cho các triển khai lớn hơn.

Phương pháp Thay thế 2: Quản lý Thẻ (Adobe Launch)

Nếu bạn đang sử dụng Adobe Launch (trước đây là DTM) hoặc trình quản lý thẻ khác:

Đăng nhập vào Adobe Experience Platform Launch
Điều hướng đến thuộc tính của bạn
Đi đến Rules và tạo quy tắc mới
Đặt sự kiện thành "Page Bottom" hoặc "DOM Ready"
Thêm hành động: Custom Code
Dán mã nhúng Asyntai của bạn
Lưu và xuất bản thư viện

Mẹo: Sử dụng Adobe Launch là cách tiếp cận Adobe khuyến nghị để thêm tập lệnh bên thứ ba. Nó cung cấp khả năng kiểm soát tốt hơn, khả năng thử nghiệm và không yêu cầu triển khai mã.

Phương pháp Thay thế 3: Experience Fragment

Để triển khai linh hoạt, thân thiện với tác giả:

Điều hướng đến Experience Fragments trong AEM
Tạo Experience Fragment mới
Thêm thành phần Văn bản hoặc thành phần HTML
Chuyển sang chế độ mã nguồn HTML
Dán mã nhúng Asyntai của bạn
Bao gồm Experience Fragment này trong phần chân trang mẫu trang của bạn

Quan trọng: Đảm bảo bạn có quyền AEM phù hợp để sửa đổi mẫu và thành phần. Đối với AEM as a Cloud Service, các thay đổi có thể cần đi qua pipeline CI/CD của bạn.

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

Sau khi triển khai các thay đổi, xóa bộ nhớ đệm trình duyệt và truy cập trang web của bạn. 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? Kiểm tra bảng điều khiển trình duyệt (F12) để tìm lỗi JavaScript. Xác minh mã đã được triển khai đúng cách cho phiên bản xuất bản của bạn. Đối với AEM as a Cloud Service, đảm bảo các thay đổi của bạn đã đi qua pipeline triển khai thành công.