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

Nền tảng:

TYPO3

HTML/Custom WordPress Shopify WooCommerce BigCommerce Ecwid Wix Squarespace Webflow Weebly HubSpot Tilda Adobe Experience Manager Duda Google Sites Bludit Plesk Concrete CMS Craft CMS Contentful Docusaurus Strapi Joomla Kentico Drupal Magento Blogger Bitrix TYPO3 PrestaShop OpenCart Ghost Hugo Statamic Umbraco Volusion Moodle SilverStripe Grav October CMS ProcessWire Sanity ExpressionEngine Sylius Backdrop CMS MODX Bagisto PayloadCMS e107 CrafterCMS Kirby MedusaCMS DatoCMS GoDaddy Framer Bubble Carrd Jimdo Strikingly Kajabi Teachable Thinkific ClickFunnels Hostinger Unbounce Leadpages Systeme.io Instapage

Bước 1: Lấy Mã Nhúng của Bạn

First, go to your Asyntai Dashboard and scroll down to the "Embed Code" section. Copy your unique embed code which will look like this:

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:

1. Đăng nhập vào TYPO3 Backend của bạn
2. Vào Web → Template
3. Chọn trang gốc của bạn trong cây trang
4. Nhấp vào "Edit the whole template record" (hoặc chọn "Info/Modify" rồi "Setup")
5. Trong trường Setup, thêm mã TypoScript sau:
   page.footerData.99 = TEXT
page.footerData.99.value = <script>(function(){var l=function(){var s=document.createElement("script");s.src="https://widget.asyntai.com/static/js/chat-widget.js";s.async=true;s.setAttribute("data-asyntai-id","YOUR_WIDGET_ID");document.head.appendChild(s)};if(document.readyState==="complete"){l()}else{window.addEventListener("load",l)}})();</script>
6. Thay thế YOUR_WIDGET_ID bằng ID tiện ích thực tế từ bảng điều khiển
7. Nhấp "Save"
8. Xóa bộ nhớ đệm TYPO3: Admin Tools → Maintenance → Flush TYPO3 and PHP Cache

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:

1. Điều hướng đến thư mục gói trang của bạn: packages/your_sitepackage/Configuration/TypoScript/
2. Mở hoặc tạo setup.typoscript
3. Thêm mã sau:
   page.footerData {
  99 = TEXT
  99.value = <script>(function(){var l=function(){var s=document.createElement("script");s.src="https://widget.asyntai.com/static/js/chat-widget.js";s.async=true;s.setAttribute("data-asyntai-id","YOUR_WIDGET_ID");document.head.appendChild(s)};if(document.readyState==="complete"){l()}else{window.addEventListener("load",l)}})();</script>
}
4. Thay thế YOUR_WIDGET_ID bằng ID tiện ích thực tế của bạn
5. Xóa bộ nhớ đệm trong TYPO3 backend

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

Đối với các trang web sử dụng mẫu Fluid, bạn có thể sử dụng phần FooterAssets:

1. Điều hướng đến tệp mẫu Fluid của bạn (thường trong Resources/Private/Templates/)
2. Thêm một phần FooterAssets trong bố cục hoặc mẫu của bạn:
   <f:section name="FooterAssets">
  <script>(function(){var l=function(){var s=document.createElement("script");s.src="https://widget.asyntai.com/static/js/chat-widget.js";s.async=true;s.setAttribute("data-asyntai-id","YOUR_WIDGET_ID");document.head.appendChild(s)};if(document.readyState==="complete"){l()}else{window.addEventListener("load",l)}})();</script>
</f:section>
3. 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" />
4. Xóa bộ nhớ đệm TYPO3

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:

1. Trong mã PHP của bạn (ví dụ: bộ điều khiển hoặc middleware), tiêm AssetCollector
2. Thêm script 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.