Cómo añadir el chatbot de IA Asyntai a Craft CMS

Plataforma:

Craft CMS

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 su Panel de control de Asyntai y desplácese hasta la sección "Código de inserción". Copie su código de inserción único que se verá así:

Paso 2: Editar su plantilla de diseño (Recomendado)

La forma más fácil de añadir el chatbot a todas las páginas es editando su plantilla de diseño principal:

1. Access your Craft CMS project files via FTP, SSH, or your code editor
2. Navegue al directorio templates/
3. Encuentra su archivo de diseño principal (comúnmente llamado _layout.twig, _layout.html, o ubicado en templates/_layouts/)
4. Encuentra la etiqueta de cierre </body>
5. Pegue su código de inserción de Asyntai justo antes de la etiqueta </body>
6. Guarde el archivo

Alternative: Using Twig {% js %} Tag (Craft CMS 3.x+)

Craft CMS provides a built-in Twig tag for registering JavaScript:

1. Abra su plantilla de diseño principal
2. Añada el siguiente código antes de la etiqueta de cierre </body>:
   {% js %} (function() { var script = document.createElement('script'); script.async = true; script.src = 'https://asyntai.com/static/js/chat-widget.js'; script.setAttribute('data-asyntai-id', 'YOUR_WIDGET_ID'); document.body.appendChild(script); })(); {% endjs %}
3. Reemplaza YOUR_WIDGET_ID con su ID de widget real
4. Guarde el archivo

Alternativa: Crear un archivo de inclusión separado

Para una mejor organización, cree un archivo de inclusión dedicado:

1. Cree un nuevo archivo: templates/_includes/chatbot.twig (o .html)
2. Añada su código de inserción de Asyntai a este archivo:
   <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
3. En su plantilla de diseño principal, incluye este archivo antes de </body>:
   {% include '_includes/chatbot' %}
4. Guarde ambos archivos

Alternativa: Carga condicional

Para cargar el chatbot solo en páginas o secciones específicas:

1. En su plantilla de diseño o página, use condicionales Twig:
   {% if entry.showChatbot ?? true %} <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script> {% endif %}
2. O verifique secciones específicas:
   {% if craft.app.request.segments[0] != 'admin' %} <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script> {% endif %}

Paso 3: Verificar la instalación

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