Añade un agente de voz con IA a Astro (script is:inline)

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

Coloca la etiqueta de AnveVoice en tu componente de layout compartido con la directiva is:inline. Si no, Astro intenta procesar y empaquetar los scripts, y is:inline le indica que deje la URL externa exactamente como está escrita. Pasos comprobados con la documentación oficial el 2026-10-14.

En resumen

• Dónde va el código: Tu layout base, por ejemplo src/layouts/Layout.astro
• Directiva obligatoria: is:inline, para que Astro no procese ni empaquete el script
• Código necesario: Un elemento script en un archivo .astro
• Navegación: Funciona con cargas de página completas y con ClientRouter

Antes de empezar

Inicia sesión en app.anvevoice.app y copia el ID de incrustación (plan gratuito, $0, sin tarjeta). También necesitas saber qué archivo contiene la estructura de página de tu sitio. En la mayoría de los proyectos de Astro es un único layout en src/layouts que renderiza los elementos html, head y body, y un slot para el contenido de cada página. La guía de scripts del lado del cliente de Astro explica por qué importa la directiva. Por defecto, Astro procesa los elementos script que no tienen más atributos que src: añade soporte de TypeScript, empaqueta las importaciones locales y de npm, y las convierte en módulos. Para cargar un script desde fuera de la carpeta src del proyecto, la guía indica incluir is:inline, que excluye el elemento del procesamiento para que se renderice tal cual.

Añade la etiqueta a tu layout

• 1. Abre el layout — Busca el componente de layout que comparten tus páginas, como src/layouts/Layout.astro o BaseLayout.astro. La documentación de layouts de Astro muestra este archivo como el lugar del elemento html y del slot.
• 2. Coloca el script antes de la etiqueta de cierre body — Añade el script externo con is:inline después del slot, para que el contenido de la página se renderice primero. Sustituye YOUR_EMBED_ID por tu propio valor. --- // src/layouts/Layout.astro const { title } = Astro.props; --- <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>{title}</title> </head> <body> <slot /> <script is:inline src="https://anvevoice.app/embed.js?embedId=YOUR_EMBED_ID" async ></script> </body> </html>
• 3. Comprueba que todas las páginas usan el layout — Las páginas que importan otro layout, o que construyen su propio elemento html, no incluirán la etiqueta. Busca en src/pages los layouts que hayas olvidado.

¿Por qué no un elemento script normal?

Sin is:inline, la compilación de Astro trata el elemento como un script que debe gestionar. Para una URL de terceros, ese es el comportamiento incorrecto: quieres que el navegador descargue el archivo directamente desde AnveVoice. Una copia empaquetada además congelaría el cargador en el momento de la compilación, lo que anularía el sentido de las actualizaciones alojadas del script. Ten en cuenta la otra consecuencia que indica la misma guía: un script is:inline colocado dentro de un componente se duplica por cada instancia de ese componente. Por eso la etiqueta debe estar en el único layout, no en un componente que se repite, como una tarjeta.

ClientRouter de Astro y transiciones de página

Si activaste ClientRouter para las transiciones de vista, presta atención a cómo trata Astro los scripts. La guía indica que el head se reemplaza entre páginas, pero se conservan los scripts que existen en la nueva página, y que los scripts inline pueden volver a ejecutarse durante una visita. Añadir el atributo data-astro-rerun hace que un script inline se ejecute de nuevo después de cada transición. No añadas data-astro-rerun para AnveVoice. Se carga una sola vez, y el script ignora una segunda copia en la misma página, así que aunque Astro vuelva a ejecutar el elemento, nada se duplica. Dejar el atributo fuera es la opción predeterminada más segura.

Comprueba que funciona

• 1. Compila y previsualiza — Ejecuta astro build y astro preview para inspeccionar las páginas generadas.
• 2. Revisa el código fuente — Busca en el HTML de cualquier página compilada anvevoice.app/embed.js.
• 3. Prueba la voz — Abre el sitio, haz clic en el botón redondo del micrófono de la esquina inferior derecha, permite el acceso al micrófono y haz una pregunta.

Problemas frecuentes

• Advertencia o error de compilación sobre el script: olvidaste is:inline, así que Astro intentó procesarlo.
• Falta en algunas páginas: esas páginas usan otro layout. Añade la etiqueta allí o combina los layouts.
• La etiqueta aparece varias veces en el HTML: está dentro de un componente que se renderiza más de una vez. Muévela al layout.
• Micrófono bloqueado: despliega por HTTPS y evita una cabecera Permissions-Policy que desactive el micrófono.

Fuentes

• Documentación de Astro: scripts del lado del cliente (https://docs.astro.build/en/guides/client-side-scripts/) — consultado el 2026-10-14
• Documentación de Astro: layouts (https://docs.astro.build/en/basics/layouts/) — consultado el 2026-10-14
• Documentación de Astro: transiciones de vista y scripts (https://docs.astro.build/en/guides/view-transitions/) — consultado el 2026-10-14

Relacionado

• Cómo añadir AnveVoice a un sitio alojado en Netlify
• Cómo añadir AnveVoice a un sitio de Gatsby
• Cómo añadir AnveVoice a un sitio web HTML sencillo
• Cómo añadir AnveVoice a un sitio de Eleventy

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.