Як додати AI чат-бот Asyntai до TYPO3

Платформа:

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

Крок 1: Отримайте код для вставки

Спочатку перейдiть до вашої Панелi керування Asyntai та прокрутiть вниз до роздiлу "Код для вставки". Скопiюйте унiкальний код для вставки, який виглядатиме так:

Крок 2: Використання TypoScript footerData (Рекомендовано)

Найпростіший спосіб додати чат-бот на всі сторінки - використати TypoScript footerData:

1. Увійдіть до вашого бекенду TYPO3
2. Перейдіть до Web → Template
3. Виберіть вашу кореневу сторінку в дереві сторінок
4. Натисніть на "Edit the whole template record" (або виберіть "Info/Modify", а потім "Setup")
5. У полі Setup додайте наступний код TypoScript:
   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. Замiнiть YOUR_WIDGET_ID на фактичний ID вiджету з панелi керування
7. Натисніть "Save"
8. Очистіть кеш TYPO3: Admin Tools → Maintenance → Flush TYPO3 and PHP Cache

Альтернатива: Використання Site Package (для Site Packages)

Якщо ви використовуєте site package, ви можете додати скрипт через ваш конфігураційний файл TypoScript:

1. Перейдіть до папки вашого site package: packages/your_sitepackage/Configuration/TypoScript/
2. Відкрийте або створіть setup.typoscript
3. Додайте наступний код:
   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. Замініть YOUR_WIDGET_ID на ваш фактичний ID віджету
5. Очистіть кеш у бекенді TYPO3

Альтернатива: Використання шаблону Fluid (FooterAssets)

Для сайтів, що використовують шаблони Fluid, ви можете використовувати розділ FooterAssets:

1. Перейдіть до вашого файлу шаблону Fluid (зазвичай в Resources/Private/Templates/)
2. Додайте розділ FooterAssets у ваш макет або шаблон:
   <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. Переконайтеся, що макет вашої сторінки рендерить розділ FooterAssets:
   <f:render section="FooterAssets" optional="true" />
4. Очистіть кеш TYPO3

Альтернатива: Використання AssetCollector (для розробників)

Для розробників розширень TYPO3 v10.3+ пропонує API AssetCollector:

1. У вашому PHP-коді (наприклад, контролері або middleware) впровадьте AssetCollector
2. Додайте скрипт з власними атрибутами:
   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']
);

Крок 3: Перевірте встановлення

Пiсля збереження змiн та очищення кешу вiдвiдайте свiй веб-сайт у новiй вкладцi браузера або в режимi iнкогнiто. Ви повиннi побачити кнопку чат-вiджету в нижньому правому кутi. Натиснiть на неї, щоб переконатися, що вона вiдкривається та працює коректно.