Add a Voice AI Agent to PrestaShop (2026 Guide)
Add the AnveVoice voice agent to a PrestaShop store with a remote asset in theme.yml or a script in the layout template, plus cache clearing and checks.
How to add AnveVoice to a PrestaShop store
PrestaShop loads front-office JavaScript through its asset system, so the tidiest install is a remote asset declared in your theme's theme.yml with the async attribute. The alternative is pasting the tag into the theme's layout template. Either way, clear the cache afterwards. Steps checked against the official documentation on 2026-10-14.
At a glance
- Where the code goes: themes/<your-theme>/config/theme.yml (assets > js), or the layout template before the closing body tag
- Coding needed: A few lines of YAML or one pasted line in a .tpl file; back-office access plus file access to the theme
- Plan limits: None from PrestaShop: the software is self-hosted, so you control the theme files
- Time: About 10 minutes including cache clearing
Before you start
You need an AnveVoice embed ID (Free plan, $0, 50,000 tokens a month, one bot, no card; sign up at app.anvevoice.app) and a way to edit files in your theme folder, either over FTP/SFTP, SSH or your host's file manager. PrestaShop has no built-in back-office box for custom scripts, so this guide works at theme level. Work in a child theme or keep a note of your change. If you edit the parent theme directly, a theme update can overwrite the edit and the voice button will quietly vanish.
- 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. PrestaShop's asset system wants only the URL, so keep that part handy as well: https://anvevoice.app/embed.js?embedId=YOUR_EMBED_ID. Code: <script src="https://anvevoice.app/embed.js?embedId=YOUR_EMBED_ID" async></script>
Method 1: declare a remote asset in theme.yml (recommended)
PrestaShop's theme documentation describes an assets section in config/theme.yml where JavaScript files are registered. For files on another host it tells you to use server: remote, and to set the loading attribute with the singular key attribute: async in theme.yml. Scripts are placed before the closing body tag by default, which suits a widget. Lower priority numbers load earlier, and the default is 50.
- 1. Open the theme configuration — Edit themes/<your-theme>/config/theme.yml in your editor or file manager.
- 2. Add the remote script — Under assets, add a js entry that applies to all pages. Keep the existing entries and indentation intact. Code: assets: js: all: - id: anvevoice-embed path: https://anvevoice.app/embed.js?embedId=YOUR_EMBED_ID server: remote priority: 300 attribute: async
- 3. Clear the cache — In the back office open Advanced Parameters > Performance and click Clear cache. Theme asset changes are not picked up until the cache is rebuilt.
- 4. Reload the storefront — Open a product page in a private window. The script is injected through the theme's javascript include, so any layout that your theme builds from the standard layout files will carry it.
Method 2: paste the tag into the layout template
If you prefer a literal script tag, PrestaShop's hook reference says displayBeforeBodyClosingTag is rendered from the theme's layout file, templates/layouts/layout-both-columns.tpl in both the Classic and Hummingbird themes, and is meant for content that should load at the very end of the page. You can place the tag directly beside that hook call. Smarty, the template language, treats curly braces as its own syntax. The AnveVoice tag contains no braces, so it can be pasted as it is and does not need a literal block. Other layouts in the same theme normally extend layout-both-columns.tpl, but check that yours do; a custom theme that does not call the hook will not output anything there.
- 1. Open the layout file — Edit themes/<your-theme>/templates/layouts/layout-both-columns.tpl.
- 2. Paste the tag — Add the AnveVoice tag directly under the line that contains {hook h='displayBeforeBodyClosingTag'} and above the closing body tag.
- 3. Clear the cache — Advanced Parameters > Performance > Clear cache, then reload the storefront.
Check that it works
- 1. Use a private window — A guest session shows what shoppers see and avoids the back office's own caching.
- 2. Find the button — A round microphone button should sit bottom-right (or bottom-left if you set position). Click it, allow the microphone and ask a question about a product.
- 3. View the page source — Search the source for anvevoice.app/embed.js. If it is absent, the cache has not rebuilt or the page uses a layout that does not include your change.
Common problems on PrestaShop
- Asset not output: the theme.yml indentation is wrong or the cache was not cleared. YAML is strict about spaces, so compare with the neighbouring entries.
- async ignored: theme.yml uses the singular key attribute, while the PHP registerJavascript call uses the plural attributes. Mixing them up is a common typo.
- Button vanishes after a theme update: the change lived in the parent theme. Move it into a child theme.
- Not on checkout: some checkout pages use a simplified layout. If you need it there, confirm that layout also renders the standard javascript include.
- Microphone prompt does not appear: the shop must be served over HTTPS.
Sources
- PrestaShop DevDocs: theme asset management (remote JavaScript, attributes, position) (https://devdocs.prestashop-project.org/9/themes/concepts/asset-management/) — checked 2026-10-14
- PrestaShop DevDocs: displayBeforeBodyClosingTag hook (https://devdocs.prestashop-project.org/9/modules/concepts/hooks/list-of-hooks/displaybeforebodyclosingtag/) — checked 2026-10-14
Related
- How to add AnveVoice to an OpenCart store
- How to add AnveVoice to Magento and Adobe Commerce
- How to add AnveVoice to a WooCommerce store
- How to add AnveVoice to a BigCommerce store
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.