Add a Voice AI Agent to Craft CMS (2026 Guide)

How to add AnveVoice to a Craft CMS site

In Craft CMS, you load the script from your main layout template with the Twig {% js %} tag, which registers an external file and outputs it at the end of the body. Because Craft outputs registered assets through endBody(), your layout must call that function. Steps checked against the official documentation on 2026-10-14.

At a glance

• Where the code goes: Your base layout in the templates folder, using the Twig {% js %} tag (or a plain script tag before the closing body)
• Coding needed: One line of Twig; template access (deployed code or the host's file editor) required
• Plan limits: None from Craft: templates are your own code, though a locked-down managed host may require a deploy
• Time: About 5 minutes

Before you start

Get your embed ID from app.anvevoice.app (Free plan: $0, 50,000 tokens a month, one bot, no card). Craft has no admin box for scripts, since all front-end HTML comes from Twig templates that live in your project's templates folder. That makes the change a code deployment, so make it in version control rather than on a production server. Find your base layout. Most Craft sites have a file such as _layout.twig that other templates extend with {% extends %}. Adding the tag once there covers every template built from it. If some templates are stand-alone full HTML documents, they need the tag too.

• 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. Code: <script src="https://anvevoice.app/embed.js?embedId=YOUR_EMBED_ID" async></script>

Method 1: the Twig js tag (recommended)

Craft's Twig reference describes {% js %} as the tag that registers a JavaScript file or code block on the page. To register a file, the argument must begin with https:// or http://, or end in .js. By default the script is output at the end of the body, and you can pick a different spot with keywords such as at head or at beginBody. The with parameter adds HTML attributes to the script tag, and the page's own example uses defer; the same pattern takes async. Craft also outputs a repeated URL only once, so registering it from several templates will not duplicate it.

• 1. Open the layout — Edit templates/_layout.twig (or whichever file your pages extend).
• 2. Register the script — Add the tag anywhere in the layout, outside any conditional you do not intend. Craft will place the script tag itself. Code: {% js "https://anvevoice.app/embed.js?embedId=YOUR_EMBED_ID" with { async: true } %}
• 3. Confirm endBody is present — Craft's functions reference says endBody() should be placed right before your closing body tag, and it is the point where end-of-body scripts are output. Check that your layout contains {{ endBody() }} there. Without it the registered script has nowhere to be printed.
• 4. Deploy and clear caches — Deploy the template change. If you use Craft's template caches or a static cache plugin, clear them so existing pages pick the script up.

Method 2: a plain script tag

Because Twig passes HTML through untouched, you can also put the standard AnveVoice tag in the layout directly above the closing body tag, exactly as shown in the install step. It is simple and obvious to the next developer, but it does not benefit from Craft's de-duplication, and it will not appear on templates that do not share the layout. Choose one method per site. If you use {% html %} instead, Craft documents it as registering arbitrary HTML, placed right before the closing body tag by default.

Craft-specific points

Control by environment: if you only want the voice agent on production, wrap the tag in a condition on craft.app.config.general.devMode or an environment variable, so local and staging sites do not load it. For a single page type, put the {% js %} tag inside that page's own template instead of the layout. Headless setups: if Craft is used as a headless CMS behind a JavaScript front end, there are no Twig templates in the loop, so the tag belongs in that front end's HTML shell instead. Craft Cloud and other managed hosts deploy templates from your repository, so allow for the usual build and deploy time before checking the live site.

Check that it works

• 1. Open the live page in a private window — Load a page built from your layout.
• 2. Find the voice button — A round microphone button appears bottom-right by default. Click it, allow the microphone (HTTPS required) and ask a question.
• 3. Inspect the HTML — Search the source for anvevoice.app/embed.js. It should sit right before the closing body tag, with the async attribute.

Common problems on Craft CMS

• Nothing in the page source: endBody() is missing from the layout, or the page does not extend the layout you edited.
• Twig syntax error: the quote marks around the URL must be straight quotes and the with object needs matching braces.
• Shows on production only after a deploy: template changes live in code, not in the control panel.
• Tag appears twice: both {% js %} and a plain tag were added. Keep one.
• No microphone prompt: the site is on HTTP; use HTTPS.

Sources

• Craft CMS 5.x docs: Twig tags (js and html) (https://craftcms.com/docs/5.x/reference/twig/tags.html) — checked 2026-10-14
• Craft CMS 5.x docs: Twig functions (beginBody, endBody) (https://craftcms.com/docs/5.x/reference/twig/functions.html) — checked 2026-10-14

Related

• How to add AnveVoice to a Statamic site
• How to add AnveVoice to a Drupal site
• How to add AnveVoice to an Umbraco site
• How to add AnveVoice to a Ghost 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.