Añade un agente de voz con IA a un sitio de Eleventy (11ty)

Cómo añadir AnveVoice a un sitio de Eleventy

Eleventy no tiene una plantilla de página fija, así que la etiqueta va en el layout que usan tus páginas, normalmente un layout base en _includes. Pega la etiqueta de AnveVoice antes de la etiqueta de cierre body del layout más externo, vuelve a compilar y cada página que lo use tendrá el agente de voz. Pasos comprobados con la documentación oficial el 2026-10-14.

En resumen

• Dónde va el código: El archivo de layout más externo, por ejemplo _includes/layouts/base.njk
• Código necesario: Una línea de plantilla; un archivo de datos opcional para el ID de incrustación
• Límites del plan: Ninguno por parte de Eleventy. El plan gratuito de AnveVoice es suficiente
• Tiempo: Unos 2 minutos

Encuentra el layout correcto

La documentación de layouts de Eleventy explica el mecanismo: una plantilla se acoge a un layout mediante una clave layout en su front matter, y el archivo de layout recibe la salida de la página como contenido. Por defecto, los layouts se buscan en la carpeta _includes, y se permiten subcarpetas, así que layout: layouts/base.njk significa el archivo _includes/layouts/base.njk. Los layouts pueden envolver a otros layouts, y se aplica primero el más cercano al contenido. Esa cadena es importante aquí. Si un layout de entradas envuelve un layout base que envuelve todo lo demás, la etiqueta de cierre body solo existe en el más externo. Añade la etiqueta ahí y todas las páginas quedarán cubiertas, en lugar de repetirla en cada layout. Revisa el front matter de cualquier página, por ejemplo index.md o una entrada, para ver su valor de layout, y luego sigue la cadena hasta llegar al archivo que contiene el elemento html.

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

Método 1: pégala en el layout base

• 1. Abre el layout más externo — En la mayoría de las plantillas de inicio es _includes/layouts/base.njk o base.liquid. Si configuraste una carpeta de layouts distinta en tu configuración, busca allí. Los valores predeterminados de la configuración son input de la carpeta actual, includes de _includes y output de _site.
• 2. Inserta antes de la etiqueta de cierre body — Coloca la etiqueta en la línea justo encima de </body>. Es HTML simple, así que funciona igual en layouts de Nunjucks, Liquid, WebC, Handlebars y JavaScript.
• 3. Vuelve a compilar — Ejecuta npx @11ty/eleventy --serve para un servidor local que se actualiza al cambiar algo, o npx @11ty/eleventy para escribir el sitio en _site.

Método 2: guarda el ID de incrustación en datos globales

La función de datos globales de Eleventy convierte cada archivo JSON o módulo JavaScript de la carpeta _data en una variable con el nombre del archivo. Por tanto, un archivo llamado anvevoice.json se convierte en {{ anvevoice }} en todas las plantillas, con la prioridad más baja en la cascada de datos para que el front matter pueda sobrescribirlo. Así el ID queda fuera del código del layout y puedes cambiarlo para staging.

• 1. Crea _data/anvevoice.json — Pon tu ID en un solo lugar. { "embedId": "YOUR_EMBED_ID" }
• 2. Usa el valor en el layout — En Nunjucks o Liquid, usa dobles llaves alrededor de anvevoice.embedId dentro de la URL. <script src="https://anvevoice.app/embed.js?embedId={{ anvevoice.embedId }}" async></script>

Método 3: muéstrala solo en el sitio compilado

Eleventy 2.0 añadió una variable de entorno ELEVENTY_RUN_MODE cuyo valor es build, serve o watch. La documentación indica que las variables de entorno están disponibles en los archivos JavaScript evaluados durante la compilación, así que las plantillas en otros lenguajes necesitan que el valor se exponga mediante un archivo de datos. Es útil si quieres el botón en el sitio desplegado pero no mientras escribes.

• 1. Expón el modo — Crea _data/anvevoice.js. En Eleventy 3 puedes usar export default en lugar de module.exports. module.exports = { embedId: "YOUR_EMBED_ID", enabled: process.env.ELEVENTY_RUN_MODE === "build", };
• 2. Envuelve la etiqueta — Usa un bloque if en el lenguaje de tu layout para que la etiqueta solo se renderice cuando enabled sea true. {% if anvevoice.enabled %} <script src="https://anvevoice.app/embed.js?embedId={{ anvevoice.embedId }}" async></script> {% endif %}

Particularidades de Eleventy

• Las páginas sin layout, o con layout en false, no reciben la etiqueta, incluidos los archivos RSS, las redirecciones y cualquier plantilla HTML sin procesar. Añade la etiqueta directamente a esas páginas si son páginas reales.
• Eleventy es un generador estático, así que el botón de voz funciona donde alojes la carpeta _site: Netlify, Cloudflare Pages, GitHub Pages o un servidor normal. Despliega la nueva salida después de cada cambio de layout.
• Los archivos passthrough que se copian tal cual no se procesan como plantillas. Si entregas un archivo HTML escrito a mano de esa forma, el cambio del layout no llegará a él.
• Un sitio multilingüe con un layout por idioma necesita la etiqueta en cada layout más externo, o en un parcial compartido que incluyan todos.

Comprueba que funciona

• 1. Revisa la salida — Mira _site/index.html después de compilar y busca anvevoice.app. Debería aparecer una vez, justo antes de </body>.
• 2. Cárgala en una ventana privada — Sirve _site o abre la dirección desplegada. En un sitio en vivo, el acceso al micrófono necesita HTTPS.
• 3. Usa el botón — Haz clic en el botón redondo del micrófono de abajo a la derecha, permite el acceso al micrófono y haz una pregunta.

Problemas frecuentes

• Sin botón en local: con el método 3 el modo es serve, así que enabled es false. Compila y abre _site.
• Error de plantilla con las llaves: usas un lenguaje en el que las dobles llaves significan otra cosa. Usa la sintaxis de salida de ese lenguaje.
• Etiqueta mostrada como texto: el layout escapa el HTML. Asegúrate de que la etiqueta esté en el layout, no en una variable que se escapa al mostrarse.
• Botón solo en algunas páginas: esas páginas usan otra cadena de layouts. Revisa sus valores de layout.

Fuentes

• Documentación de Eleventy: layouts (https://www.11ty.dev/docs/layouts/) — consultado el 2026-10-14
• Documentación de Eleventy: configuración (directorios) (https://www.11ty.dev/docs/config/) — consultado el 2026-10-14
• Documentación de Eleventy: archivos de datos globales (https://www.11ty.dev/docs/data-global/) — consultado el 2026-10-14
• Documentación de Eleventy: variables de entorno (https://www.11ty.dev/docs/environment-vars/) — consultado el 2026-10-14
• Documentación de Eleventy: uso desde la línea de comandos (https://www.11ty.dev/docs/usage/) — consultado el 2026-10-14

Relacionado

• Cómo añadir AnveVoice a un sitio Hugo
• Cómo añadir AnveVoice a un sitio Jekyll
• 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.