Add a Voice AI Agent to a Blogger Blog
Add the AnveVoice voice agent to a Blogger blog with an HTML/JavaScript gadget in Layout or by editing the theme HTML, with backup and XML notes.
How to add AnveVoice to a Blogger blog
Blogger gives you two routes for a script: an HTML/JavaScript gadget in the Layout screen, or a direct edit of the theme under Theme > Edit HTML. The gadget is the gentler option; the theme edit loads the tag on every page template, and you should download a theme backup first. Steps checked against the official documentation on 2026-10-14.
At a glance
- Where the code goes: Layout > Add a Gadget > HTML/JavaScript, or Theme > More > Edit HTML
- Coding needed: None for the gadget; a careful paste for the theme edit
- Plan limits: None. Blogger is free, and Google's help pages list no restriction on scripts
- Time: About 2 minutes
Pick a method
Blogger's help centre separates two ways to change a blog's design. Gadgets are page elements you add from the Layout screen, such as an archive or a profile box, and the HTML/JavaScript gadget accepts pasted code in a Content box. Editing the theme's HTML changes the template that every page is built from. Google's help page adds a plain warning that authors who add code or third-party widgets do so at their own risk, so use code you trust and keep a copy of your theme. For most bloggers, the gadget is enough. Choose the theme edit if you want the tag in the template itself, for example because you swap layouts often or want it independent of gadget positions. You need your AnveVoice embed ID either way; sign up at app.anvevoice.app, create a free voice bot for your blog, and copy the ID.
- 1. Prepare the tag — Insert your own embed ID where YOUR_EMBED_ID appears. Add &position=bottom-left or &theme=dark to the address if wanted. Code: <script src="https://anvevoice.app/embed.js?embedId=YOUR_EMBED_ID" async></script>
Method 1: HTML/JavaScript gadget
Google's own Surveys documentation uses exactly this route to place a JavaScript snippet on Blogger: it opens Layout, clicks an Add a Gadget box, picks HTML/JavaScript, pastes the code in Content and saves. Because the gadget sits inside a layout section, the voice button's position on screen is still controlled by the AnveVoice script, not by where the gadget sits.
- 1. Sign in and choose the blog — Open Blogger and pick the blog from the list at the top left.
- 2. Open Layout — In the left menu click Layout, and find a section that shows on every page, such as the footer.
- 3. Add the gadget — In that section click Add a Gadget, choose HTML/JavaScript from the list, and give it a title if you like.
- 4. Paste and save — Paste the AnveVoice tag into the Content box, click Save on the gadget, then click Save at the bottom left of the Layout screen, as Blogger's help describes.
Method 2: edit the theme HTML
Blogger templates are XML documents. A raw ampersand inside an attribute can make the template invalid, so if you add the optional position or theme parameters, write each ampersand as & in the theme editor. The plain tag without optional parameters contains no ampersand.
- 1. Back up the theme — In Blogger go to Theme. At the top right click More, then Backup, then Download, so you can restore the original template.
- 2. Open the editor — Under My theme click More, then Edit HTML.
- 3. Paste above the closing body tag — Press the editor's search shortcut, find </body>, and paste the AnveVoice line on the line above it.
- 4. Save the theme — Click Save. If Blogger reports an XML parsing error, fix it before leaving the screen.
Custom domains and what visitors see
Blogs on blogspot.com addresses are served over HTTPS, which the browser's microphone permission needs. If you use a custom domain, confirm the padlock appears before testing the voice button. Blogger serves the same template to every page of the blog, so either method puts the agent on posts, static pages and the home page alike.
Check that it works
- 1. Open the live blog — Visit your public blog address in a private window. The preview inside the theme editor may not run scripts.
- 2. Find the button — Look for the round microphone at bottom-right, click it, allow microphone access and ask a question.
- 3. Look for duplicates — If you tried both methods, remove one. The script ignores a second copy, but one tag is cleaner.
Common problems
- Gadget saved but no button: you saved the gadget but not the layout, or placed it in a section that your template hides on some page types.
- XML error when saving the theme: an unescaped ampersand or a stray character crept in. Restore from your backup and paste again.
- Theme editor shows no Edit HTML: use the More menu under My theme on the Theme screen.
- Microphone never asks for permission: the blog is being opened over plain HTTP.
Sources
- Blogger Help: Change the design of your blog (gadgets and Edit HTML) (https://support.google.com/blogger/answer/176245?hl=en) — checked 2026-10-14
- Blogger Help: Use themes to change how your blog looks (theme backup) (https://support.google.com/blogger/answer/1227173?hl=en) — checked 2026-10-14
- Google Surveys Help: adding a JavaScript snippet through a Blogger HTML/JavaScript gadget (https://support.google.com/surveys/answer/6184198?hl=en) — checked 2026-10-14
Related
- How to add AnveVoice to a Tumblr blog
- How to add AnveVoice to a WordPress site
- How to add AnveVoice to a plain HTML website
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.