Añade un agente de voz con IA a un sitio Jekyll (guía 2026)

Cómo añadir AnveVoice a un sitio Jekyll

Jekyll envuelve tus páginas en un layout, normalmente _layouts/default.html. Añade la etiqueta de AnveVoice antes de la etiqueta de cierre body de ese layout, o en un include que el layout llame. Si tu layout está dentro de un tema gem, cópialo primero a tu proyecto para que tu edición sustituya al del tema. Pasos comprobados con la documentación oficial el 2026-10-14.

En resumen

• Dónde va el código: _layouts/default.html, o un archivo de _includes que el layout incluya
• Programación necesaria: Una línea de HTML; un poco de Liquid para la protección opcional
• Límites del plan: Ninguno por parte de Jekyll ni de GitHub Pages. El plan Free de AnveVoice es suficiente
• Tiempo: Unos 3 minutos

Cómo construye Jekyll una página

La referencia de estructura de directorios de Jekyll enumera las carpetas que importan aquí. _layouts contiene las plantillas que envuelven las entradas y las páginas, _includes contiene parciales que los layouts y las entradas pueden reutilizar, _config.yml guarda la configuración del sitio y _site es donde se escribe la salida generada. Dentro de un layout, la etiqueta Liquid {{ content }} marca el punto donde se inserta el cuerpo de cada página, y la documentación indica que la convención es una plantilla base llamada default.html de la que heredan los demás layouts. Por eso una sola edición cubre todo el sitio: los layouts de entrada, de página y de inicio suelen declarar default como padre, así que añadir la etiqueta a default.html la pone en todas las páginas.

• 1. Copia la etiqueta de instalación — Crea un bot en app.anvevoice.app y copia su embed ID. Añade &position=bottom-left o &theme=dark a la URL si lo quieres. <script src="https://anvevoice.app/embed.js?embedId=YOUR_EMBED_ID" async></script>

Método 1: edita el layout predeterminado

• 1. Abre _layouts/default.html — Si el archivo no existe en tu proyecto, tu layout viene de un tema gem; pasa a la siguiente sección.
• 2. Pega antes de </body> — Coloca la etiqueta en la línea justo encima de la etiqueta de cierre body, debajo de {{ content }} y de cualquier include de pie.
• 3. Recompila — Ejecuta bundle exec jekyll serve para la vista previa local, o bundle exec jekyll build para escribir el sitio en _site.

Método 2: un include con tu embed ID en _config.yml

La etiqueta include de Jekyll inserta un archivo de la carpeta _includes, así que un include pequeño saca la etiqueta del layout y te permite pasar el ID desde la configuración. Evita abusar de los includes, porque la documentación de Jekyll señala que ralentizan la compilación, pero un único archivo pequeño no supone problema.

• 1. Añade el ID en _config.yml — Los cambios de configuración se leen al arrancar Jekyll, así que reinicia el servidor después de guardar. anvevoice_embed_id: YOUR_EMBED_ID
• 2. Crea _includes/anvevoice.html — El archivo contiene la etiqueta con una variable de Liquid en la URL. <script src="https://anvevoice.app/embed.js?embedId={{ site.anvevoice_embed_id }}" async></script>
• 3. Llámalo desde el layout — En _layouts/default.html, añade el include encima de la etiqueta de cierre body. {% include anvevoice.html %} </body>

Cuando el layout pertenece a un tema gem

La documentación de temas de Jekyll explica que los temas basados en gems mantienen sus layouts e includes dentro del gem, ocultos en la carpeta de tu proyecto, aunque se usan igualmente durante la compilación. También explica la regla de sustitución: Jekyll comprueba primero los archivos propios del sitio y luego los del tema, así que un _layouts/default.html en tu proyecto reemplaza el layout del tema con el mismo nombre. Para obtener una copia, ejecuta bundle info --path seguido del nombre del gem, por ejemplo bundle info --path minima. Eso muestra la carpeta donde está instalado el tema. Copia su _layouts/default.html a la carpeta _layouts de tu proyecto y edita la copia. Dejarás de recibir los cambios de origen de ese archivo, pero el resto del tema se seguirá actualizando con normalidad. Muchos temas también exponen un include, como un pie personalizado; si el tuyo lo hace, sustituye solo ese archivo.

