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

Guía paso a paso para sitios web de CrafterCMS

Plataforma:

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 FreeMarker (Recomendado)

CrafterCMS usa plantillas FreeMarker (.ftl) para renderizar páginas. La forma más fácil de añadir el chatbot a todas las páginas es editando su plantilla de página principal:

En Crafter Studio, ve a Site Dashboard > Content Types o navegue a las plantillas
Abra su plantilla de página principal (por ejemplo, /templates/web/pages/home.ftl o el diseño base)
Encuentra la etiqueta de cierre </body>
Pegue su código de inserción de Asyntai justo antes de la etiqueta </body>:
 <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script> </body>
Guarde el archivo y publique a través de Crafter Studio

Consejo: Añadir el script antes de la etiqueta de cierre </body> asegura que se cargue después del contenido de la página, lo cual es recomendado para widgets de chat y no ralentizará la carga de su página.

Método alternativo 1: Usando componentes de plantilla de Crafter

Para una mejor organización, cree una plantilla de componente dedicada para el widget del chatbot:

En Crafter Studio, cree un nuevo archivo de plantilla en /templates/web/components/asyntai-widget.ftl
Añada el siguiente contenido a la plantilla del componente:
 <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
Inclúyelo en su plantilla de diseño principal usando una directiva de inclusión de FreeMarker:
<#include "/templates/web/components/asyntai-widget.ftl" />
Alternativamente, si usas el sistema de renderizado de componentes de Crafter, usa:
<@renderComponent component=contentModel.asyntaiWidget />
Guarde ambos archivos y publique a través de Crafter Studio

Nota: Usar una plantilla de componente separada facilita habilitar o deshabilitar el chatbot en todo su sitio comentando una sola línea de inclusión.

Método alternativo 2: Usando la configuración de Head/Scripts de Crafter

CrafterCMS le permite inyectar scripts de forma global a través de la configuración del sitio:

En Crafter Studio, navegue a Site Config > Configuration
Abra el archivo de Engine Site Configuration (site-config.xml)
Añada una configuración de inyección de script personalizada:
<site>   <scripts> <script> <src>https://asyntai.com/static/js/chat-widget.js</src> <async>true</async> <data-asyntai-id>YOUR_WIDGET_ID</data-asyntai-id> </script> </scripts> </site>
Alternativamente, edita su diseño base de FreeMarker para leer desde la configuración del sitio e inyectar scripts de forma dinámica:
<#if siteConfig.getString("scripts.script.src", "")?has_content> <script async src="${siteConfig.getString("scripts.script.src")}" data-asyntai-id="${siteConfig.getString("scripts.script.data-asyntai-id")}"></script> </#if>
Guarde y publique los cambios de configuración

Consejo: Usar la configuración del sitio le permite gestionar el widget del chatbot sin modificar archivos de plantilla directamente, facilitando su actualización o eliminación posterior.

Método alternativo 3: Usando controlador Groovy

CrafterCMS soporta scripts Groovy para lógica del lado del servidor. Puede usar un controlador para añadir dinámicamente el script del chatbot:

Cree un script Groovy en /scripts/pages/ (por ejemplo, /scripts/pages/home.groovy o su controlador de todo el sitio)
Añada el siguiente código para inyectar la URL del script en el modelo de la plantilla:
// /scripts/pages/home.groovy import org.craftercms.engine.service.context.SiteContext def siteContext = SiteContext.current // Add Asyntai chatbot configuration to the model model.asyntaiEnabled = true model.asyntaiWidgetId = "YOUR_WIDGET_ID" model.asyntaiScriptSrc = "https://asyntai.com/static/js/chat-widget.js"
Luego referencia las variables del modelo en su plantilla FreeMarker:
<#if model.asyntaiEnabled?? && model.asyntaiEnabled> <script async src="${model.asyntaiScriptSrc}" data-asyntai-id="${model.asyntaiWidgetId}"></script> </#if>
Guarde tanto el script Groovy como el archivo de plantilla
Publique los cambios a través de Crafter Studio

Nota: El enfoque del controlador Groovy es útil cuando necesita lógica condicional (por ejemplo, habilitar el chatbot solo para ciertos roles de usuario o tipos de página) o cuando deseas obtener valores de configuración de fuentes externas.

Paso 3: Publicar y verificar

Después de realizar tus cambios, publícalos a través de Crafter Studio:

En Crafter Studio, ve a Panel del sitio
Revise sus cambios en la sección My Recent Activity o Pending Approval
Haz clic en Publicar para implementar los cambios en tu sitio en vivo
Visita tu sitio web de CrafterCMS en una nueva pestaña del navegador o ventana de incógnito
Deberías ver el botón del widget de chat en la esquina inferior derecha
Haz clic en él para asegurarte de que se abre y funciona correctamente

¿No ves el widget? Asegúrese de haber publicado los cambios a través de Crafter Studio. Verifique que estés editando el archivo de plantilla correcto que usan sus páginas. Limpie la caché de su navegador o visualiza en una ventana de incógnito. Si usas la caché de Crafter, limpia la caché del Engine desde el panel de Crafter Studio.

Ubicación de la plantilla: Las ubicaciones de plantillas de CrafterCMS pueden variar según la estructura de su proyecto. Las ubicaciones comunes incluyen /templates/web/pages/ para plantillas de página, /templates/web/components/ para plantillas de componentes y /templates/web/ para plantillas de diseño. Revise sus plantillas existentes para encontrar dónde se define la etiqueta </body>.