Add a Voice AI Agent to a Django Site

How to add AnveVoice to a Django project

Django templates inherit from a base template, so the AnveVoice tag belongs in base.html just above the closing body tag. If you use Django 6's built-in Content Security Policy support, also allow anvevoice.app in script-src or the browser will block the script. Steps checked against the official documentation on 2026-10-14.

At a glance

• Where the code goes: templates/base.html (project-level templates folder) or your own base template
• Coding needed: One template line; one settings change only if you enable CSP
• Plan limits: None from Django; works on any host that serves your project
• Time: About 3 minutes

Find the right base template

The Django template language is built around inheritance. As the official template reference puts it, a base skeleton defines blocks that child templates fill in, and a child begins with an {% extends %} tag, which must be the first tag in the file. Your job is to find the skeleton that every public page extends and add the AnveVoice tag there once. In a typical project that file is templates/base.html in a folder you registered under DIRS in the TEMPLATES setting, using BASE_DIR / 'templates'. Django searches DIRS first and then each installed app's templates folder (when APP_DIRS is True), using the first match. If you cannot find the file, search for the {% block content %} tag. Apps that use the admin site have a separate admin base template, which you normally do not want to touch. Django 5.2 and Django 6.0 are both covered: the template syntax below has not changed between them. The only version-dependent part is Content Security Policy, which Django added to the framework itself in 6.0.

• 1. Get your install tag — In the AnveVoice dashboard (app.anvevoice.app), create a bot for the site and copy its embed ID into the tag. Django does not interpret the query string, so no filter is needed. Code: <script src="https://anvevoice.app/embed.js?embedId=YOUR_EMBED_ID" async></script>

Method 1: add the tag to base.html

• 1. Open the base template — Edit templates/base.html, or whichever template your pages extend.
• 2. Add a dedicated block and the tag — Wrap the tag in its own block. That way a child template can change or switch it off (by overriding the block with nothing) without editing the base again. Code: {% block anvevoice %} <script src="https://anvevoice.app/embed.js?embedId=YOUR_EMBED_ID" async></script> {% endblock anvevoice %} </body> </html>
• 3. Reload — With DEBUG on, the development server picks up template edits on the next request. In production Django uses the cached template loader (it is enabled automatically unless you set the loaders option yourself), so restart your application server after deploying the change.

Method 2: show it on selected pages only

Put an empty block in base.html instead of the tag, and fill it only in templates where you want the agent. Blocks are replaced by a child's version of the same name, so the tag appears only for those pages. The block.super variable lets a child extend, rather than replace, whatever the parent placed there. Use this when a landing page or documentation page should have the voice assistant while checkout or admin pages should not.

• 1. Leave the block empty in base.html — Add {% block anvevoice %}{% endblock %} above the closing body tag.
• 2. Fill it in a child template — In pricing.html (a template that extends base.html), define the block with the tag. Code: {% extends "base.html" %} {% block anvevoice %} <script src="https://anvevoice.app/embed.js?embedId=YOUR_EMBED_ID" async></script> {% endblock %}

If you use Django's Content Security Policy (6.0 and later)

Django 6.0 includes CSP middleware. The documentation shows enabling django.middleware.csp.ContentSecurityPolicyMiddleware and defining the policy with SECURE_CSP (enforced) or SECURE_CSP_REPORT_ONLY (log only). To permit an external script host you add its origin to the script-src list. The documentation also warns against adding unsafe-inline for scripts and recommends nonces for inline scripts, which does not apply here because the AnveVoice tag is an external file. You may also need to allow the connections the voice agent opens. If the button loads but the conversation fails, open the browser console, read the blocked-by-CSP message, and add the host it names to connect-src (and any media or frame directive it mentions).

• 1. Allow the AnveVoice host — In settings.py, add the origin to script-src. Start with SECURE_CSP_REPORT_ONLY if you want to watch violations before enforcing. Code: from django.utils.csp import CSP SECURE_CSP = { "default-src": [CSP.SELF], "script-src": [CSP.SELF, "https://anvevoice.app"], }

Check that it works

• 1. Look at the rendered HTML — Load a page, view source and search for embed.js. It should appear once.
• 2. Click the microphone — The button sits at the bottom-right by default. Allow the microphone and ask a question. The site must use HTTPS (localhost is fine for development).

Common problems

• Nothing in the page: your pages extend a different template than the one you edited, or two templates with the same name exist and an app's copy wins. Check DIRS and INSTALLED_APPS order.
• Works locally, not in production: the cached loader is serving an old compiled template. Restart the server process.
• Script blocked: a CSP header is active. The console shows the directive; add https://anvevoice.app to script-src.
• {% extends %} error after editing: it was no longer the first tag in the file. Move it back to line one.

Sources

• Django docs: The Django template language (template inheritance) (https://docs.djangoproject.com/en/5.2/ref/templates/language/) — checked 2026-10-14
• Django docs: Templates API (DIRS, APP_DIRS, cached loader) (https://docs.djangoproject.com/en/5.2/ref/templates/api/) — checked 2026-10-14
• Django 6.0 docs: Content Security Policy (https://docs.djangoproject.com/en/6.0/ref/csp/) — checked 2026-10-14

Related

• How to add AnveVoice to a Flask application
• How to add AnveVoice to a Laravel application
• How to add AnveVoice to a Ruby on Rails app
• How to add AnveVoice to a WordPress site

Try AnveVoice on your site

Free plan: $0, 50,000 tokens a month, no card. Get your embed ID in the dashboard, then paste one tag.