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

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

Bubble guarda los scripts de toda la app en Settings → SEO / Meta tags, en los campos de contenido personalizado de cabecera y de cuerpo. Pega la etiqueta de AnveVoice en el campo de cuerpo y después despliega a Live, porque la versión de desarrollo y la versión en vivo son entornos distintos, con sus propios ajustes. Pasos comprobados con la documentación oficial el 2026-10-14.

En resumen

• Dónde va el código: Settings → SEO / Meta tags → custom header and body content (todas las páginas); o los ajustes SEO de cada página
• Código necesario: Ninguno; no hacen falta plugins ni workflows, solo pegar una etiqueta
• Límites del plan: El manual de SEO de Bubble no indica ninguno para este campo; desplegar a Live y usar un dominio propio dependen del plan de tu cuenta
• Tiempo: Unos 3 minutos, incluido el despliegue

Antes de empezar

Las apps de Bubble son aplicaciones reales, no páginas estáticas, así que conviene entender cómo llega la etiqueta al navegador. Bubble inserta lo que colocas en su campo de cabecera entre las etiquetas head de cada página, y lo que colocas en su campo de cuerpo entre las etiquetas body de cada página. Eso es exactamente lo que necesita un script de terceros. Obtén primero el ID de incrustación en app.anvevoice.app. El plan gratuito de AnveVoice incluye un bot y 50.000 tokens al mes, lo cual basta para probar dentro de una app de Bubble.

• 1. Copia la etiqueta de AnveVoice — Usa esta línea con tu propio ID en lugar de YOUR_EMBED_ID. Para fijar el botón a la izquierda o cambiar a un panel oscuro, añade &position=bottom-left o &theme=dark a la URL. <script src="https://anvevoice.app/embed.js?embedId=YOUR_EMBED_ID" async></script>

Añádelo para toda la app

La página del manual de Bubble “SEO: App” indica que los ajustes SEO de la app se encuentran en Settings, en la pestaña SEO / Meta tags, y describe una sección llamada Custom header and body content. Explica que los scripts y las metaetiquetas de la cabecera van entre las etiquetas head en todas las páginas, mientras que los scripts del campo de cuerpo se colocan entre las etiquetas body en todas las páginas. Bubble pide a los usuarios que recarguen después de un despliegue. Los visitantes que ya tengan la app abierta verán un aviso para recargar la pestaña; programa el despliegue para un momento tranquilo si tu app tiene mucho tráfico.

• 1. Abre los ajustes del editor — En el editor de Bubble haz clic en Settings en la barra de pestañas izquierda y abre la pestaña SEO / Meta tags.
• 2. Localiza los campos de cabecera y cuerpo — Baja hasta los campos de contenido personalizado. Uno es para la cabecera y otro para el cuerpo.
• 3. Pega la etiqueta en el campo de cuerpo — Coloca la línea del script en el campo de cuerpo. Puedes dejar vacío el campo de cabecera; AnveVoice no necesita una etiqueta head.
• 4. Previsualiza y despliega — Los ajustes que cambies en la versión de desarrollo se mantienen ahí hasta que despliegues. La guía de despliegue de Bubble indica que el comprobador de incidencias debe mostrar cero problemas antes de poder desplegar; haz clic en el botón de control de versiones arriba a la derecha, añade una descripción breve como Add AnveVoice voice agent y despliega a Live.

Scripts por página y por qué lo de toda la app es más sencillo

El manual de Bubble indica que el contenido añadido al campo de nivel de app se añade a todas las páginas, y que también puedes añadirlo página por página en los ajustes de cada una. Para un agente de voz que debe hablar de toda la app, basta una única entrada de toda la app. Las entradas por página son para un script que solo deba existir, por ejemplo, en una página pública de precios; si usas ambas cosas, recuerda que el botón puede cargarse dos veces, aunque AnveVoice ignora una segunda copia en la misma página. Un hábito más específico de Bubble: no pongas en el campo de toda la app las etiquetas que de verdad son específicas de una página, como los datos estructurados. Bubble aplica los valores de nivel de app a cada página, así que no quieres marcado idéntico por página en todas partes. La etiqueta de AnveVoice es igual en todas las páginas, por eso pertenece al nivel de app.

Desarrollo frente a Live

Aquí es donde Bubble engaña a mucha gente. La Preview del editor ejecuta la versión de desarrollo; tu URL pública ejecuta la versión Live. Bubble describe el despliegue como el traslado de la versión de desarrollo actual al entorno Live. Si pegas la etiqueta y pruebas en el dominio en vivo sin desplegar, no habrá cambiado nada. Si usas ramas a través del control de versiones de Bubble, asegúrate de que el cambio esté en la rama que vas a desplegar. Tu plan decide si puedes desplegar en un dominio propio, así que confirma también el plan en tu cuenta de Bubble si el sitio en vivo está en tu propio dominio.

Comprueba que funciona

• 1. Abre la URL Live en una ventana privada — Usa la dirección desplegada, que es la que usan los visitantes reales.
• 2. Busca el botón — Espera un segundo a que cargue el script; el botón del micrófono debería estar abajo a la derecha. Haz clic y permite la solicitud del micrófono del navegador.
• 3. Navega dentro de la app — Las apps de Bubble suelen cambiar de vista sin recargar la página completa. El botón debería permanecer mientras te mueves entre páginas.

Problemas frecuentes en Bubble

• Funciona en Preview pero no en Live: no desplegaste después de guardar el ajuste.
• Despliegue bloqueado: el comprobador de incidencias muestra errores en otra parte de la app; corrígelos primero, porque el despliegue requiere cero incidencias.
• Botón oculto tras un grupo flotante: un elemento de Bubble con un z-order alto o posición fija puede tapar la esquina inferior derecha. Mueve el botón de AnveVoice con &position=bottom-left o ajusta el elemento.
• Se muestra dos veces: una entrada por página duplica la de toda la app. Elimina una.
• No aparece la solicitud del micrófono: la app debe servirse por HTTPS y el navegador necesita permiso para ese dominio.

Fuentes

• Manual de Bubble: SEO: App (contenido personalizado de cabecera y cuerpo) (https://manual.bubble.io/help-guides/maintaining-an-application/seo/seo-app) — consultado el 2026-10-14
• Manual de Bubble: publicar tu app, app web (desplegar) (https://manual.bubble.io/help-guides/publishing-your-app/deploying-your-app) — consultado el 2026-10-14
• Manual de Bubble: SEO: Page (https://manual.bubble.io/help-guides/maintaining-an-application/seo/seo-page) — consultado el 2026-10-14

Relacionado

• Cómo añadir AnveVoice a una app de Softr
• Cómo agregar AnveVoice a un sitio de Webflow
• Cómo añadir AnveVoice a un sitio de Framer
• Cómo añadir AnveVoice a una app de React

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.