Cómo añadir el chatbot de IA Asyntai a Grav
Guía paso a paso para Grav CMS
HTML/Custom
WordPress
Shopify
WooCommerce
BigCommerce
Ecwid
Wix
Squarespace
Webflow
Weebly
HubSpot
Tilda
Adobe Experience Manager
Duda
Google Sites
Bludit
Plesk
Concrete CMS
Docusaurus
Hugo
Kentico
Volusion
Craft CMS
Contentful
Strapi
Joomla
Drupal
Magento
Blogger
Bitrix
TYPO3
PrestaShop
OpenCart
Ghost
Statamic
Umbraco
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í:
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
Nota: El código anterior es solo un ejemplo. Debe copiar su propio código de inserción único desde su Panel de control ya que contiene su ID de widget personal.
Paso 2: Añadir a la plantilla del tema de Grav (Recomendado)
La mejor forma de añadir el chatbot a todas las páginas de su sitio Grav es editando la plantilla base Twig de su tema:
- Navegue al directorio user/themes/yourtheme/templates/ de su proyecto Grav y abra default.html.twig (o la plantilla base usada por su tema)
- Añada su código de inserción de Asyntai antes de la etiqueta de cierre </body>:
<!-- user/themes/yourtheme/templates/default.html.twig -->
...
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
</body>
</html>
- Guarde el archivo
Consejo: Grav utiliza Twig como su motor de plantillas. La plantilla base es típicamente default.html.twig o partials/base.html.twig dependiendo de su tema. Revise la estructura de su tema para encontrar el archivo correcto que contiene la etiqueta de cierre </body>.
Método alternativo 1: Usando el gestor de recursos de Grav
El Asset Manager integrado de Grav proporciona una forma limpia de añadir recursos JavaScript a través de Twig:
- Abra la plantilla base Twig de su tema (por ejemplo, user/themes/yourtheme/templates/partials/base.html.twig)
- Use el gestor de recursos para añadir el JavaScript:
{% do assets.addJs('https://asyntai.com/static/js/chat-widget.js', {group: 'bottom', loading: 'async', 'data-asyntai-id': 'YOUR_WIDGET_ID'}) %}
O añada JavaScript en línea para crear el elemento script de forma dinámica en su plantilla base:
<!-- user/themes/yourtheme/templates/partials/base.html.twig -->
...
{% block bottom %}
{{ assets.js('bottom') }}
{% endblock %}
<script>
(function() {
var script = document.createElement('script');
script.src = 'https://asyntai.com/static/js/chat-widget.js';
script.setAttribute('data-asyntai-id', 'YOUR_WIDGET_ID');
script.async = true;
document.body.appendChild(script);
})();
</script>
</body>
</html>
Nota: El método del Asset Manager es el enfoque recomendado por Grav para gestionar recursos JavaScript. Proporciona soporte integrado para pipeline de recursos, ordenamiento y agrupación.
Método alternativo 2: Usando el plugin Custom JS
Si prefieres un enfoque basado en plugins sin editar archivos de tema:
- Instala el plugin "Custom JS" desde el panel de administración de Grav o vía CLI:
bin/gpm install custom-js
- Vaya a Admin > Plugins > Custom JS
- Añada el código del script de inserción:
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
- Guarde la configuración del plugin
Consejo: Usar un plugin para inyectar scripts significa que no necesita modificar ningún archivo del tema. Esto facilita cambiar o actualizar temas sin perder la integración de su chatbot.
Método alternativo 3: Usando sobrescritura de bloque en plantilla hija
Si su tema Grav utiliza herencia de bloques Twig, puede sobrescribir el bloque inferior en una plantilla hija:
{% block bottom %}
{{ parent() }}
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
{% endblock %}
- Crea o abre una plantilla hija que extienda la plantilla base de tu tema
- Añada la sobrescritura de bloque mostrada arriba
- La llamada parent() asegura que todo el contenido existente en el bloque se conserve
Nota: Este método utiliza el sistema de herencia de plantillas de Twig. Asegúrese de que el nombre del bloque (por ejemplo, bottom) coincida con el bloque definido en la plantilla base de su tema. Los nombres de bloque comunes incluyen bottom, javascripts o footer.
Método alternativo 4: Usando el plugin Custom Head de Grav
Otra opción basada en plugins es el plugin Custom Head:
- Instale el plugin custom-head por CLI o panel de administración:
bin/gpm install custom-head
- Ve a Admin > Plugins > Custom Head
- Agrega el código del script de incrustación de Asyntai en la configuración del plugin:
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
- Guarde la configuración
Consejo: El plugin Custom Head le permite inyectar código en las secciones head o body de su sitio sin tocar archivos del tema. Consulte la documentación del plugin para la opción de ubicación correcta para insertar el script antes de la etiqueta de cierre </body>.
Paso 3: Limpiar caché y verificar
Después de añadir el código, limpie la caché de Grav y verifique la instalación:
# Clear cache via CLI
bin/grav clearcache
# Or clear cache from Admin Panel:
# Admin > Tools > Clear Cache
Abra su sitio Grav en una nueva pestaña del navegador. 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.
¿No ves el widget? Asegúrese de haber limpiado la caché de Grav con bin/grav clearcache o desde el panel de administración. Verifique que haya reemplazado YOUR_WIDGET_ID con su ID de widget real del panel de control. Limpie la caché de su navegador o visualice en modo incógnito. Abra la consola del navegador (F12) para verificar si hay errores de JavaScript. Verifique que el script esté presente en el código fuente de la página haciendo clic derecho y seleccionando "View Page Source".