Add a Voice AI Agent to a Jekyll Site (2026 Guide)

How to add AnveVoice to a Jekyll site

Jekyll wraps your pages in a layout, normally _layouts/default.html. Add the AnveVoice script tag before the closing body tag of that layout, or in an include the layout calls. If your layout lives inside a theme gem, copy it into your project first so your edit overrides the theme. Steps checked against the official documentation on 2026-10-14.

At a glance

• Where the code goes: _layouts/default.html, or a file in _includes that the layout includes
• Coding needed: One line of HTML; a little Liquid for the optional guard
• Plan limits: None from Jekyll or GitHub Pages. Free AnveVoice plan is enough
• Time: About 3 minutes

How Jekyll builds a page

Jekyll's directory-structure reference lists the folders that matter here. _layouts holds the templates that wrap posts and pages, _includes holds partials that layouts and posts can reuse, _config.yml holds site configuration, and _site is where the generated output goes. Inside a layout, the Liquid tag {{ content }} marks where each page's body is inserted, and the documentation notes that the convention is a base template named default.html which other layouts inherit from. That inheritance is why one edit covers a whole site: post, page and home layouts typically name default as their parent, so adding the tag to default.html puts it on every page.

• 1. Copy the install tag — Create a bot at app.anvevoice.app and copy its embed ID. Add &position=bottom-left or &theme=dark to the URL if you want. Code: <script src="https://anvevoice.app/embed.js?embedId=YOUR_EMBED_ID" async></script>

Method 1: edit the default layout

• 1. Open _layouts/default.html — If the file does not exist in your project, your layout comes from a theme gem; skip to the next section.
• 2. Paste before </body> — Put the tag on the line directly above the closing body tag, below {{ content }} and any footer include.
• 3. Rebuild — Run bundle exec jekyll serve for local preview, or bundle exec jekyll build to write the site into _site.

Method 2: an include with your embed ID in _config.yml

Jekyll's include tag inserts a file from the _includes folder, so a small include keeps the tag out of the layout and lets you pass the ID from configuration. Avoid overusing includes, as Jekyll's docs note that they slow builds, but one tiny file is fine.

• 1. Add the ID to _config.yml — Config changes are read when Jekyll starts, so restart the server after saving. Code: anvevoice_embed_id: YOUR_EMBED_ID
• 2. Create _includes/anvevoice.html — The file contains the tag with a Liquid variable in the URL. Code: <script src="https://anvevoice.app/embed.js?embedId={{ site.anvevoice_embed_id }}" async></script>
• 3. Call it from the layout — In _layouts/default.html, add the include above the closing body tag. Code: {% include anvevoice.html %} </body>

When the layout belongs to a theme gem

Jekyll's theme documentation explains that gem-based themes keep their layouts and includes inside the gem, hidden from your project folder, yet still used at build time. It also explains the override rule: Jekyll checks your site's own files before the theme's, so a _layouts/default.html in your project replaces the theme's layout of the same name. To get a copy, run bundle info --path followed by the gem name, for example bundle info --path minima. That prints the directory where the theme is installed. Copy its _layouts/default.html into your project's _layouts folder and edit the copy. You stop receiving upstream changes to that one file, but the rest of the theme still updates normally. Many themes also expose an include such as a custom footer; if yours does, override only that file.

Production-only guard

Jekyll exposes jekyll.environment to Liquid, and its default value is development unless the JEKYLL_ENV variable says otherwise. So a check for production means the button stays off during jekyll serve, but only shows on builds where you set the variable. If your host builds the site for you, check how it sets JEKYLL_ENV. When in doubt, view the generated source to confirm the tag is there.

• 1. Wrap the include — Then build with JEKYLL_ENV=production bundle exec jekyll build. Code: {% if jekyll.environment == "production" %} {% include anvevoice.html %} {% endif %}

GitHub Pages notes

• GitHub's Jekyll documentation says Pages has built-in Jekyll support but cannot build sites that use unsupported plugins; for those you build locally or in a workflow and publish the static output. It also states that GitHub Actions is now the recommended way to deploy Pages sites.
• A plain script tag in a layout needs no plugin, so it works with the built-in builder and with a custom Actions workflow alike.
• To use a theme that is not on GitHub's supported list, add it manually; the layout override rule above still applies.
• Changes appear after the Pages build finishes. Reload with a hard refresh to bypass cached HTML.

Check that it works

• 1. Inspect the built page — Open _site/index.html and search for anvevoice.app. It should appear once, near the end of the body.
• 2. Load the live site — Use a private window. Microphone access needs HTTPS; GitHub Pages serves github.io sites over HTTPS.
• 3. Try the button — The round microphone button sits bottom-right. Click it, allow the microphone and ask a question.

Common problems

• Liquid prints a blank embed ID: the key in _config.yml does not match the variable name, or the server was not restarted after editing the config.
• Tag missing on some pages: those pages use a layout that does not inherit from default, such as a layout with no parent, or set layout: null. Add the include to that layout.
• Two buttons: the tag is both in the layout and in an include. Keep one.
• Edits to a theme file are ignored: the copy is in the wrong path. It must be at _layouts/default.html in your project root, not inside the gem folder.

Sources

• Jekyll docs: directory structure (https://jekyllrb.com/docs/structure/) — checked 2026-10-14
• Jekyll docs: layouts (https://jekyllrb.com/docs/layouts/) — checked 2026-10-14
• Jekyll docs: includes (https://jekyllrb.com/docs/includes/) — checked 2026-10-14
• Jekyll docs: themes (overriding theme files) (https://jekyllrb.com/docs/themes/) — checked 2026-10-14
• Jekyll docs: environments (JEKYLL_ENV) (https://jekyllrb.com/docs/configuration/environments/) — checked 2026-10-14
• GitHub Docs: GitHub Pages and Jekyll (https://docs.github.com/en/pages/setting-up-a-github-pages-site-with-jekyll/about-github-pages-and-jekyll) — checked 2026-10-14

Related

• How to add AnveVoice to a Hugo site
• How to add AnveVoice to an Eleventy site
• How to add AnveVoice to a Hexo 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.