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

Cómo añadir AnveVoice a una aplicación de Flask

Flask renderiza las páginas con Jinja, y una plantilla base con bloques es la forma estándar de compartir un layout. Pon la etiqueta de AnveVoice en esa plantilla base, justo antes de la etiqueta de cierre body, y cada página que la extienda tendrá el botón de voz. Pasos comprobados con la documentación oficial el 2026-10-14.

En resumen

• Dónde va el código: templates/layout.html (o base.html), la plantilla que extienden tus páginas
• Código necesario: Una línea de Jinja; sin cambios en Python ni extensiones
• Límites del plan: Ninguno por parte de Flask; funciona en cualquier host WSGI (Gunicorn, uWSGI, PythonAnywhere, Render y similares)
• Tiempo: Unos 3 minutos

Dónde busca Flask tu layout

Flask usa el motor de plantillas Jinja, y el patrón oficial de herencia de plantillas construye cada página a partir de un único esqueleto, normalmente llamado layout.html. El esqueleto define bloques (head, title, content y footer en el ejemplo de la documentación), y las páginas hijas empiezan con {% extends “layout.html” %}. Flask encuentra estos archivos en la carpeta templates junto al módulo de tu aplicación, o dentro de la carpeta templates propia de un blueprint. Así que el trabajo consiste en abrir el esqueleto y añadir una línea. No se registra nada en Python. La documentación de plantillas de Flask confirma que el autoescapado está activo para las plantillas .html, .htm, .xml y .xhtml, pero eso solo afecta a las variables; una etiqueta script escrita literalmente en la plantilla se muestra exactamente como está escrita. Si tu app devuelve HTML desde render_template_string o desde cadenas simples en una vista, no hay archivo de plantilla que editar. Añade la etiqueta a la cadena o, mejor aún, mueve ese marcado a una plantilla para que haya un único lugar que mantener.

• 1. Obtén tu etiqueta de instalación — En el panel de AnveVoice, en app.anvevoice.app, crea un bot para tu sitio y copia el ID de incrustación en la URL. El botón predeterminado aparece abajo a la derecha; añade &position=bottom-left para moverlo. <script src="https://anvevoice.app/embed.js?embedId=YOUR_EMBED_ID" async></script>

Método 1: colócala en la plantilla base

• 1. Abre templates/layout.html — Usa el archivo que extienden tus páginas. Las páginas de blueprints que extienden otra base necesitan la etiqueta también en esa base.
• 2. Añade la etiqueta con su propio bloque — Un bloque dedicado facilita desactivar más adelante el agente de voz en páginas concretas, sobrescribiendo el bloque sin contenido. {% block voice_agent %} <script src="https://anvevoice.app/embed.js?embedId=YOUR_EMBED_ID" async></script> {% endblock %} </body> </html>
• 3. Reinicia si hace falta — El servidor de desarrollo de Flask con debug activado se recarga al detectar cambios. Con Gunicorn u otro servidor de producción, reinicia los workers para que carguen la plantilla actualizada.

Método 2: añádela solo en algunas páginas

Deja el bloque vacío en la base y rellénalo desde las páginas que deban tener el agente. La página de patrones de Flask también muestra super() para añadir contenido a un bloque sin reemplazar el del padre, lo cual resulta útil si la base ya coloca algo en ese punto.

• 1. Declara un bloque vacío en layout.html — Usa {% block voice_agent %}{% endblock %} encima de la etiqueta de cierre body.
• 2. Rellena el bloque en una página — En templates/pricing.html: {% extends "layout.html" %} {% block voice_agent %} <script src="https://anvevoice.app/embed.js?embedId=YOUR_EMBED_ID" async></script> {% endblock %}

Particularidades de Flask

• Archivos estáticos frente a un script remoto: la carpeta static de Flask y url_for('static', ...) son para tus propios archivos. El script de AnveVoice se carga desde anvevoice.app, así que usa la dirección completa y no copies embed.js en static; una copia local no recibiría actualizaciones.
• Cabeceras de seguridad: Flask no envía por sí mismo ninguna Content Security Policy. Si añades una (en un manejador after_request o mediante una extensión), incluye https://anvevoice.app en script-src; si no, el navegador bloquea la etiqueta y la consola muestra una infracción de CSP.
• Detrás de un proxy: si Nginx o un CDN almacenan HTML completo en caché, purgalo después de desplegar, o seguirá sirviéndose la página antigua sin la etiqueta.
• Espacios y llaves de Jinja: la etiqueta no contiene dobles llaves, así que no hay nada que escapar ni hace falta un bloque raw.
• ID de incrustación por entorno: si lo guardas en la configuración, pásalo a la plantilla con un context processor y escribe ...embedId={{ anvevoice_embed_id }} en la URL.

Comprueba que funciona

• 1. Revisa la página renderizada — Abre una página en una ventana privada, ve el código fuente y confirma que embed.js aparece una vez, cerca del final del body.
• 2. Prueba una conversación — Haz clic en el botón redondo del micrófono, concede el permiso del micrófono (la página debe usar HTTPS o localhost) y haz una pregunta.

Problemas frecuentes

• El cambio en la plantilla no tiene efecto: el proceso sirve una plantilla en caché o una carpeta de plantillas distinta. Reinicia y confirma qué layout extiende la página que falla.
• TemplateSyntaxError tras editar: un bloque se cerró con la etiqueta equivocada. Revisa que cada {% block %} tenga su {% endblock %}.
• Falta el botón en un blueprint: ese blueprint tiene su propia plantilla base.
• La consola informa de una infracción de CSP: permite el host en script-src.

Fuentes

• Documentación de Flask 3.1: herencia de plantillas (https://flask.palletsprojects.com/en/stable/patterns/templateinheritance/) — consultado el 2026-10-14
• Documentación de Flask 3.1: plantillas (configuración de Jinja, autoescapado) (https://flask.palletsprojects.com/en/stable/templating/) — consultado el 2026-10-14

Relacionado

• Cómo añadir AnveVoice a un proyecto de Django
• Cómo añadir AnveVoice a un sitio de Express (Node.js)
• Cómo añadir AnveVoice a una aplicación de Ruby on Rails
• Cómo añadir AnveVoice a una aplicación Laravel

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.