AnveVoice

Añade un agente de voz con IA a cualquier sitio web HTML

Añade el agente de voz de AnveVoice a un sitio HTML o estático simple con una sola etiqueta script: dónde pegarla, opciones, pruebas en local y soluciones.

Cómo añadir AnveVoice a un sitio web HTML sencillo

Pega una etiqueta script justo antes de la etiqueta de cierre </body> de cada página, o en el include de pie de página compartido si tu sitio lo tiene. El botón de voz aparece en la siguiente carga de la página; no hay nada que compilar ni instalar. Probado por AnveVoice el 2026-10-14.

En resumen

  • Dónde va el código: Antes de </body> en cada página, o en un include de pie compartido
  • Programación necesaria: Editar un archivo HTML
  • Requisitos: Páginas servidas por HTTPS (o localhost mientras pruebas) para que el navegador permita el micrófono
  • Tiempo: Unos 2 minutos una vez que tienes tu embed ID

La etiqueta

Obtén tu embed ID en el panel de AnveVoice, en app.anvevoice.app (el plan Free no requiere tarjeta). La etiqueta de abajo es toda la instalación; sustituye YOUR_EMBED_ID por tu propio ID.

  • 1. Copia la etiqueta de instalación — El atributo async permite que el navegador siga renderizando tu página mientras el asistente de voz se descarga en segundo plano. <script src="https://anvevoice.app/embed.js?embedId=YOUR_EMBED_ID" async></script>
  • 2. Pégala antes de </body> — Abre cada archivo HTML que deba mostrar el asistente y pega la etiqueta en la línea justo encima de la etiqueta de cierre </body>. Colocarla dentro de <head> también funciona, porque el script espera al body de la página antes de dibujar el botón. <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Example</title> </head> <body> <h1>Welcome</h1> <script src="https://anvevoice.app/embed.js?embedId=YOUR_EMBED_ID" async></script> </body> </html>
  • 3. Sube los archivos y recarga — Sube los archivos modificados a tu alojamiento (FTP, el administrador de archivos de tu proveedor o Git) y recarga la página. Aparece un botón redondo de micrófono en la esquina inferior derecha.

Opciones en la URL

Dos ajustes opcionales van en la URL del script como parámetros de consulta. position mueve el botón (abajo a la derecha es el valor predeterminado; abajo a la izquierda es la alternativa), y theme cambia entre el estilo claro y el oscuro para adaptarse a tu sitio. Separa los parámetros con &. Si cambias de opinión más adelante, edita la URL en un solo lugar: la etiqueta es lo único que has añadido, así que no hay otra configuración que mantener sincronizada en tu servidor.

  • 1. Ejemplo con opciones — Coloca el botón a la izquierda y con estilo oscuro. <script src="https://anvevoice.app/embed.js?embedId=YOUR_EMBED_ID&position=bottom-left&theme=dark" async></script>

Sitios con muchas páginas

Los sitios escritos a mano suelen repetir el mismo pie en todas las páginas. Si tu alojamiento admite inclusiones del lado del servidor o usas PHP, pon la etiqueta una sola vez en el archivo de pie compartido (por ejemplo, footer.html o footer.php) en lugar de editar cada página. Si cada página es un archivo independiente sin partes compartidas, la forma más rápida de añadirla a todas es un buscar y reemplazar en todo el proyecto sobre </body>. Los generadores de sitios estáticos como Hugo, Jekyll o Eleventy tienen un layout base que envuelve todas las páginas; añade la etiqueta ahí. Cada uno tiene su propia guía en la lista de instalación.

Cómo lo probamos

El 14 de octubre de 2026 servimos una página HTML mínima desde un servidor web local, con solo un encabezado, un párrafo y la etiqueta anterior. Tras la carga, la página contenía el elemento host de AnveVoice con su propio shadow DOM y el botón del micrófono renderizado en la esquina inferior derecha. El script también define una bandera global de protección, que es lo que evita que una segunda copia de la etiqueta cree un segundo botón.

Problemas habituales

  • No aparece nada al abrir el archivo directamente (URL file://): sirve la página por http://localhost o súbela a tu alojamiento; los navegadores restringen muchas funciones en los archivos locales.
  • El botón aparece pero el micrófono está bloqueado: el sitio en vivo debe usar HTTPS. La mayoría de los alojamientos ofrece certificados gratuitos; cambia tus URL a https://.
  • La página tiene una cabecera Content-Security-Policy estricta: permite scripts y conexiones desde anvevoice.app y api.anvevoice.app; si no, el navegador se niega a cargar el asistente.
  • Sigue apareciendo la versión anterior tras una edición: el navegador o el CDN guardaron la página en caché. Haz una recarga forzada o purga la caché del CDN.

Fuentes

  • MDN: el elemento <script> y el atributo async (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script) — consultado el 2026-10-14
  • MDN: getUserMedia() requiere un contexto seguro (https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia) — consultado el 2026-10-14
  • MDN: Content-Security-Policy script-src (https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src) — consultado el 2026-10-14

Relacionado

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