Add a Voice AI Agent to a Grav CMS Site

AnveVoice

Add a Voice AI Agent to a Grav CMS Site

Add the AnveVoice voice agent to a Grav site by editing base.html.twig in an inherited theme, using the Asset Manager or a plain tag, with cache notes.

How to add AnveVoice to a Grav site

Grav has no admin box for site-wide scripts, so the tag goes into your theme's base Twig template, either as plain HTML before the closing body tag or through Grav's Asset Manager. Do it in an inherited theme so a theme update cannot erase it. Steps checked against the official documentation on 2026-10-14.

At a glance

Where the code goes: templates/partials/base.html.twig in a child (inherited) theme
Coding needed: Light Twig editing; no PHP
Plan limits: None. Grav is open source and runs on your own hosting
Time: About 5 minutes including the child theme

How scripts reach a Grav page

Grav themes are Twig templates. Pages extend a base template, and the Asset Manager, exposed to Twig as the assets object, registers and prints CSS and JavaScript. The documented pattern from the Asset Manager guide is to register assets inside a javascripts block, print the head group in a deferred assets block, and print a group called bottom just before the closing body tag in a bottom block. That structure matters because your install line is one script. You can print it yourself or route it through assets; both are valid. Grab your embed ID from app.anvevoice.app first (the Free plan needs no card), then use the tag below with your own ID.

1. Have the tag ready — Replace YOUR_EMBED_ID with the value from your AnveVoice dashboard. Optional URL parameters such as &position=bottom-left and &theme=dark can be appended. Code: <script src="https://anvevoice.app/embed.js?embedId=YOUR_EMBED_ID" async></script>

Step 1: use an inherited theme

Grav's customisation guide recommends theme inheritance as the upgrade-safe route. Files you place in your own theme folder take precedence over the parent, and the parent theme can keep updating. If you edit Quark's templates in place, a theme update may overwrite your change.

1. Create the child theme — Make user/themes/mytheme/ with a mytheme.yaml whose theme stream lists user://themes/mytheme first and user://themes/quark second, copy the parent's blueprints.yaml, and set pages: theme: mytheme in user/config/system.yaml. The guide also shows a CLI route through the DevTools plugin.
2. Copy the base template — Copy the parent's templates/partials/base.html.twig into mytheme/templates/partials/. Because mytheme is searched before quark, your copy wins.

Step 2: add the tag

Open your copy of base.html.twig. Quark's version closes with a bottom block that prints the bottom asset group directly before the end of the body. That is a good home for the tag. Calls to assets.addJs inside an included partial may not render where you expect, because output happens in the template that prints the group. Keep registrations in the base template or its blocks.

1. Plain tag (simplest) — Inside the bottom block, after the assets.js('bottom') output, paste the AnveVoice script line exactly as shown above. Twig leaves ordinary HTML alone.
2. Or through the Asset Manager — Register the file with assets.addJs and pass loading: 'async' with position: 'after'. The guide states that the loading option only takes effect with the before or after positions, not with the default pipeline position, and shows the async output as a plain script tag. External URLs are not combined into the pipeline.
3. Save and refresh — Save the template and reload a page on your site. Template edits normally show immediately while Twig's auto_reload is on.

Limit it to some pages

Because the tag lives in Twig, you can wrap it in a condition. For example, test page.template or page.route and print the script only for matching pages. Grav page headers have no documented per-page asset setting that we could confirm, so Twig conditions are the reliable route for page-level control.

Caching and production settings

Grav caches rendered output. The performance guide explains that with the cache check method set to none, intended for production, you must clear the cache manually after changes, and that Twig keeps its own file cache controlled under the twig section of system.yaml. If you set auto_reload to false, Twig stops watching template files. If your edit does not appear, clear Grav's cache with the Grav command line tool or from the Admin plugin's tools if you run it, then reload in a private window.

Check that it works

1. View the rendered page — Open any front-end page and look for the microphone button at the bottom-right, or the position you set.
2. Inspect the script — In developer tools, confirm one request to anvevoice.app/embed.js returns successfully. A blocked request often means a Content Security Policy that does not list anvevoice.app under script sources.

Common problems

Tag disappears after updating Quark: you edited the parent theme. Move the change to the inherited theme.
Fatal error after creating the child theme: in Grav 1.7 the prefixes in the theme stream must be single-quoted, as the customisation guide warns.
Button missing only on some pages: a page uses a template that does not extend your base template, so add the tag to that template too.
Microphone request never fires: serve the site over HTTPS.

Sources

Grav docs: Asset Manager (addJs, inline JS, groups, async loading) (https://learn.getgrav.org/17/themes/asset-manager) — checked 2026-10-14
Grav docs: Theme customization and inheritance (https://learn.getgrav.org/17/themes/customization) — checked 2026-10-14
Grav docs: Performance and caching (cache clearing, Twig auto_reload) (https://learn.getgrav.org/17/advanced/performance-and-caching) — 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.