Add Live Chat to Eleventy: One Snippet in Your Base Layout

To add live chat to Eleventy you need one snippet in your base layout, one small data file for the script address and a condition that keeps the widget out of local builds. Eleventy, also called 11ty, builds plain HTML pages from templates, so the whole job is a matter of putting the Talkmio snippet where every page shares it: the layout that wraps your content. For a site with a single base layout, it takes about ten minutes, and the result is the same on every page that you build.

Talkmio is an AI live chat for websites. Its assistant, Mio, answers visitors in their own language from your website, FAQ and uploaded documents, and hands the conversation to your team when it cannot answer. A site built with Eleventy is a good fit, because the pages are static HTML that Mio can read without trouble. This guide shows a clean way to add live chat to Eleventy, with examples in Nunjucks, and the checks to run afterwards.

What You Need Before You Start

Create a free account at app.talkmio.com, confirm your e-mail and add your website under Websites. You receive a site key and an install snippet. The examples below use the placeholder SCRIPT_ADDRESS_FROM_YOUR_SNIPPET for the script address. Copy the real value from your own snippet, and do not edit anything else in it. The Talkmio integrations page says that the widget is one script tag and that any website works with one line of code, so there is no special Eleventy plugin to install.

You also need to know which template wraps your pages. In many projects the layouts live in the _includes folder, with a file such as base.njk, and content files point to it with layout in their front matter. The Eleventy documentation explains layouts and data for your version. Folder names differ between projects, so adapt the paths below.

Ways to Add Live Chat to Eleventy

The snippet can reach your pages in a few ways. The table compares them before you write anything.

Method	Effort	Keeps the script address out of templates	Best for
Paste the snippet into the base layout	Lowest	No	Small sites and quick tests
Partial included from the base layout	Low	No	Sites with several layouts
Partial plus a global data file	Medium	Yes	Teams with preview and production builds
Loading through Google Tag Manager	Medium	Yes	Sites that already manage scripts in a container

The third row is the one we recommend when you can spare five extra minutes. It keeps the value in one place, lets you turn the widget off without editing templates and makes it easy to show the chat only on the production site.

Step 1: Create a Global Data File

Eleventy reads data files from the _data folder and makes them available in every template. Create _data/talkmio.js, and read the script address from an environment variable, so that the value is not repeated in templates and can differ between builds.

// _data/talkmio.js
module.exports = {
  src: process.env.TALKMIO_SRC || "",
  enabled: process.env.ELEVENTY_ENV === "production"
};

Set TALKMIO_SRC to the script address from your snippet in your build environment, and set ELEVENTY_ENV to production for the live build. On your own computer, leave both unset, and the widget will not load.

Step 2: Create the Partial

Create _includes/talkmio.njk with a condition. The script is loaded asynchronously, so it does not block rendering.

