Añade un agente de voz con IA a una app de Angular (2026)

Cómo añadir AnveVoice a una aplicación de Angular

Abre el archivo index.html de tu proyecto de Angular (src/index.html en un workspace predeterminado) y pega la etiqueta script de AnveVoice justo antes de la etiqueta de cierre body. Angular carga ese archivo una sola vez, así que el botón de voz permanece en pantalla mientras los visitantes se mueven entre rutas. Pasos comprobados con la documentación oficial el 2026-10-14.

En resumen

• Dónde va el código: src/index.html, la página host indicada por la opción index del target de compilación en angular.json
• Código necesario: Ninguno: una línea de HTML. Solo hace falta un pequeño servicio si debes insertar la etiqueta desde TypeScript
• Límites del plan: Ninguno por parte de Angular. El plan gratuito de AnveVoice funciona con cualquier compilación
• Tiempo: Unos 2 minutos, y después compilar y volver a desplegar

Antes de empezar

Crea un bot de voz en app.anvevoice.app (el plan gratuito no requiere tarjeta) y copia su ID de incrustación desde el panel. Pegarás ese ID en la etiqueta de instalación que se muestra abajo. La referencia de estructura de archivos de Angular describe src/index.html como la página HTML principal que se sirve a los visitantes, y señala que la CLI añade a ese archivo tus bundles de JavaScript y CSS durante la compilación. Por eso normalmente no tocas el archivo. Una etiqueta de terceros como la de AnveVoice es la excepción: la CLI no sabe nada de ella, así que la añades a mano y sobrevive a todas las compilaciones.

• 1. Copia la etiqueta de instalación — Sustituye YOUR_EMBED_ID por el valor de tu panel. Añade &position=bottom-left o &theme=dark a la URL si quieres otra esquina o un esquema de colores distinto. <script src="https://anvevoice.app/embed.js?embedId=YOUR_EMBED_ID" async></script>

Método 1: edita src/index.html (recomendado)

La ubicación de la página host no está fijada en el código. La referencia de configuración del workspace de Angular documenta una opción index en el target de compilación, que contiene la ruta del archivo usado para generar el HTML de la aplicación. Abre angular.json, busca projects → your-app → architect → build → options → index, y edita el archivo al que apunte. En un proyecto creado con ng new, es src/index.html.

• 1. Abre la página host — Abre el archivo indicado por la opción index. Verás un elemento app-root dentro del body y ninguna etiqueta script, porque la CLI las inyecta durante la compilación.
• 2. Pega la etiqueta debajo de app-root — Coloca la etiqueta de AnveVoice después del elemento app-root y antes de la etiqueta de cierre body. El atributo async hace que nunca retrase el arranque de Angular.
• 3. Compila de nuevo — Ejecuta ng serve para desarrollo, que se recarga al guardar, o ng build para un bundle de producción. La etiqueta se copia sin cambios en el index.html generado de tu carpeta de salida.

Por qué no usar el array scripts de angular.json

La misma referencia describe una opción scripts para los targets de compilación: un array de archivos JavaScript, con rutas relativas a la raíz del workspace, que se cargan como si los hubieras escrito en una etiqueta script dentro de index.html. Sus ejemplos son archivos de entrada locales, y la página no dice nada sobre URLs remotas. No descargues embed.js para listarlo ahí. Una copia incluida nunca recibiría actualizaciones y se saltaría el ID de incrustación de la URL. Mantén la etiqueta remota en index.html.

Opcional: inyectar desde TypeScript, de forma segura con SSR

Las aplicaciones creadas con la opción de renderizado en servidor, o actualizadas después con ng add @angular/ssr, ejecutan código de componentes en el servidor, donde no existen window ni document. La guía de SSR de Angular indica que mantengas el trabajo exclusivo del navegador fuera de esa ruta, que uses el token de inyección DOCUMENT en lugar del global document, y que confíes en afterNextRender, que solo se ejecuta en el navegador. Una etiqueta estática en index.html no necesita nada de esto y es la opción más sencilla. Si quieres la etiqueta solo en producción o solo en algunas rutas, crea un pequeño componente o servicio de nivel raíz y añade el script desde afterNextRender. Protégelo para que una segunda llamada no haga nada. Las versiones antiguas de Angular exportan DOCUMENT desde @angular/common en lugar de @angular/core. Usa el import que espere la versión de tu proyecto.

