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

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

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: Sử dụng TypoScript footerData (Khuyến nghị)

Cách dễ nhất để thêm chatbot vào tất cả các trang là sử dụng TypoScript footerData:

Đăng nhập vào TYPO3 Backend của bạn
Vào Web → Template
Chọn trang gốc của bạn trong cây trang
Nhấp vào "Edit the whole template record" (hoặc chọn "Info/Modify" rồi "Setup")
In the Setup field, add the following TypoScript code:
page.footerData.99 = TEXT page.footerData.99.value = <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
Thay thế YOUR_WIDGET_ID bằng ID tiện ích thực tế từ bảng điều khiển
Nhấp "Save"
Xóa bộ nhớ đệm TYPO3: Admin Tools → Maintenance → Flush TYPO3 and PHP Cache

Mẹo: Sử dụng footerData đặt kịch bản ngay trước thẻ đóng </body>, được khuyến nghị cho các widget chat vì nó không làm chậm việc tải trang của bạn.

Thay thế: Sử dụng Gói trang (Dành cho Gói trang)

Nếu bạn đang sử dụng gói trang, bạn có thể thêm kịch bản qua tệp cấu hình TypoScript của bạn:

Điều hướng đến thư mục gói trang của bạn: packages/your_sitepackage/Configuration/TypoScript/
Mở hoặc tạo setup.typoscript
Thêm mã sau:
page.footerData { 99 = TEXT 99.value = <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script> }
Thay thế YOUR_WIDGET_ID bằng ID tiện ích thực tế của bạn
Xóa bộ nhớ đệm trong TYPO3 backend

Thay thế: Sử dụng Mẫu Fluid (FooterAssets)

For sites using Fluid templates, you can use the FooterAssets section:

Điều hướng đến tệp mẫu Fluid của bạn (thường trong Resources/Private/Templates/)
Thêm một phần FooterAssets trong bố cục hoặc mẫu của bạn:
<f:section name="FooterAssets"> <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script> </f:section>
Hãy đảm bảo bố cục trang của bạn hiển thị phần FooterAssets:
<f:render section="FooterAssets" optional="true" />
Xóa bộ nhớ đệm TYPO3

Quan trọng: Tính năng FooterAssets yêu cầu TYPO3 phiên bản 8 trở lên. Đối với các phiên bản cũ hơn, hãy sử dụng phương pháp TypoScript footerData.

Thay thế: Sử dụng AssetCollector (Dành cho nhà phát triển)

Dành cho các nhà phát triển tiện ích mở rộng, TYPO3 phiên bản 10.3 trở lên cung cấp API AssetCollector:

Trong mã PHP của bạn (ví dụ: bộ điều khiển hoặc middleware), tiêm AssetCollector
Thêm kịch bản với các thuộc tính tùy chỉnh:
use TYPO3\CMS\Core\Page\AssetCollector; $this->assetCollector->addJavaScript( 'asyntai_chatbot', 'https://asyntai.com/static/js/chat-widget.js', ['async' => 'async', 'data-asyntai-id' => 'YOUR_WIDGET_ID'] );

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

Sau khi lưu thay đổi và xóa bộ nhớ đệm, truy cập 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? Hãy đảm bảo xóa tất cả bộ nhớ đệm: vào Admin Tools → Maintenance → Flush TYPO3 and PHP Cache. Cũng thử xóa bộ nhớ đệm trình duyệt hoặc xem trong cửa sổ ẩn danh. Nếu sử dụng TypoScript, hãy xác minh rằng mẫu của bạn được bao gồm đúng trong phân cấp trang.