Як додати 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: Отримайте код для вставки

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

Крок 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. Замініть YOUR_WIDGET_ID на фактичний ID віджету з панелі керування
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: Перевірте встановлення

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