Add a Voice AI Agent to Any HTML Website

How to add AnveVoice to a plain HTML website

Paste one script tag just before the closing </body> tag of every page, or into the shared footer include if your site has one. The voice button appears on the next page load; nothing needs to be built or installed. Tested by AnveVoice on 2026-10-14.

At a glance

• Where the code goes: Before </body> on each page, or in a shared footer include
• Coding needed: Editing an HTML file
• Requirements: Pages served over HTTPS (or localhost while testing) so the browser allows the microphone
• Time: About 2 minutes once you have your embed ID

The tag

Get your embed ID from the AnveVoice dashboard at app.anvevoice.app (the Free plan needs no card). The tag below is the whole installation; replace YOUR_EMBED_ID with your own ID.

• 1. Copy the install tag — The async attribute lets the browser keep rendering your page while the voice assistant downloads in the background. Code: <script src="https://anvevoice.app/embed.js?embedId=YOUR_EMBED_ID" async></script>
• 2. Paste it before </body> — Open each HTML file that should show the assistant and paste the tag on the line just above the closing </body> tag. Placing it in <head> also works because the script waits for the page body before it draws the button. Code: <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Example</title> </head> <body> <h1>Welcome</h1> <script src="https://anvevoice.app/embed.js?embedId=YOUR_EMBED_ID" async></script> </body> </html>
• 3. Upload and reload — Upload the changed files to your host (FTP, your host's file manager, or git) and reload the page. A round microphone button appears in the bottom-right corner.

Options in the URL

Two optional settings go into the script URL as query parameters. position moves the button (bottom-right is the default, bottom-left is the alternative) and theme switches between light and dark styling to suit your site. Separate parameters with &. If you change your mind later, edit the URL in one place: the tag is the only thing you added, so there is no other configuration to keep in sync on your server.

• 1. Example with options — This places the button on the left with dark styling. Code: <script src="https://anvevoice.app/embed.js?embedId=YOUR_EMBED_ID&position=bottom-left&theme=dark" async></script>

Sites with many pages

Hand-written sites often repeat the same footer on every page. If your host supports server-side includes or you use PHP, put the tag in the shared footer file once (for example footer.html or footer.php) instead of editing every page. If every page is a separate file with no shared parts, a project-wide find-and-replace on </body> is the quickest way to add it everywhere. Static site generators such as Hugo, Jekyll or Eleventy have a base layout that wraps every page; add the tag there. Each has its own guide in the install list.

How we tested this

On 2026-10-14 we served a minimal HTML page from a local web server containing only a heading, a paragraph and the tag above. After loading, the page contained the AnveVoice host element with its own shadow DOM and the microphone button rendered in the bottom-right corner. The script also set a global guard flag, which is what prevents a second copy of the tag from creating a second button.

Common problems

• Nothing appears when opening the file directly (file:// URL): serve the page over http://localhost or upload it; browsers restrict many features on local files.
• Button shows but the microphone is blocked: the live site must use HTTPS. Most hosts provide free certificates; switch your URLs to https://.
• The page has a strict Content-Security-Policy header: allow scripts and connections from anvevoice.app and api.anvevoice.app, otherwise the browser refuses to load the assistant.
• Old version still showing after an edit: your browser or CDN cached the page. Hard-reload or purge the CDN cache.

Sources

• MDN: the <script> element and the async attribute (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script) — checked 2026-10-14
• MDN: getUserMedia() requires a secure context (https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia) — checked 2026-10-14
• MDN: Content-Security-Policy script-src (https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src) — checked 2026-10-14

Related

• How to add AnveVoice to a WordPress site
• How to add AnveVoice to a Hugo site
• How to add AnveVoice to a Jekyll site
• 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.