Add a Voice AI Agent to Drupal (2026 Guide)

AnveVoice

Add a Voice AI Agent to Drupal (2026 Guide)

Add the AnveVoice voice agent to Drupal 10 or 11 with a theme library that loads an external script, async attribute and cache rebuild included.

How to add AnveVoice to a Drupal site

Drupal does not let you paste a script into a settings box. Its documented way to load an external script is a library: declare the AnveVoice URL in your theme's libraries.yml with type external, then attach it from the theme's info.yml so it loads on every page. Steps checked against the official documentation on 2026-10-14.

At a glance

Where the code goes: THEME.libraries.yml (declaration) and THEME.info.yml (global attach) in a custom theme or sub-theme
Coding needed: Two small YAML edits and a cache rebuild; access to the theme folder required
Plan limits: None: self-hosted Drupal lets you edit your own theme. Hosted Drupal platforms may restrict file access
Time: About 10 minutes

Before you start

You need an AnveVoice embed ID (Free plan: $0, 50,000 tokens a month, one bot; sign up at app.anvevoice.app) and the ability to edit files in your active theme. Do not edit a core or contributed theme directly, because updating it will overwrite your change. Use a custom theme or a sub-theme of the one you run. In the examples, mytheme stands for the machine name of that theme. Drupal deliberately loads nothing that you have not requested, which is why a plain script tag pasted into a block or a node body is unreliable. Text formats such as Basic HTML strip script tags, and even permissive formats are a poor place for site-wide code. The library system is the documented, update-proof way.

1. Copy your install tag — Replace YOUR_EMBED_ID with the ID shown in your AnveVoice dashboard (app.anvevoice.app). Optional URL parameters are &position=bottom-left and &theme=dark. For Drupal you only need the URL part, https://anvevoice.app/embed.js?embedId=YOUR_EMBED_ID, which goes into a YAML file. Code: <script src="https://anvevoice.app/embed.js?embedId=YOUR_EMBED_ID" async></script>

Method 1: declare an external library (recommended)

Drupal.org's theming documentation says all asset libraries are defined in a *.libraries.yml file in the theme folder, that an external file uses its full URL as the key with type: external, and that attributes such as async are rendered as bare HTML attributes. By default JavaScript is added in the footer, which is where a widget belongs. Setting header: true would move it to the head, so leave that out.

1. Define the library — Open mytheme.libraries.yml (create it if the theme has none) and add an entry. Quote the URL because it contains a question mark and an equals sign. Code: anvevoice: version: 1.0 js: "https://anvevoice.app/embed.js?embedId=YOUR_EMBED_ID": type: external attributes: async: true
2. Attach it to every page — Open mytheme.info.yml and add the library under the libraries key. Merge it with any entries already there. Code: libraries: - mytheme/anvevoice
3. Rebuild caches — In the admin go to Configuration > Development > Performance and click Clear all caches (or run drush cr). Library definitions are cached, so the new asset appears only after a rebuild.
4. Reload the site — Open the front end in a private window and look for the microphone button.

Showing it on selected pages only

Attaching through info.yml puts the script on every page that uses the theme. If you only want the voice agent on, say, your support or pricing pages, skip the info.yml entry and attach the library from a template instead. Drupal's documentation names the attach_library() Twig function for this: add {{ attach_library('mytheme/anvevoice') }} to the Twig template of that page type, such as a node template for one content type. A preprocess function with the #attached render property does the same job in PHP.

Method 2: a module that injects scripts

The contributed Asset Injector module lets administrators inject CSS and JavaScript based on configurable rules without editing a theme. Its project page lists release 8.x-2.21 for Drupal 10.3 and 11, marks it as maintenance-fixes-only and shows it covered by the Security Team's advisory policy. Its JavaScript entries hold script code rather than a script tag, so loading an external file through it means writing a few lines of loader code. For a one-line install that is more work than the library method, so use it only when you cannot touch the theme.

Check that it works

1. Use a private window — Log out or use a private window; some caches serve different markup to administrators.
2. Look for the button and test the microphone — The round button appears bottom-right by default. Click it, allow the microphone (HTTPS required) and ask a question.
3. Inspect the source if absent — Search the rendered HTML for anvevoice.app/embed.js. If it is missing, check that the theme is the active one, the YAML indentation is right and caches were cleared.

Common problems on Drupal

Script not output: the library is declared but never attached. Confirm mytheme/anvevoice appears under libraries in the info.yml of the active theme.
YAML parse error after editing: a tab or wrong indentation. YAML needs spaces, and the quoted URL key must be on its own line.
Works for admins, not visitors: Drupal's page cache or a CDN is serving the old page. Clear all caches and purge the CDN.
Lost after switching themes: libraries attached in one theme's info.yml apply only to that theme. Add the entry to the new theme too.
Pasted into a block and nothing happens: the text format removed the tag. Use the library method.

Sources

Drupal.org: adding assets (CSS, JS) to a Drupal theme via *.libraries.yml (https://www.drupal.org/docs/theming-drupal/adding-assets-css-js-to-a-drupal-theme-via-librariesyml) — checked 2026-10-14
Drupal.org: Asset Injector project page (https://www.drupal.org/project/asset_injector) — checked 2026-10-14

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.