Add a Voice AI Agent to a Bubble App (2026 Guide)

How to add AnveVoice to a Bubble app

Bubble keeps app-wide scripts in Settings → SEO / Meta tags, in the custom header and body content fields. Paste the AnveVoice tag into the body field, then deploy to Live, because the development version and the live version are different environments with their own settings. Steps checked against the official documentation on 2026-10-14.

At a glance

• Where the code goes: Settings → SEO / Meta tags → custom header and body content (all pages); or each page's own SEO settings
• Coding needed: None; no plugin or workflow needed, just paste one tag
• Plan limits: Bubble's SEO manual states none for this field; deploying to Live and a custom domain are plan-dependent on your account
• Time: About 3 minutes including the deploy

Before you start

Bubble apps are real applications, not static pages, so the way the tag reaches the browser is worth understanding. Bubble inserts anything you place in its header field between the head tags of every page, and anything in its body field between the body tags of every page. That is exactly what a third-party script needs. Get the embed ID from app.anvevoice.app first. The Free AnveVoice plan includes one bot and 50,000 tokens a month, which is ample for testing inside a Bubble app.

• 1. Copy the AnveVoice tag — Use this line with your own ID in place of YOUR_EMBED_ID. To pin the button to the left or switch to a dark panel, add &position=bottom-left or &theme=dark to the URL. Code: <script src="https://anvevoice.app/embed.js?embedId=YOUR_EMBED_ID" async></script>

Add it app-wide

Bubble's manual page SEO: App states that the app's SEO settings are found under Settings, in the SEO / Meta tags tab, and describes a section called Custom header and body content. It explains that script and meta tags in the header go between the head tags on every page, while the body field's scripts are positioned between the body tags across all pages. Bubble tells users to refresh after a deployment. Visitors with the app already open will see a notice to refresh the tab; schedule the deploy for a quiet period if your app is busy.

• 1. Open the editor settings — In the Bubble editor click Settings in the left-hand tab bar and open the SEO / Meta tags tab.
• 2. Find the custom header and body fields — Scroll to the custom content fields. One is for the header and one for the body.
• 3. Paste the tag into the body field — Place the script line in the body field. You can leave the header field empty; AnveVoice does not need a head tag.
• 4. Preview, then deploy — Settings you change in the development version stay there until you deploy. Bubble's deployment guide says the issue checker must show no issues before you can deploy; click the version control button at the top right, add a short description such as Add AnveVoice voice agent, and deploy to Live.

Per-page scripts and why app-wide is simpler

Bubble's manual says that content added to the app-level field is added to all pages, and that you can also add it to pages one by one in each page's own settings. For a voice agent that should talk about the whole app, a single app-wide entry is enough. Per-page entries are for a script that should only exist on, say, a public pricing page; if you use both, remember the button can then load twice, although AnveVoice ignores a second copy on the same page. One more Bubble-specific habit: keep tags that really are page-specific, like structured data, out of the app-wide field. Bubble applies the app-level values to every page, so identical per-page markup everywhere is not what you want. The AnveVoice tag is the same on every page, which is why it belongs at app level.

Development versus Live

This is where Bubble catches people. The editor's Preview runs the development version; your public URL runs the Live version. Bubble describes deploying as transferring the current development version to the Live environment. If you paste the tag and test on the live domain without deploying, nothing will have changed. If you use branches through Bubble's version control, make sure the change is on the branch you are about to deploy. Your plan decides whether you can deploy to a custom domain, so also confirm the plan in your Bubble account if the live site is on your own domain.

Check that it works

• 1. Open the Live URL in a private window — Use the deployed address, which is the one real visitors use.
• 2. Look for the button — Wait a second for the script to load; the microphone button should sit bottom-right. Click it and allow the browser microphone prompt.
• 3. Navigate inside the app — Bubble apps often change views without a full reload. The button should persist while you move between pages.

Common problems on Bubble

• Works in Preview, missing on Live: you did not deploy after saving the setting.
• Deploy blocked: the issue checker reports errors elsewhere in the app; clear them first, because deployment requires zero issues.
• Button hidden behind a floating group: a Bubble element with a high z-order or fixed position can cover the bottom-right corner. Move the AnveVoice button with &position=bottom-left or adjust the element.
• Showing twice: a page-level entry duplicates the app-wide one. Remove one.
• No microphone prompt: the app must be served over HTTPS and the browser needs permission for that domain.

Sources

• Bubble Manual: SEO: App (custom header and body content) (https://manual.bubble.io/help-guides/maintaining-an-application/seo/seo-app) — checked 2026-10-14
• Bubble Manual: Publishing your app, Web app (deploying) (https://manual.bubble.io/help-guides/publishing-your-app/deploying-your-app) — checked 2026-10-14
• Bubble Manual: SEO: Page (https://manual.bubble.io/help-guides/maintaining-an-application/seo/seo-page) — checked 2026-10-14

Related

• How to add AnveVoice to a Softr app
• How to add AnveVoice to a Webflow site
• How to add AnveVoice to a Framer site
• How to add AnveVoice to a React app

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.