Añade un agente de voz con IA a una app de Express

Cómo añadir AnveVoice a un sitio de Express (Node.js)

La forma de añadir la etiqueta depende de cómo Express sirva tus páginas. Con un motor de plantillas como Pug, EJS o Handlebars, añádela al layout compartido. Con express.static sirviendo HTML sencillo, añádela a los archivos HTML. Si usas Helmet, permite también anvevoice.app en script-src. Pasos comprobados con la documentación oficial el 2026-10-14.

En resumen

• Dónde va el código: Tu layout de vistas compartido en la carpeta views, o los archivos HTML de tu carpeta estática
• Código necesario: Una línea en una plantilla o archivo HTML; un pequeño cambio de configuración de Helmet si lo usas
• Límites del plan: Ninguno por parte de Express; funciona donde funcione Node
• Tiempo: Unos 5 minutos

Express no tiene un layout propio

A diferencia de los frameworks con todo incluido, Express no impone una estructura de página. La guía de Express sobre motores de plantillas indica que configures dos ajustes de la aplicación: views, la carpeta que contiene las plantillas (por defecto una carpeta views en la raíz de la app), y view engine, que indica el motor. Después, res.render('index', data) renderiza una plantilla. Qué archivo envuelve tus páginas lo decide, por tanto, el motor que elegiste y cómo estructuraste tus vistas. La segunda disposición habitual es servir HTML ya terminado. La guía de archivos estáticos muestra app.use(express.static('public')), que hace que los archivos de esa carpeta estén disponibles en rutas relativas a ella, sin el nombre de la carpeta en la URL. Una compilación de app de una sola página, por ejemplo, suele servirse así. La documentación de Express 5 es la referencia actual para ambas páginas. Averigua cuál de las dos usa tu proyecto mirando server.js o app.js: una llamada a app.set('view engine', ...) significa plantillas; app.use(express.static(...)) por sí solo significa archivos estáticos.

• 1. Obtén tu etiqueta de instalación — Crea un bot en app.anvevoice.app y copia su ID de incrustación en la etiqueta. Puedes añadir &theme=dark si tu sitio tiene un fondo oscuro. <script src="https://anvevoice.app/embed.js?embedId=YOUR_EMBED_ID" async></script>

Método 1: añádela a la plantilla compartida

Con cualquier motor, localiza el archivo que genera los elementos html, head y body. En Pug suele ser layout.pug; con EJS, un parcial de encabezado y pie; con Handlebars, un layouts/main.hbs cuando se usa el helper de layout. Añade la etiqueta al final del body para que se cargue después del contenido de la página.

• 1. Edita la plantilla de layout — Con EJS, por ejemplo, el parcial de pie incluido al final de cada página es el lugar correcto: <!-- views/partials/footer.ejs --> <script src="https://anvevoice.app/embed.js?embedId=YOUR_EMBED_ID" async></script> </body> </html>
• 2. Equivalente en Pug — En Pug, sangra el elemento script bajo body en el layout. body block content script(src="https://anvevoice.app/embed.js?embedId=YOUR_EMBED_ID", async)
• 3. Reinicia el proceso — Express guarda en caché las plantillas compiladas cuando la caché de vistas está activa (es el valor predeterminado en producción). La documentación indica que la caché de vistas guarda solo la plantilla compilada, no la salida. Reinicia Node después de editar para que la nueva plantilla se compile.

Método 2: añádela a los archivos HTML estáticos

• 1. Abre cada archivo HTML de tu carpeta estática — Edita public/index.html y cualquier otra página que deba incluir el agente de voz. Pega la etiqueta encima de la etiqueta de cierre body.
• 2. Recompila si el HTML se genera — Si public/ procede de un paso de compilación (Vite, webpack, un generador de sitios estáticos), añade la etiqueta al HTML fuente o a la plantilla de esa herramienta, y luego recompila. Los cambios hechos en los archivos generados se sobrescriben en la siguiente compilación.

Helmet y otro middleware de seguridad

Muchas apps de Express usan Helmet. Su documentación indica que la Content-Security-Policy predeterminada establece script-src en 'self', así que un script externo como la etiqueta de AnveVoice queda bloqueado hasta que lo permitas. Pasa tus directivas a la opción contentSecurityPolicy; Helmet las combina con sus valores predeterminados, y la clave puede escribirse como script-src o scriptSrc. Si el botón carga pero las conversaciones fallan, lee los mensajes de CSP en la consola del navegador y añade a connect-src los hosts que indiquen, o a las directivas de media o de frame que mencionen.

• 1. Permite el host en script-src — Mantén 'self' en la lista y añade el origen de AnveVoice. import helmet from "helmet"; app.use( helmet({ contentSecurityPolicy: { directives: { "script-src": ["'self'", "https://anvevoice.app"], }, }, }), );

Comprueba que funciona

• 1. Pide la página — Ejecuta curl sobre la URL de una página y busca embed.js en la salida, o ve el código fuente en una ventana privada. Debería aparecer una sola vez.
• 2. Usa el botón de voz — El botón del micrófono aparece abajo a la derecha. Haz clic, permite el micrófono (HTTPS o localhost) y haz una pregunta sobre tu sitio.

Problemas frecuentes

• Plantilla editada pero sin cambios: editaste un parcial que no se incluye en el layout de esa página, o la caché de vistas sirve la compilación antigua. Reinicia.
• Script bloqueado tras añadir Helmet: el script-src predeterminado es 'self'. Añade el origen de AnveVoice como se indicó.
• Confusión con la ruta estática relativa: express.static('public') se resuelve respecto a la carpeta desde la que ejecutas node. Usa una ruta absoluta si la app se inicia desde otro lugar.
• Caché de proxy inverso: Nginx, un CDN o un service worker sirve un archivo HTML obsoleto.

Fuentes

• Guía de Express: uso de motores de plantillas (https://expressjs.com/en/guide/using-template-engines.html) — consultado el 2026-10-14
• Guía de Express: servir archivos estáticos (https://expressjs.com/en/starter/static-files.html) — consultado el 2026-10-14
• Documentación de Helmet.js (Content-Security-Policy) (https://helmetjs.github.io/) — consultado el 2026-10-14

Relacionado

• Cómo añadir AnveVoice a una aplicación de Flask
• Cómo añadir AnveVoice a una aplicación de Ruby on Rails
• Cómo añadir AnveVoice a una app de React
• Cómo añadir AnveVoice a una aplicación Next.js

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.