Añade un agente de voz con IA a una app de Ember.js (2026)

Cómo añadir AnveVoice a una app de Ember.js

Las apps de Ember arrancan desde un único index.html. En las apps generadas desde Ember 6.8, ese archivo está en la raíz del proyecto; en las apps de compilación clásica anteriores está en app/index.html. Pega la etiqueta de AnveVoice en el body de ese archivo, justo encima del hook body-footer, y después vuelve a compilar. Pasos comprobados con la documentación oficial el 2026-10-14.

En resumen

• Dónde va el código: index.html (apps basadas en Vite, en la raíz) o app/index.html (apps clásicas de Broccoli)
• Código necesario: Una línea de HTML; el initializer es opcional
• Límites del plan: Ninguno por parte de Ember. El plan gratuito de AnveVoice es suficiente
• Tiempo: Unos 2 minutos más una compilación

¿Qué compilación de Ember tienes?

La documentación de Ember CLI indica que el entorno de compilación predeterminado pasó a Vite en Ember 6.8, y que las compilaciones con Vite se admiten en apps desde Ember 3.28. Por tanto, la plantilla de página de tu proyecto está en uno de dos lugares, y editar el equivocado es el motivo habitual por el que una etiqueta añadida nunca aparece. Revisa package.json. Si tiene un script de compilación que ejecuta vite build y en la raíz del proyecto hay un archivo vite.config, tienes una app Vite, y la plantilla de página es index.html en la raíz. Si en cambio ember-cli-build.js es el único archivo de compilación, tienes una app clásica, y la referencia de estructura de carpetas de la CLI indica que app/index.html es la única página de la app.

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

Método 1: edita index.html

El archivo es una plantilla. El index.html del blueprint de la app de Ember contiene cuatro marcadores escritos como content-for con los nombres head, head-footer, body y body-footer. Ember los rellena con la salida de los addons y del framework. Debes dejarlos como están y añadir tu propia línea junto a ellos.

• 1. Abre el archivo correcto — index.html de la raíz para las apps basadas en Vite; app/index.html para las apps clásicas. No uses tests/index.html, que es la página que carga el ejecutor de pruebas.
• 2. Pega encima del hook body-footer — Inserta la etiqueta de AnveVoice en la línea anterior al marcador content-for "body-footer", después del script de la aplicación. Mantén los marcadores y el script de arranque de la app exactamente como se generaron.
• 3. Compila — npm start ejecuta el servidor de desarrollo de Vite (la guía de inicio rápido de Ember indica que el script start delega en Vite en las apps actuales) y npm run build ejecuta vite build, escribiendo el sitio desplegable en dist/. Las apps clásicas usan ember serve y ember build.

Método 2: un initializer para la carga condicional

Las guías de Ember describen los initializers de aplicación como el lugar para configurar una app mientras arranca, en app/initializers, y los initializers de instancia en app/instance-initializers para la configuración por instancia. Úsalo cuando el script deba cargarse solo en producción, o solo cuando una marca de funcionalidad esté activa. Genéralo con ember generate initializer anvevoice y luego edita el archivo. FastBoot o Ember renderizado en el servidor no tienen document al arrancar. Protege el initializer con typeof document !== 'undefined' si renderizas en el servidor.

• 1. Escribe el initializer — Esta versión carga el script solo en producción y evita añadirlo dos veces. Sustituye my-app por el nombre de tu package.json, y YOUR_EMBED_ID por tu ID. // app/initializers/anvevoice.js import config from 'my-app/config/environment'; export function initialize() { if (config.environment !== 'production') return; const src = 'https://anvevoice.app/embed.js?embedId=YOUR_EMBED_ID'; if (document.querySelector(`script[src="${src}"]`)) return; const s = document.createElement('script'); s.src = src; s.async = true; document.body.appendChild(s); } export default { initialize };

Enrutamiento, carpeta public y caché

• El enrutador de Ember es del lado del cliente, así que las transiciones entre rutas no recargan index.html. La etiqueta se ejecuta una vez por carga completa y el botón permanece.
• La carpeta public se copia tal cual a la raíz de la compilación y es para assets sin paso de compilación. Poner una copia de embed.js allí no sirve de nada; usa la URL remota para que el script esté siempre actualizado.
• Los assets de la app con huella digital cambian en cada compilación, pero index.html en sí no debería guardarse en caché mucho tiempo. Si los visitantes siguen viendo una página antigua sin el botón, reduce el tiempo de caché de index.html en tu hosting o CDN.
• Las apps con una Content Security Policy, por ejemplo mediante un addon, necesitan permitir https://anvevoice.app en script-src y connect-src.

Comprueba que funciona

• 1. Sirve o despliega — Carga la app en una ventana privada. Los servidores de desarrollo de Ember usan http://localhost:4200, que los navegadores tratan como contexto seguro para el micrófono.
• 2. Busca el botón — Un micrófono redondo debería aparecer abajo a la derecha. Haz clic, permite el micrófono y haz una pregunta.
• 3. Verifica el archivo compilado — Abre dist/index.html y busca anvevoice.app. Con el método 2 no esperes encontrarla en el HTML, porque la etiqueta se añade en tiempo de ejecución.

Problemas frecuentes

• No cambia nada tras editar: editaste app/index.html en una app Vite, o el index.html de la raíz en una app clásica. Revisa el tipo de compilación.
• Texto de marcador visible: se editó o eliminó una línea content-for. Restáurala desde el control de versiones.
• Error del initializer, configuración no encontrada: la ruta de importación debe usar el nombre de módulo de tu app en package.json, no un my-app literal.
• El botón aparece solo en producción: es el comportamiento de la comprobación de entorno del método 2. Quítala para probar en local.

Fuentes

• CLI de Ember: estructura de carpetas (app/index.html, public) (https://cli.emberjs.com/release/basic-use/folder-layout/) — consultado el 2026-10-14
• Guías de Ember: herramientas de compilación con Vite (scripts start y build) (https://guides.emberjs.com/release/build-tools/vite/) — consultado el 2026-10-14
• Guías de Ember: inicio rápido (npm start y build) (https://guides.emberjs.com/release/getting-started/quick-start/) — consultado el 2026-10-14
• Guías de Ember: initializers (https://guides.emberjs.com/release/applications/initializers/) — consultado el 2026-10-14
• Blueprint de la app de Ember: index.html (código fuente en GitHub) (https://github.com/ember-cli/ember-app-blueprint/blob/main/files/index.html) — consultado el 2026-10-14

Relacionado

• Cómo añadir AnveVoice a una aplicación de Angular
• 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 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.