Añade un agente de voz con IA a un sitio de Django

Cómo añadir AnveVoice a un proyecto de Django

Las plantillas de Django heredan de una plantilla base, así que la etiqueta de AnveVoice va en base.html, justo encima de la etiqueta de cierre body. Si usas el soporte integrado de Content Security Policy de Django 6, permite también anvevoice.app en script-src, o el navegador bloqueará el script. Pasos comprobados con la documentación oficial el 2026-10-14.

En resumen

• Dónde va el código: templates/base.html (carpeta de plantillas del proyecto) o tu propia plantilla base
• Código necesario: Una línea de plantilla; un único cambio de configuración solo si activas CSP
• Límites del plan: Ninguno por parte de Django; funciona en cualquier host que sirva tu proyecto
• Tiempo: Unos 3 minutos

Encuentra la plantilla base correcta

El lenguaje de plantillas de Django se basa en la herencia. Como dice la referencia oficial de plantillas, una plantilla base define bloques que las plantillas hijas rellenan, y una hija empieza con una etiqueta {% extends %}, que debe ser la primera etiqueta del archivo. Tu tarea es localizar la plantilla base que extienden todas las páginas públicas y añadir ahí la etiqueta de AnveVoice una sola vez. En un proyecto típico, ese archivo es templates/base.html, en una carpeta que registraste en DIRS dentro de la configuración TEMPLATES, usando BASE_DIR / 'templates'. Django busca primero en DIRS y después en la carpeta templates de cada app instalada (cuando APP_DIRS es True), y usa la primera coincidencia. Si no encuentras el archivo, busca la etiqueta {% block content %}. Las apps que usan el sitio de administración tienen una plantilla base de administración aparte, que normalmente no conviene tocar. Se cubren Django 5.2 y Django 6.0: la sintaxis de plantillas que aparece abajo no ha cambiado entre ambas. La única parte que depende de la versión es Content Security Policy, que Django incorporó al propio framework en la versión 6.0.

• 1. Obtén tu etiqueta de instalación — En el panel de AnveVoice (app.anvevoice.app), crea un bot para el sitio y copia su ID de incrustación en la etiqueta. Django no interpreta la cadena de consulta, así que no hace falta ningún filtro. <script src="https://anvevoice.app/embed.js?embedId=YOUR_EMBED_ID" async></script>

Método 1: añade la etiqueta a base.html

• 1. Abre la plantilla base — Edita templates/base.html, o la plantilla que extiendan tus páginas.
• 2. Añade un bloque propio y la etiqueta — Envuelve la etiqueta en su propio bloque. Así una plantilla hija puede cambiarla o desactivarla (sobrescribiendo el bloque sin contenido) sin volver a editar la base. {% block anvevoice %} <script src="https://anvevoice.app/embed.js?embedId=YOUR_EMBED_ID" async></script> {% endblock anvevoice %} </body> </html>
• 3. Recarga — Con DEBUG activado, el servidor de desarrollo detecta los cambios de plantilla en la siguiente petición. En producción, Django usa el cargador de plantillas con caché (se activa automáticamente, salvo que definas tú la opción loaders), así que reinicia el proceso de tu aplicación después de desplegar el cambio.

Método 2: mostrarlo solo en páginas concretas

Coloca un bloque vacío en base.html en lugar de la etiqueta, y rellénalo solo en las plantillas donde quieras el agente. Los bloques son reemplazados por la versión de una plantilla hija con el mismo nombre, así que la etiqueta aparece solo en esas páginas. La variable block.super permite a una hija extender, en lugar de reemplazar, lo que la plantilla padre haya colocado allí. Úsalo cuando una página de inicio o de documentación debe tener el asistente de voz, mientras que las páginas de pago o de administración no.

• 1. Deja el bloque vacío en base.html — Añade {% block anvevoice %}{% endblock %} encima de la etiqueta de cierre body.
• 2. Rellénalo en una plantilla hija — En pricing.html (una plantilla que extiende base.html), define el bloque con la etiqueta. {% extends "base.html" %} {% block anvevoice %} <script src="https://anvevoice.app/embed.js?embedId=YOUR_EMBED_ID" async></script> {% endblock %}

Si usas Content Security Policy de Django (6.0 y posteriores)

Django 6.0 incluye middleware de CSP. La documentación muestra cómo activar django.middleware.csp.ContentSecurityPolicyMiddleware y definir la política con SECURE_CSP (aplicada) o SECURE_CSP_REPORT_ONLY (solo registro). Para permitir un host de scripts externo, añades su origen a la lista script-src. La documentación también advierte contra añadir unsafe-inline para los scripts y recomienda nonces para los scripts inline, lo cual no aplica aquí porque la etiqueta de AnveVoice es un archivo externo. También es posible que tengas que permitir las conexiones que abre el agente de voz. Si el botón carga pero la conversación falla, abre la consola del navegador, lee el mensaje de bloqueo por CSP y añade a connect-src el host que indique (y a cualquier directiva de media o de frame que mencione).

• 1. Permite el host de AnveVoice — En settings.py, añade el origen a script-src. Empieza con SECURE_CSP_REPORT_ONLY si quieres observar las infracciones antes de aplicar la política. from django.utils.csp import CSP SECURE_CSP = { "default-src": [CSP.SELF], "script-src": [CSP.SELF, "https://anvevoice.app"], }

Comprueba que funciona

• 1. Revisa el HTML generado — Carga una página, ve el código fuente y busca embed.js. Debería aparecer una sola vez.
• 2. Haz clic en el micrófono — El botón está abajo a la derecha de forma predeterminada. Permite el micrófono y haz una pregunta. El sitio debe usar HTTPS (localhost sirve para desarrollo).

Problemas frecuentes

• Nada en la página: tus páginas extienden una plantilla distinta a la que editaste, o existen dos plantillas con el mismo nombre y gana la copia de una app. Revisa DIRS y el orden de INSTALLED_APPS.
• Funciona en local pero no en producción: el cargador con caché sirve una plantilla compilada antigua. Reinicia el proceso del servidor.
• Script bloqueado: hay una cabecera CSP activa. La consola muestra la directiva; añade https://anvevoice.app a script-src.
• Error de {% extends %} tras editar: dejó de ser la primera etiqueta del archivo. Muévela de nuevo a la primera línea.

Fuentes

• Documentación de Django: el lenguaje de plantillas (herencia de plantillas) (https://docs.djangoproject.com/en/5.2/ref/templates/language/) — consultado el 2026-10-14
• Documentación de Django: API de plantillas (DIRS, APP_DIRS, cargador con caché) (https://docs.djangoproject.com/en/5.2/ref/templates/api/) — consultado el 2026-10-14
• Documentación de Django 6.0: Content Security Policy (https://docs.djangoproject.com/en/6.0/ref/csp/) — 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 Laravel
• Cómo añadir AnveVoice a una aplicación de Ruby on Rails
• Cómo añadir AnveVoice a un sitio WordPress

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.