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

Guía paso a paso para sitios web de ProcessWire 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 al archivo de plantilla (Recomendado)

ProcessWire usa archivos de plantilla PHP ubicados en el directorio site/templates/. El enfoque más fácil es agregar el código de inserción directamente a su archivo de plantilla principal:

Acceda a los archivos de su instalación de ProcessWire a través de FTP, SSH o su administrador de archivos
Navegue a site/templates/
Abra su archivo de plantilla principal — este suele ser _main.php o basic-page.php dependiendo del perfil de su sitio
Si está usando la estrategia de salida diferida (la predeterminada para la mayoría de los perfiles de sitio), abra _main.php
Encuentra la etiqueta de cierre </body>
Pegue su código de inserción de Asyntai justo antes:

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

Consejo: Colocar el script justo antes de la etiqueta de cierre </body> asegura que el chatbot se cargue después del contenido de la página, lo cual es recomendado para un rendimiento óptimo y no ralentizará el renderizado de su página.

Método alternativo 1: Usar el archivo _foot.inc o _main.php

Si su sitio ProcessWire usa el enfoque de archivo append (común en muchos perfiles de sitio), puede agregar el código de inserción al include de pie de página compartido:

Navegue a site/templates/
Abra _foot.inc (o su archivo include de pie de página equivalente)
Pegue su código de inserción de Asyntai justo antes de la etiqueta de cierre </body>
Guarde el archivo

La estrategia de salida diferida de ProcessWire generalmente funciona con tres archivos clave:

_init.php — se ejecuta antes de cada plantilla, inicializa variables
Su archivo de plantilla (por ejemplo, basic-page.php) — rellena las variables de contenido
_main.php — genera el marcado HTML final usando esas variables

Si su sitio usa este enfoque, agregar el script a _main.php antes de </body> asegura que aparezca en cada página.

Nota: Los nombres de archivo _init.php y _main.php se configuran en su site/config.php a traves de las configuraciones $config->prependTemplateFile y $config->appendTemplateFile. Revise su configuración si sus archivos tienen nombres diferentes.

Método alternativo 2: Usar el array $config->scripts

ProcessWire proporciona un FilenameArray $config->scripts que puede usar para gestionar archivos JavaScript. En su _init.php o archivo de plantilla individual, agrega:

<?php
$config->scripts->add('https://asyntai.com/static/js/chat-widget.js');
?>

Luego en su _main.php (o include de pie de página), recorra el array de scripts para mostrarlos:

<?php foreach($config->scripts as $file): ?>
<script src="<?php echo $file; ?>"></script>
<?php endforeach; ?>

Importante: El enfoque $config->scripts maneja el atributo src del script, pero el atributo data-asyntai-id necesita manejarse por separado. Necesitaras agregar el atributo data manualmente en la salida del bucle, o usar el método de etiqueta de script directo del Paso 2 para la configuración mas simple.

Método alternativo 3: Usar un Hook (ready.php)

Para un enfoque más avanzado, puede usar el sistema de hooks de ProcessWire para inyectar automáticamente el script del chatbot en cada página. Agregue lo siguiente a su archivo site/ready.php:

<?php
$wire->addHookAfter('Page::render', function(HookEvent $event) {
    $html = $event->return;
    $script = '<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>';
    $html = str_replace('</body>', $script . '</body>', $html);
    $event->return = $html;
});
?>

Este hook intercepta la salida HTML renderizada de cada página e inyecta el script de Asyntai justo antes de la etiqueta de cierre </body> automáticamente.

Consejo: El enfoque de hook en ready.php es ideal si desea el chatbot en cada página sin modificar ningún archivo de plantilla. También sobrevive a cambios de plantilla y actualizaciones de tema ya que reside fuera de los archivos de plantilla.

Paso 3: Verificar la instalación

Después de guardar sus cambios, visite su sitio ProcessWire 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.

¿No ves el widget? Asegúrese de haber guardado todos los archivos modificados. Intente limpiar la caché del navegador o ver la página en una ventana de incógnito. Si la caché de plantillas de ProcessWire está habilitada, es posible que necesite vaciarla yendo a Modules → Core → Template Engine Cache o agregando ?nocache=1 a su URL. También verifique que su archivo de plantilla esté siendo utilizado realmente por las páginas que está viendo.