Add a Voice AI Agent to Your Framer Site (2026)

AnveVoice

Add a Voice AI Agent to Your Framer Site (2026)

Add the AnveVoice voice agent to Framer with Site Settings, Custom Code: placement options, run-once setting, paid-plan note and publishing.

How to add AnveVoice to a Framer site

In Framer open Site Settings, choose the Custom Code tab, add a script, paste the AnveVoice tag, choose a placement at the end of the body and publish. Framer does not run custom code on the canvas or in the editor preview, so test on the published site. Steps checked against the official documentation on 2026-10-14.

At a glance

Where the code goes: Site Settings, Custom Code tab, Add Script
Placement choices: Start or end of the head, start or end of the body
Plan limit: Framer's help indicates custom code needs a paid plan; confirm in your Plans tab
Run setting: Run once, or on every page visit; once is enough
Goes live: After you publish the site

How Framer's Custom Code works

Framer treats an injected script as a named item with its own settings, instead of one big text box. Each script you add has a name, a placement, an optional list of pages and a rule for how often it runs. That structure is useful, because you can switch the AnveVoice voice agent on for the whole site or for a few pages without editing a shared block of code. Framer's help article for the feature lists analytics and marketing tags, chat and support widgets, custom CSS and JavaScript, and structured data as typical uses. A voice widget falls in the same group as a chat widget. Create your embed ID first at app.anvevoice.app; the Free plan is $0, with 50,000 tokens a month and no card.

1. Copy the tag — Use your own embed ID in place of YOUR_EMBED_ID. Optional URL parameters: &position=bottom-left or &theme=dark. Code: <script src="https://anvevoice.app/embed.js?embedId=YOUR_EMBED_ID" async></script>

Add the script

1. Open settings — In your Framer project open Project Settings (Site Settings in some versions) and select the Custom Code tab in the left sidebar.
2. Add a script — If no code exists yet, click Add Script. Otherwise click the plus icon. Give the script a name you will recognise, such as AnveVoice.
3. Choose the placement — Pick the end of the body. Framer offers the start or end of the head and the start or end of the body, and the right position depends on the script. For a widget, the end of the body keeps it from competing with your content.
4. Choose the pages — Leave the pages list empty for the whole site, or select specific pages. For a CMS page you can also add structured data, which is not needed here.
5. Choose how often it runs — Framer gives Once, which runs a single time such as for adding event listeners, and Run on every page visit. AnveVoice installs itself once and ignores a second copy, so Once is the sensible option.
6. Publish — Publish your site. Framer states that Custom Code does not load in the canvas preview, so the change is only visible on the published page.

A page, a section, or the whole site

Site-wide is the simplest. Framer also lets a single page carry its own Custom Code section: open that page's settings and add the script there instead of in the global tab, so that it does not load on pages that do not need it. A page-level setting overrides what the site level sets for the same item, which helps if you want a different position for AnveVoice on one landing page. Framer's own lesson suggests thinking before you add any third-party script: confirm its source, its required placement and any consent requirements, decide which pages should run it, and remove code the site no longer uses because extra scripts can affect privacy and performance.

Framer-specific points to know

Paid plan. Framer's help describes custom code as available with a paid plan. Framer has recently changed its plan lineup, so open your Plans tab and look for custom code before building around it.
No validation. Framer does not check what you paste. A typo can break a script silently, so copy the tag exactly and test the live page.
Allowed tags. Framer supports HTML, CSS and JavaScript, with link, script, meta and style tags; it cannot run server languages. The AnveVoice tag is a plain script tag, which is allowed.
Consent. If your site shows a cookie banner, decide whether the voice agent should load before or after consent and configure that in your banner tool.
Preview is not proof. The canvas and in-editor preview do not run the script, so a missing button there is expected.

Check it works

1. Open the live URL — Use a private window on your published domain, or on the framer.website address while testing.
2. Look for the microphone — It appears at the bottom-right unless you set bottom-left.
3. Check the console if it is missing — Framer's lesson recommends opening the browser console on the live page. A blocked request or a typo in the URL will show up there.

Common problems

Nothing after saving: you have not published, or you are viewing the preview.
No Custom Code tab content or it prompts for an upgrade: the project is on a plan without custom code.
Only on one page: the script was scoped to specific pages; clear the page list for site-wide.
It runs twice: the script is set to run on every visit and a duplicate exists. AnveVoice ignores the second copy, but remove duplicates for tidiness.

Sources

Framer Help: How to add custom code (https://www.framer.com/help/articles/how-to-add-custom-code/) — checked 2026-10-14
Framer Learn: Custom Code (site-wide and page-level) (https://www.framer.com/learn/custom-code/) — 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.