Añade un agente de voz con IA a una app de React (guía 2026)

Cómo añadir AnveVoice a una app de React

En una aplicación de React del lado del cliente, pega la etiqueta de script de AnveVoice en la página HTML donde React se monta: index.html en la raíz de un proyecto de Vite, o public/index.html en un proyecto antiguo de Create React App. Next.js y las apps de framework de React Router tienen sus propias guías. Pasos comprobados con la documentación oficial el 2026-10-14.

En resumen

• Dónde va el código: Vite: index.html en la raíz del proyecto. Create React App: public/index.html
• Programación necesaria: Una línea de HTML, o un componente useEffect corto si quieres controlar cuándo se carga
• Límites del plan: Ninguno por parte de React. El plan Free de AnveVoice es suficiente
• Tiempo: Unos 2 minutos más una compilación

Elige primero tu configuración

React en sí no incluye una página HTML, así que el lugar de la etiqueta depende de tus herramientas. La documentación de React para crear una app desde cero apunta a Vite, Parcel y Rsbuild como herramientas de compilación para una aplicación de una sola página solo en el cliente, y recomienda un framework cuando necesitas enrutamiento o carga de datos. Su anuncio sobre Create React App indica que esa herramienta está obsoleta para proyectos nuevos, pero sigue funcionando en modo de mantenimiento, así que puede que te encuentres con ella en código antiguo. Si tu proyecto usa Next.js, sigue la guía de Next.js. Si usa el modo framework de React Router, sigue la guía de React Router. Ambos generan su HTML a partir de un componente raíz en lugar de un archivo estático. Esta página cubre las configuraciones de una sola página.

• 1. Copia la etiqueta de instalación — Crea un bot en app.anvevoice.app, copia su ID de incrustación y sustitúyelo abajo. &position=bottom-left y &theme=dark son opcionales. <script src="https://anvevoice.app/embed.js?embedId=YOUR_EMBED_ID" async></script>

Método 1: la página HTML

Solo en Create React App, %PUBLIC_URL% se reemplaza durante la compilación. No lo pongas en la URL de AnveVoice; la etiqueta usa una dirección https completa.

• 1. Vite (npm create vite@latest con la plantilla react) — Abre index.html en la raíz del proyecto, el archivo que Vite trata como punto de entrada. Pega la etiqueta encima de la etiqueta de cierre body, debajo de div id="root" y del script de módulo.
• 2. Create React App — Abre public/index.html. La documentación describe este archivo como editable e indica que la compilación añade automáticamente la etiqueta script de tu propia app. Pega la etiqueta de AnveVoice antes de la etiqueta de cierre body. Allí se describen las etiquetas script manuales como una solución para casos menos comunes, y un script de widget alojado es exactamente eso.
• 3. Inicia o vuelve a compilar — Ejecuta tu script de desarrollo (npm run dev o npm start) y recarga. Para producción, ejecuta el script de compilación y despliega la carpeta de salida.

Método 2: un componente que carga el script

Un componente te da control: cargar solo en producción, solo para visitantes sin sesión o solo con un ID de tu configuración de entorno. La guía de React sobre effects indica que el código que llega fuera de React pertenece a useEffect, y que en desarrollo el Strict Mode (modo estricto) monta, desmonta y vuelve a montar cada componente una vez a propósito para detectar effects que no son repetibles. Este cargador está pensado para eso: primero comprueba si la etiqueta ya existe, así que la segunda ejecución no hace nada. No tiene una función de limpieza a propósito. Eliminar el elemento script no quitaría un widget que ya se ha iniciado, así que la limpieza más segura es mantener una única etiqueta durante toda la vida de la página.

• 1. Crea AnveVoice.jsx — Renderízalo una vez cerca de la raíz de la app. import { useEffect } from 'react'; export function AnveVoice({ embedId }) { useEffect(() => { if (!embedId) return; const src = `https://anvevoice.app/embed.js?embedId=${embedId}`; if (document.querySelector(`script[src="${src}"]`)) return; const s = document.createElement('script'); s.src = src; s.async = true; document.body.appendChild(s); }, [embedId]); return null; }
• 2. Móntalo — Añade <AnveVoice embedId={import.meta.env.VITE_ANVEVOICE_EMBED_ID} /> dentro de tu componente App de nivel superior. En Create React App, usa process.env.REACT_APP_ANVEVOICE_EMBED_ID en su lugar. De todos modos, el ID es público, ya que forma parte de la URL del script.

Notas de enrutamiento y renderizado

• El enrutamiento del cliente no recarga la página, así que una etiqueta cargada una vez persiste entre rutas. No coloques el cargador dentro de un componente de ruta, porque se ejecutaría de nuevo en cada visita a esa ruta.
• Strict Mode invoca los effects dos veces solo en desarrollo. La comprobación con querySelector es lo que evita que la etiqueta aparezca dos veces allí; en producción, el effect se ejecuta una vez.
• Si renderizas en el servidor con un framework, no te fíes de esta página. Los effects nunca se ejecutan en el servidor, así que la etiqueta solo aparecería después de la hidratación en el navegador.
• El contenido que React renderiza dentro de su div raíz es independiente de la etiqueta del nivel body, así que los re-renderizados de React nunca eliminan el botón de voz.

Comprueba que funciona

• 1. Carga la app en una ventana privada — Los sitios desplegados necesitan HTTPS para el acceso al micrófono; localhost está bien.
• 2. Busca el botón — Aparece un botón redondo de micrófono abajo a la derecha. Haz clic en él y permite el micrófono.
• 3. Cuenta las etiquetas — En DevTools, ejecuta document.querySelectorAll('script[src*="anvevoice.app"]').length. Debería devolver 1.

Problemas comunes

• El botón nunca aparece con el método 2 en desarrollo: la variable del ID de incrustación no está definida. Vite solo expone variables que empiezan por VITE_ y necesita reiniciarse después de editar un archivo de entorno.
• Dos botones: añadiste tanto la etiqueta HTML como el componente. Usa uno solo.
• Editaste public/index.html en un proyecto de Vite: Vite lo ignora. El archivo que se usa es el index.html de la raíz.
• Script bloqueado: una Content Security Policy de tu host debe permitir https://anvevoice.app.

Fuentes

• Documentación de React: crear una app de React desde cero (https://react.dev/learn/build-a-react-app-from-scratch) — consultado el 2026-10-14
• Documentación de React: sincronizar con Effects (https://react.dev/learn/synchronizing-with-effects) — consultado el 2026-10-14
• Blog de React: fin del soporte de Create React App (https://react.dev/blog/2025/02/14/sunsetting-create-react-app) — consultado el 2026-10-14
• Documentación de Create React App: uso de la carpeta public (https://create-react-app.dev/docs/using-the-public-folder/) — consultado el 2026-10-14
• Documentación de Vite: primeros pasos y variables de entorno (https://vite.dev/guide/env-and-mode.html) — consultado el 2026-10-14

Relacionado

• Cómo añadir AnveVoice a una app de Vue
• Cómo añadir AnveVoice a una aplicación de Angular
• Cómo añadir AnveVoice a una aplicación Next.js
• Cómo añadir AnveVoice a una aplicación de React Router

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.