Add a Voice AI Agent to Astro (is:inline Script)

How to add AnveVoice to an Astro site

Put the AnveVoice tag in your shared layout component with the is:inline directive. Astro otherwise tries to process and bundle scripts, and is:inline tells it to leave an external URL exactly as written. Steps checked against the official documentation on 2026-10-14.

At a glance

• Where the code goes: Your base layout, for example src/layouts/Layout.astro
• Required directive: is:inline, so Astro does not process or bundle the script
• Coding needed: One script element in an .astro file
• Navigation: Works with full page loads and with the ClientRouter

Before you start

Sign in at app.anvevoice.app and copy the embed ID (Free plan, $0, no card). You also need to know which file holds the page shell for your site. In most Astro projects that is one layout under src/layouts that renders the html, head and body elements and a slot for each page's content. Astro's client-side script guide explains why the directive matters. By default, Astro processes script elements that have no attributes other than src: it adds TypeScript support, bundles local and npm imports and turns them into modules. To load a script from outside your project's src folder, the guide says to include is:inline, which opts the element out of processing so it is rendered as written.

Add the tag to your layout

• 1. Open the layout — Find the layout component your pages share, such as src/layouts/Layout.astro or BaseLayout.astro. Astro's layout documentation shows this file as the home of the html element and the slot.
• 2. Place the script before the closing body tag — Add the external script with is:inline after the slot so page content renders first. Replace YOUR_EMBED_ID with your own value. Code: --- // src/layouts/Layout.astro const { title } = Astro.props; --- <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>{title}</title> </head> <body> <slot /> <script is:inline src="https://anvevoice.app/embed.js?embedId=YOUR_EMBED_ID" async ></script> </body> </html>
• 3. Check every page uses the layout — Pages that import a different layout, or that build their own html element, will not include the tag. Search src/pages for layouts you forgot.

Why not an ordinary script element?

Without is:inline, Astro's build treats the element as a script it should handle. For a third-party URL that is the wrong behavior: you want the browser to fetch the file straight from AnveVoice. A bundled copy would also freeze the loader at build time, which defeats the point of hosted script updates. Note the other consequence in the same guide: an is:inline script placed inside a component is duplicated for each instance of that component. That is why the tag should live in the single layout, not in a repeated component such as a card.

Astro's ClientRouter and page transitions

If you turned on the ClientRouter for view transitions, pay attention to how Astro treats scripts. The guide says the head is swapped between pages but scripts that exist on the new page are kept, and that inline scripts may be re-executed during a visit. Adding the data-astro-rerun attribute makes an inline script run again after every transition. Do not add data-astro-rerun for AnveVoice. It loads once, and the script ignores a second copy on the same page, so even if Astro re-executes the element nothing doubles up. Leaving the attribute off is the safest default.

Check that it works

• 1. Build and preview — Run astro build and astro preview so you inspect the generated pages.
• 2. View the source — Search the HTML of any built page for anvevoice.app/embed.js.
• 3. Try voice — Open the site, click the round microphone button in the bottom-right corner, allow microphone access and ask a question.

Common problems

• Warning or build error about the script: you left out is:inline, so Astro tried to process it.
• Missing on some pages: those pages use a different layout. Add the tag there or merge the layouts.
• Tag appears several times in the HTML: it is inside a component that renders more than once. Move it to the layout.
• Microphone blocked: deploy over HTTPS and avoid a Permissions-Policy header that disables the microphone.

Sources

• Astro Docs: Client-side scripts (https://docs.astro.build/en/guides/client-side-scripts/) — checked 2026-10-14
• Astro Docs: Layouts (https://docs.astro.build/en/basics/layouts/) — checked 2026-10-14
• Astro Docs: View transitions and scripts (https://docs.astro.build/en/guides/view-transitions/) — checked 2026-10-14

Related

• How to add AnveVoice to a site hosted on Netlify
• How to add AnveVoice to a Gatsby site
• How to add AnveVoice to a plain HTML website
• How to add AnveVoice to an Eleventy 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.