Protección solo para producción

Jekyll expone jekyll.environment a Liquid, y su valor predeterminado es development salvo que la variable JEKYLL_ENV indique otra cosa. Por tanto, una comprobación de producción mantiene el botón desactivado durante jekyll serve, pero solo lo muestra en las compilaciones en las que hayas definido la variable. Si tu alojamiento compila el sitio por ti, revisa cómo define JEKYLL_ENV. En caso de duda, mira el código fuente generado para confirmar que la etiqueta está.

• 1. Envuelve el include — Después compila con JEKYLL_ENV=production bundle exec jekyll build. {% if jekyll.environment == "production" %} {% include anvevoice.html %} {% endif %}

Notas sobre GitHub Pages

• La documentación de Jekyll de GitHub indica que Pages tiene soporte integrado para Jekyll, pero no puede compilar sitios que usen plugins no compatibles; para esos casos, compila en local o en un flujo de trabajo y publica la salida estática. También indica que GitHub Actions es ahora la forma recomendada de desplegar sitios de Pages.
• Una etiqueta script normal en un layout no necesita ningún plugin, así que funciona tanto con el compilador integrado como con un flujo de trabajo personalizado de Actions.
• Para usar un tema que no está en la lista de compatibles de GitHub, instálalo manualmente; la regla de sustitución de layouts de arriba sigue aplicándose.
• Los cambios aparecen cuando termina la compilación de Pages. Recarga con una actualización forzada para saltarte el HTML en caché.

Comprueba que funciona

• 1. Inspecciona la página compilada — Abre _site/index.html y busca anvevoice.app. Debería aparecer una vez, cerca del final del body.
• 2. Carga el sitio en vivo — Usa una ventana privada. El acceso al micrófono requiere HTTPS; GitHub Pages sirve los sitios github.io por HTTPS.
• 3. Prueba el botón — El botón redondo del micrófono está abajo a la derecha. Haz clic en él, permite el micrófono y haz una pregunta.

Problemas habituales

• Liquid muestra un embed ID en blanco: la clave de _config.yml no coincide con el nombre de la variable, o no reiniciaste el servidor después de editar la configuración.
• Falta la etiqueta en algunas páginas: esas páginas usan un layout que no hereda de default, por ejemplo un layout sin padre o con layout: null. Añade el include a ese layout.
• Dos botones: la etiqueta está tanto en el layout como en un include. Conserva solo una.
• Las ediciones de un archivo del tema se ignoran: la copia está en una ruta incorrecta. Debe estar en _layouts/default.html en la raíz de tu proyecto, no dentro de la carpeta del gem.

Fuentes

• Documentación de Jekyll: estructura de directorios (https://jekyllrb.com/docs/structure/) — consultado el 2026-10-14
• Documentación de Jekyll: layouts (https://jekyllrb.com/docs/layouts/) — consultado el 2026-10-14
• Documentación de Jekyll: includes (https://jekyllrb.com/docs/includes/) — consultado el 2026-10-14
• Documentación de Jekyll: temas (sustitución de archivos del tema) (https://jekyllrb.com/docs/themes/) — consultado el 2026-10-14
• Documentación de Jekyll: entornos (JEKYLL_ENV) (https://jekyllrb.com/docs/configuration/environments/) — consultado el 2026-10-14
• Documentación de GitHub: GitHub Pages y Jekyll (https://docs.github.com/en/pages/setting-up-a-github-pages-site-with-jekyll/about-github-pages-and-jekyll) — consultado el 2026-10-14

Relacionado

• Cómo añadir AnveVoice a un sitio Hugo
• Cómo añadir AnveVoice a un sitio de Eleventy
• Cómo añadir AnveVoice a un sitio Hexo
• Cómo añadir AnveVoice a un sitio web HTML sencillo

Prueba AnveVoice en tu sitio

Plan gratuito: 0 US$, 50.000 tokens al mes, sin tarjeta. Obtén tu ID de inserción en el panel y pega una etiqueta.