{# _includes/talkmio.njk #}
{% if talkmio.enabled and talkmio.src %}
<script async src="{{ talkmio.src }}"></script>
{% endif %}

If your setup differs from the example, for example if Talkmio gives you extra attributes in the snippet, copy them exactly as they appear in your own snippet and keep the condition around it.

Step 3: Include It in the Base Layout

Open your base layout and include the partial just above the closing body tag.

{# _includes/layouts/base.njk #}
<body>
  {{ content | safe }}
  {% include "talkmio.njk" %}
</body>

If you use Liquid or another template language, the idea is the same: a condition around the script, included once in the shared layout. Do not paste the snippet into individual pages, because you will forget one.

Step 4: Build and Test

Run a production-style build locally with the two variables set, and open the output. View the source of a built page and check that the script tag appears once, just before the closing body tag. Then deploy to a preview or live address, open it in a private browser window and look for the chat bubble. Ask Mio two or three questions your visitors often ask. Check that each answer comes from your own pages; if something is missing, add it to your site or to the knowledge base and ask again. Also open the site on a phone, where the bubble must not cover a menu or a button.

What to Teach Mio From a Static Site

Under Mio AI, then Knowledge base, add your website, single pages, question and answer pairs, free text or files. When you add your website, Mio reads every public page on the same domain and respects robots.txt. A site built with a static site generator is easy to read because each page is complete HTML, but check that important content is not hidden in scripts that load later. Make sure that your robots.txt does not block the pages Mio needs, and that your build does not leave draft pages public by accident.

Because your site is rebuilt on each change, add a step to your routine: after a deployment that changes prices, policies or documentation, use Re-read on the source in Talkmio. Our guide to training an AI chatbot on your website content explains how to organise the sources, and the article on AI chatbot website crawling explains what the crawler reads.

Common Problems After You Add Live Chat to Eleventy

• No bubble anywhere. Check that both environment variables are set in the build that produces the live site.
• Bubble in local builds. Check the condition; if you want the chat locally, set the variables on purpose.
• Two bubbles. The snippet is included twice, perhaps in the layout and in a page. Keep one include.
• Some pages without chat. Those pages use a different layout. Include the partial there too, or make the layouts extend the base one.
• Old answers. Use Re-read after a deployment that changes content.

Widget settings such as colour, position, assistant name, welcome and offline texts, pre-chat form, language and business hours are changed under Websites in the Talkmio app, not in your code, and changes apply within five minutes.

Handing Over to Your Team

Mio hands the chat to your team when it cannot answer from your content, when the visitor asks for a person, complains or asks about a specific order. The conversation gets a needs-human badge, a browser notification in the Inbox and, if nobody is online, an e-mail and a push notification on the mobile app. Set your status to Online, Away or Offline, and write an honest offline text. When the whole team is offline, visitors are asked for an e-mail before their first message, and your later reply from the Inbox goes out as an e-mail. For a developer-run site, the mobile app for iOS and Android is often the easiest way to answer between tasks.

Alternative: Load the Snippet Through Google Tag Manager

If your site already uses a tag container, you can add the Talkmio snippet there instead of in the layout. This keeps the template clean and lets a non-developer switch the widget on or off. The trade-off is another moving part: the widget now depends on the container loading, and you need to publish a container version for each change. Our guide to live chat with Google Tag Manager shows the steps. For most Eleventy sites, the layout approach is simpler and more robust, so choose the container only if you already rely on it.

Performance and Accessibility

One of the reasons people pick Eleventy is speed, so a chat widget should not spoil it. The snippet loads asynchronously, which means the page can render without waiting for it. Check your own results with a performance tool before and after the change, and compare the numbers on a mid-range phone. If you care about a perfect score, delay loading until the first user interaction, but test that the bubble still appears when needed. Keep in mind that the chat is a feature that many visitors value; a small cost in load time may be worth it if it answers a question that would otherwise lose a customer.

For accessibility, test that the bubble can be reached with a keyboard, that it does not hide important content on small screens and that its colours have enough contrast on your pages. The widget colour and position are set under Websites, so you can adapt them to your design. Our guide to live chat widget accessibility lists the checks.

Multiple Languages and Collections

Many Eleventy sites are multilingual, with one folder or collection per language. The chat does not need a separate snippet for each language. Mio replies in the language the visitor writes in, including Lithuanian, English, German, Polish, Russian, Spanish and French and more than 30 others, and the chat window itself is translated. You can fix the widget language in the settings if you prefer, or leave it on auto-detect. Make sure that each language version of your site has the same key policies, since Mio can find answers written in another language, but a clear page in the visitor’s own language is better.

If you use several Eleventy sites for several brands, add each one under Websites, give each its own snippet and keep a separate data file per site. A single plan can include more than one website, according to the pricing page, and all conversations arrive in one Inbox.

Keeping the Setup Maintainable

A chat widget is easy to add and easy to forget. Write two lines in your project readme: where the partial lives and which environment variables control it. Add the Talkmio site key to your list of third-party services, so that a colleague who takes over the project knows that the script exists and which account owns it. When you change hosting or build tools, check that the variables are still set, because a missing variable silently removes the chat rather than breaking the build. A quick test after each deployment, opening the live site in a private window, takes half a minute and catches the problem early.

Testing Content Changes Before They Go Live

If you use preview deployments, test the chat on the preview address only when you have enabled the variables there, and check that answers match the page you are about to publish. A small checklist of five questions that you ask in Try Mio after every large content change is enough to catch most mistakes.

Frequently Asked Questions

Is there an Eleventy plugin for Talkmio?

No dedicated plugin is needed. The integrations page says that the widget is one script tag and that any website works with one line of code. Put the snippet in a partial, include it in your base layout and keep the script address in a data file or an environment variable.

Where should the snippet go in an Eleventy site?

Put it in the layout that wraps all your pages, just above the closing body tag, through a partial. The script loads asynchronously, so it does not hold up rendering. Avoid pasting it into individual content files, because some pages would be missed.

How do I keep the widget out of local builds?

Read the script address and an environment flag in a global data file, and wrap the script tag in a condition. Set the variables only in the build that produces the live site, so your local builds and previews stay free of the chat.

Will Mio read my Eleventy pages?

Mio reads every public page on the same domain and respects robots.txt, so static HTML pages are easy for it to read. Check that your robots.txt does not block important pages, and use Re-read after you deploy changes to prices or policies.

Can I change how the widget looks without changing code?

Yes. Colour, position, assistant name, welcome and offline texts, pre-chat form, language and business hours are set under Websites in the Talkmio app. Changes apply within five minutes, and you do not need to rebuild or redeploy your site.

The Bottom Line

To add live chat to Eleventy, create a data file, add a conditional partial, include it once in the base layout, build with the production flag and test in a private window. Then teach Mio your pages and keep a Re-read step in your deployment routine. Start free with Talkmio and let your next visitor get an answer from your own pages.