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

Guía paso a paso para el generador de sitios estáticos Hugo

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 código al parcial del tema (Recomendado)

La mejor forma de añadir el chatbot a todas las páginas de su sitio Hugo es creando un partial:

Navegue al directorio layouts/partials/ de su proyecto Hugo
Cree un nuevo archivo llamado asyntai-widget.html
Pegue su código de inserción de Asyntai en este archivo:

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

Abra el archivo baseof.html de su tema (generalmente en layouts/_default/baseof.html)
Agrega el parcial antes de la etiqueta de cierre </body>:

    {{ partial "asyntai-widget.html" . }}
  </body>
</html>

Guarde el archivo y reconstruye su sitio Hugo

Consejo: Usar partials es la forma recomendada por Hugo para incluir componentes reutilizables. Este método asegura que el chatbot aparezca en cada página que use la plantilla baseof.html, que típicamente son todas las páginas de su sitio.

Método alternativo 1: Añadir al parcial Head

Si su tema tiene un parcial head, puede añadir el código allí:

Localiza el partial head de su tema (generalmente layouts/partials/head.html)
Si no existe, cree layouts/partials/head.html en la raíz de su proyecto
Añada su código de inserción de Asyntai a este archivo:

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

Asegúrese de que su baseof.html incluya este partial en la sección <head>:

<head>
  {{ partial "head.html" . }}
</head>

Nota: Si su tema ya tiene un partial head.html con contenido existente, simplemente añada su código de Asyntai al final. No reemplaces el contenido existente.

Método alternativo 2: Carpeta estática con JavaScript personalizado

Para un enfoque más modular usando la carpeta estática de Hugo:

Navegue al directorio static/js/ de su proyecto Hugo
Cree el directorio si no existe
Cree un nuevo archivo llamado asyntai-loader.js
Añada el siguiente código para cargar el widget:

// static/js/asyntai-loader.js
(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.head.appendChild(script);
})();

Referencia este archivo en su baseof.html o partial de pie de página antes de </body>:

<script src="{{ "js/asyntai-loader.js" | relURL }}"></script>
</body>

Consejo: Los archivos en el directorio static/ se copian tal cual a la raíz de su sitio publicado. La función relURL genera la ruta relativa correcta para su despliegue.

Método alternativo 3: Configuración de Hugo (config.toml/yaml)

Para algunos temas de Hugo que soportan scripts personalizados mediante configuración:

# config.toml
[params]
  customJS = ["https://asyntai.com/static/js/chat-widget.js"]

# Or in config.yaml
params:
  customJS:
    - https://asyntai.com/static/js/chat-widget.js

Nota: Este método solo funciona si su tema soporta el parámetro customJS. Consulta la documentación de su tema. También puede que necesites añadir el atributo data-asyntai-id a través de la personalización del tema.

Método alternativo 4: Front Matter (Por página)

Para añadir el chatbot solo a páginas específicas:

Añada un parámetro personalizado al front matter de su página:

---
title: "My Page"
asyntaiWidget: true
---

En su baseof.html o parcial, añada lógica condicional:

{{ if .Params.asyntaiWidget }}
  <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
{{ end }}

Consejo: Este enfoque le da control granular sobre qué páginas incluyen el chatbot. Es útil para sitios de documentación donde solo deseas el widget en ciertas secciones.

Método alternativo 5: Sobrescribir diseños del tema

Para anular el diseño de tu tema sin modificar los archivos del tema:

Copie el baseof.html del tema desde themes/your-theme/layouts/_default/
Pégalo en layouts/_default/baseof.html de su proyecto
Añada su código de inserción de Asyntai antes de la etiqueta de cierre </body>
Guarde y reconstruya su sitio

Importante: Cuando sobrescribes archivos del tema, no recibirá automáticamente actualizaciones de esos archivos cuando se actualice el tema. Este método le da control total pero requiere más mantenimiento. Considera usar partials en su lugar para actualizaciones de tema más fáciles.

Paso 3: Compilar y desplegar

Después de añadir el código, compila su sitio Hugo:

# Build the site
hugo

# Or build with specific environment
hugo --environment production

# For development preview
hugo server

El sitio generado estará en el directorio public/
Despliega este directorio en su plataforma de hosting (Netlify, Vercel, GitHub Pages, etc.)

Consejo: Durante el desarrollo, use hugo server para previsualizar su sitio localmente en http://localhost:1313. El chatbot debería aparecer en la esquina inferior derecha en todas las páginas.

Paso 4: Verificar la instalación

Después de desplegar su sitio Hugo, ábrelo en una nueva pestaña del navegador. 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.

¿No ves el widget? Asegúrese de haber reconstruido su sitio con el comando hugo después de realizar cambios. Verifique que hayas reemplazado YOUR_WIDGET_ID con su ID de widget real del panel de control. Limpie la caché de su navegador o visualiza en modo incógnito. Si usas un CDN, puede que necesites invalidar la caché. Abra la consola del navegador (F12) para verificar si hay errores de JavaScript.

Documentación