Cómo añadir el chatbot de IA de Asyntai a TYPO3

Plataforma:

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

Paso 1: Obtén su código de inserción

Primero, ve a tu Panel de control de Asyntai y desplázate hasta la sección "Código de inserción". Copia tu código de inserción único que se verá así:

Paso 2: Usar TypoScript footerData (Recomendado)

La forma más fácil de agregar el chatbot a todas las páginas es usando footerData de TypoScript:

1. Inicie sesión en su backend de TYPO3
2. Ve a Web → Template
3. Seleccione su página raíz en el árbol de páginas
4. Haga clic en "Edit the whole template record" (o seleccione "Info/Modify" y luego "Setup")
5. En el campo Setup, agrega el siguiente código TypoScript:
   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>
6. Reemplace YOUR_WIDGET_ID con su ID de widget real del panel de control
7. Haga clic en "Save"
8. Vacíe la caché de TYPO3: Admin Tools → Maintenance → Flush TYPO3 and PHP Cache

Alternativa: Usar Site Package (Para Site Packages)

Si estás utilizando un paquete de sitio, puede agregar el script a través de su archivo de configuración TypoScript:

1. Navegue a la carpeta de su paquete de sitio: packages/your_sitepackage/Configuration/TypoScript/
2. Abra o cree setup.typoscript
3. Añada el siguiente código:
   page.footerData {
  99 = TEXT
  99.value = <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
}
4. Reemplaza YOUR_WIDGET_ID con su ID de widget real
5. Limpie la caché en el backend de TYPO3

Alternativa: Usar plantilla Fluid (FooterAssets)

Para sitios que usan plantillas Fluid, puedes usar la sección FooterAssets:

1. Navegue a su archivo de plantilla Fluid (generalmente en Resources/Private/Templates/)
2. Añada una sección FooterAssets en su layout o plantilla:
   <f:section name="FooterAssets">
  <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
</f:section>
3. Asegúrate de que el diseño de tu página renderice la sección FooterAssets:
   <f:render section="FooterAssets" optional="true" />
4. Limpie la caché de TYPO3

Alternativa: Usar AssetCollector (Para desarrolladores)

Para desarrolladores de extensiones, TYPO3 v10.3+ ofrece la API AssetCollector:

1. En su código PHP (por ejemplo, un controlador o middleware), inyecta el AssetCollector
2. Añada el script con atributos personalizados:
   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']
);

Paso 3: Verificar la instalación

Después de guardar sus cambios y limpiar la caché, visite su sitio web en una nueva pestaña del navegador o en una ventana de incógnito. Debería ver el botón del widget de chat en la esquina inferior derecha. Haga clic en él para asegurarse de que se abra y funcione correctamente.