• 1. Inyecta desde el componente raíz — Añade esto al constructor de tu componente raíz. Se ejecuta solo en el navegador, usa el token DOCUMENT y omite la inserción si la etiqueta ya existe. import { Component, DOCUMENT, afterNextRender, inject } from '@angular/core'; @Component({ selector: 'app-root', template: '<router-outlet />' }) export class App { private doc = inject(DOCUMENT); constructor() { afterNextRender(() => { const src = 'https://anvevoice.app/embed.js?embedId=YOUR_EMBED_ID'; if (this.doc.querySelector(`script[src="${src}"]`)) return; const s = this.doc.createElement('script'); s.src = src; s.async = true; this.doc.body.appendChild(s); }); } }

Problemas de rutas y de despliegue

• Angular es una aplicación de página única, así que el router cambia de vista sin recargar index.html. La etiqueta de AnveVoice se ejecuta una vez por carga completa de página y permanece activa entre cambios de ruta; no necesitas ningún hook del router.
• La guía de despliegue de Angular indica que el servidor debe devolver el index.html del host para las URL de las que no tiene archivo. Asegúrate de que tu fallback sirve tu index.html editado; si no, los enlaces directos se abren sin el botón de voz.
• Un <base href> en index.html no afecta a la URL https absoluta de la etiqueta de AnveVoice, así que los despliegues en subcarpetas funcionan.
• La salida prerenderizada o renderizada en servidor se genera a partir del mismo host, así que la etiqueta aparece también en el HTML entregado.

Comprueba que funciona

• 1. Carga la app — Abre el servidor de desarrollo o tu sitio desplegado en una ventana privada. localhost cuenta como contexto seguro para el micrófono; un sitio desplegado debe usar HTTPS.
• 2. Busca el botón — Aparece un botón redondo con micrófono abajo a la derecha, salvo que configures position. Haz clic, permite el micrófono y pregunta algo sobre tus páginas.
• 3. Confirma la solicitud — En la pestaña Network del navegador, filtra por embed.js y comprueba que devuelve 200. Mira el código fuente de la página o el dist/index.html compilado para confirmar que la etiqueta está presente una vez.

Problemas frecuentes

• El botón no aparece tras desplegar: editaste un archivo de índice distinto al que usa la configuración de producción. Revisa la opción index en cada configuración de angular.json.
• La etiqueta aparece dos veces: está en index.html y en un componente. Conserva una; AnveVoice ignora un duplicado, pero una sola fuente es más fácil de mantener.
• La Content Security Policy la bloquea: permite https://anvevoice.app en script-src y connect-src si tu host envía una cabecera CSP.
• ReferenceError: document is not defined durante la compilación: un componente usa document fuera de afterNextRender. Mueve ese código a afterNextRender o usa el token DOCUMENT.
• Se sirve un bundle antiguo: tu CDN o tu service worker tienen en caché el index.html anterior. Purga la caché o incrementa la versión del service worker.

Fuentes

• Documentación de Angular: estructura de archivos del workspace (src/index.html) (https://angular.dev/reference/configs/file-structure) — consultado el 2026-10-14
• Documentación de Angular: configuración del workspace (opciones index y scripts) (https://angular.dev/reference/configs/workspace-config) — consultado el 2026-10-14
• Documentación de Angular: renderizado en servidor e híbrido (https://angular.dev/guide/ssr) — consultado el 2026-10-14
• Documentación de Angular: despliegue (https://angular.dev/tools/cli/deployment) — consultado el 2026-10-14

Relacionado

• Cómo añadir AnveVoice a una app de React
• Cómo añadir AnveVoice a una app de Vue
• Cómo añadir AnveVoice a una app de Ember.js
• 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.