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

Guía paso a paso para sitios web de MODX CMS

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 de MODX (Recomendado)

La forma recomendada de agregar el chatbot es editando su plantilla MODX directamente en el MODX Manager:

Inicia sesión en tu MODX Manager (panel de administración)
En la barra lateral izquierda, ve a Elementos > Plantillas
Abra la plantilla de su sitio (generalmente llamada "BaseTemplate" o su plantilla activa)
Busca la etiqueta de cierre </body> en el código de la plantilla
Pegue su código de inserción de Asyntai justo antes de la etiqueta de cierre </body>
Haga clic en "Save" para guardar la plantilla

<!-- Your existing template content -->

<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
</body>
</html>

Consejo: Agregar el código justo antes de la etiqueta de cierre </body> asegura que el chatbot se cargue después de todo el contenido de la página, que es la ubicación recomendada para widgets de chat y no ralentizará la carga de su página.

Método alternativo 1: Usar un Chunk de MODX

Puedes usar un Chunk de MODX para mantener el código de incrustación separado y reutilizable:

En el MODX Manager, ve a Elements > Chunks
Haga clic en "New Chunk" para crear un nuevo chunk
Nombra el chunk "asyntaiWidget"
Pega tu código de incrustación de Asyntai en el área de contenido del chunk
Haga clic en "Save"
Abra su plantilla (en Elements > Templates)
Agrega la llamada al chunk [[$asyntaiWidget]] justo antes de la etiqueta de cierre </body>
Guarde la plantilla

<!-- In your Template, before </body> -->
[[$asyntaiWidget]]
</body>
</html>

Consejo: Usar un Chunk facilita gestionar y actualizar el código de inserción en un solo lugar, especialmente si usas multiples plantillas en su sitio.

Método alternativo 2: Usando la configuración del sistema MODX (HTML Head/Footer)

Algunas configuraciones de MODX incluyen marcadores de posición para scripts de pie de página a traves de System Settings:

En el MODX Manager, ve a System > System Settings
Filtra por "htmlhead" o busque una configuración de sistema personalizada para scripts de pie de página
Si su configuración tiene un marcador de posición para scripts de pie de página (como [[++footer_scripts]]), puede usarlo
Establece el valor de la configuración del sistema a tu código de incrustación de Asyntai
Asegurate de que el marcador de posición correspondiente [[++footer_scripts]] este presente en su plantilla antes de la etiqueta de cierre </body>
Guarde la configuración del sistema

<!-- In your Template, before </body> -->
[[++footer_scripts]]
</body>
</html>

Nota: Este método depende de que su configuración de MODX tenga una configuración de sistema personalizada para scripts de pie de página. Si no existe, puede crear una configuración de sistema personalizada y referenciarla en su plantilla usando la sintaxis [[++setting_key]].

Método alternativo 3: Usar un plugin de MODX (OnWebPagePrerender)

Para un enfoque avanzado, puede crear un Plugin de MODX que inyecte automáticamente el código del chatbot en cada página:

En el MODX Manager, ve a Elements > Plugins
Haz clic en "Nuevo plugin" para crear un nuevo plugin
Nombra el plugin "AsyntaiChatbot"
Pegue el siguiente código PHP en el área de código del plugin:

$output = &$modx->resource->_output;
$script = '<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>';
$output = str_replace('</body>', $script . '</body>', $output);

Haga clic en la pestaña "System Events"
Marca la casilla junto a "OnWebPagePrerender" para activar este plugin en ese evento
Haga clic en "Save"

Importante: Reemplaza YOUR_WIDGET_ID con su ID de widget real del Panel de Asyntai. Este plugin inyectara automáticamente el script del chatbot en cada página de su sitio MODX antes de que se renderice.

Paso 3: Limpiar caché y verificar

Después de agregar el código de inserción usando cualquiera de los métodos anteriores, necesita vaciar la cache de MODX y verificar la instalación:

En el MODX Manager, ve a Manage > Clear Cache (o haga clic en el icono de vaciar cache en el menu superior)
Abra su sitio web en una nueva pestana del navegador o en una ventana de incognito
Deberias ver el botón del widget de chat en la esquina inferior derecha de su página
Haz clic en él para asegurarte de que se abre y funciona correctamente

¿No ves el widget? Asegurate de haber vaciado la cache de MODX desde Manage > Clear Cache en el MODX Manager. También intenta limpiar la cache del navegador o ver el sitio en una ventana de incognito. Si usaste el método de Plugin, verifique que el evento de sistema "OnWebPagePrerender" este marcado para su plugin.