Add a Voice AI Agent to Magento (Adobe Commerce)

AnveVoice

Add a Voice AI Agent to Magento (Adobe Commerce)

Add the AnveVoice voice agent to Magento or Adobe Commerce from the admin: the Footer Miscellaneous HTML field, CSP allowlisting, cache refresh and checks.

How to add AnveVoice to Magento and Adobe Commerce

Magento and Adobe Commerce have a built-in place for third-party scripts: the Design Configuration screen in the Admin. Paste the AnveVoice tag into the Footer's Miscellaneous HTML field, save, refresh the cache, and allow anvevoice.app in your Content Security Policy so the script is not blocked. Steps checked against the official documentation on 2026-10-14.

At a glance

Where the code goes: Content > Design > Configuration > your store view > Other Settings > Footer > Miscellaneous HTML
Coding needed: None for the paste itself; a small custom module is needed if you must allowlist the domain in a Content Security Policy
Scope: Set per store view, so multi-store setups need one entry for each storefront that should show the voice button
Time: About 5 minutes, plus a cache refresh

Before you start

Create your AnveVoice bot first. The Free plan costs $0, includes 50,000 tokens a month and one bot, and needs no card; sign up at app.anvevoice.app and copy the embed ID from the dashboard. You also need an Admin user who is allowed to edit the Content > Design configuration. Magento Open Source and Adobe Commerce share the same Design Configuration screen. If your storefront is headless (for example a custom React front end that talks to Magento only through its APIs), the fields below will not affect it, because the HTML is produced by that other front end. In that case put the tag in the HTML shell of the front end itself.

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 Footer's Miscellaneous HTML field (recommended)

Adobe's admin guide describes the Footer section of the design configuration as the place for copyright text and for scripts that must sit just before the closing body tag. The field is labelled Miscellaneous HTML. Loading the voice agent there keeps it out of the head and does not delay the first paint of your catalogue pages.

1. Open the design configuration — In the Admin sidebar choose Content, then Design > Configuration. The grid lists rows for the global scope, each website and each store view.
2. Edit the right scope — Find the store view you want in the grid and click Edit in the Action column. Every field in the HTML Head and Footer sections is stored per store view, so repeat this for each storefront that should show the assistant.
3. Expand Footer — Under Other Settings, expand the Footer section. Leave the Copyright text as it is.
4. Paste the tag — Paste the AnveVoice tag into Miscellaneous HTML. If other scripts are already in the box, add yours on its own line below them.
5. Save and refresh the cache — Click Save Configuration. Then go to System > Tools > Cache Management, select the Configuration and Page Cache types (plus Layouts and Blocks HTML if prompted), choose Refresh in the Actions menu and click Submit.

Method 2: the HTML Head field

The same screen has an HTML Head section with a Scripts and Style Sheets box. Adobe's guide says content in that box is inserted before the closing head tag. It will work for the AnveVoice tag because the script is asynchronous, but the footer field is the cleaner home for a widget that is not needed to render the page. Use the head field only if your theme or a third-party extension already overrides the footer area, or if you keep all tracking and widget code in one place by policy.

Content Security Policy: the step that catches most stores

Adobe's documentation states that JavaScript added through Scripts and Style Sheets or Miscellaneous HTML must be allowed by the Content Security Policy, otherwise it will not run on checkout pages. Adobe's troubleshooting article adds that from version 2.4.7 payment pages run CSP in restrict mode by default, while other pages run in report-only mode. In report-only mode the script still loads and the browser merely logs a violation; in restrict mode a script from a host that is not on the allowlist is blocked. To allow the AnveVoice host, a developer adds anvevoice.app to the script-src directive in a custom module's csp_whitelist.xml, following Adobe's developer documentation on content security policies. Whether the voice assistant needs any other domains on your store is easiest to confirm empirically: open the browser console on a checkout page and add whatever host it reports as blocked. If you do not want the assistant on checkout at all, you can skip the allowlisting and accept that the button simply will not appear on payment pages.

Check that it works

1. Reload in a private window — Open a category page on your storefront in a private window so that neither admin sessions nor browser caching interfere.
2. Look for the microphone button — A round microphone button appears bottom-right unless you set &position=bottom-left. Click it, grant microphone access and ask about a product. The store must be served over HTTPS for the microphone to work.
3. Test a checkout page — Repeat on the cart and checkout. If the button is missing only there, the cause is almost always the Content Security Policy, and the console will show a refused-script message naming the blocked host.

Common problems on Magento

Nothing changed after saving: refresh the Configuration and Page Cache types in Cache Management. If the storefront still looks the same, use Flush JavaScript/CSS Cache and clear your browser cache too.
Button on the home page but not in checkout: the Content Security Policy is blocking anvevoice.app on payment pages; allowlist it in a module's csp_whitelist.xml.
Button only on one store view: the fields are scoped per store view, so add the tag to every store view that needs it.
Tag inside the theme's .phtml files disappears after an upgrade: keep the tag in the Admin field rather than editing vendor theme templates.

Sources

Adobe Commerce Admin guide: Page setup (HTML Head and Footer design configuration) (https://experienceleague.adobe.com/en/docs/commerce-admin/content-design/design/page-setup) — checked 2026-10-14
Adobe Commerce Admin guide: Cache management (https://experienceleague.adobe.com/en/docs/commerce-admin/systems/tools/cache-management) — checked 2026-10-14
Adobe Commerce troubleshooting: storefront checkout page in CSP restricted mode (https://experienceleague.adobe.com/en/docs/commerce-knowledge-base/kb/troubleshooting/payments/storefront-checkout-page-in-csp-restricted-mode) — 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.