Add Live Chat to a Static Site: Hugo, Jekyll, Astro

To add live chat to a static site, put one Talkmio script tag in the shared layout that wraps every page, rebuild and deploy. Whether the site runs on Hugo, Jekyll, Eleventy or Astro, the job is the same: find the template that ends the HTML document, paste the tag before the closing body tag and let the generator copy it into every page it builds. Mio, the AI assistant, then answers visitors from your own pages and hands the chat to your team when a person is needed.

Static sites are one of the easiest places to run live chat, because there is no plugin to install and no server code to change. They also have a few traps of their own: a script that only exists in a development build, a layout that is overridden by a theme, a strict content security policy or content that changes with every deploy. This guide walks through the layout file for each generator, shows how to keep chat out of preview builds, explains how to keep Mio in step with your content and lists what to check after the first deploy.

What You Need Before You Start

You need three things, and none of them takes long.

A Talkmio account and a site key. Create a free account at app.talkmio.com, open Websites, add your live address and copy the 12-character site key or the full snippet. The Free plan costs €0, needs no card and includes 1 operator, 1 website and 50 AI answers a month.
Write access to the site source. You will edit one template file and commit the change, so you need the repository or the source folder, not only the hosting dashboard.
A deploy you can repeat. Whether you push to a Git host that builds for you or run the generator on your own machine, plan to rebuild once after the edit and once more whenever the content changes.

The snippet is a single script tag that loads asynchronously, so it does not hold up the rest of the page. It has the form below, where the last part is your own site key:

<script src="https://app.talkmio.com/w/YOUR_SITE_KEY.js" async></script>

Our general guide on how to add live chat to a website covers the account side in more detail; this article stays with the static-site specifics.

Where the Script Goes in Each Static Site Generator

The rule for anyone who wants to add live chat to a static site is the same everywhere: every generator has a base layout or a footer partial that all pages share. That file is the right place, because one edit reaches every page. The table lists the usual location for each generator; your theme may use different names, so search the project for the closing body tag.

Generator	Usual file	What to watch
Hugo	layouts/_default/baseof.html or layouts/partials/footer.html	Copy a theme partial into your own layouts folder instead of editing the theme
Jekyll	_layouts/default.html or _includes/footer.html	Theme gems keep their files outside your repository; override the file locally
Eleventy	A base layout such as _includes/base.njk	Every template that skips the base layout also skips the chat
Astro	src/layouts/Layout.astro	Add the is:inline attribute so the tag is left exactly as written
Plain HTML	Each page, or a build step that adds it	Easy to forget a page; search for the closing body tag afterwards

The rule behind the table is simple. If a page is built from a layout, edit the layout. If a page is built by hand, edit the page. If a theme ships the layout, override the file in your own project so a theme update does not erase your change.

How to Add Live Chat to a Static Site, Generator by Generator

Hugo

Hugo looks for templates in your project first and in the theme second. That order is what makes a safe override possible. Find the theme file that closes the document, usually baseof.html or a footer partial, copy it to the same path inside your own layouts folder and edit the copy. Paste the Talkmio tag just above the closing body tag.

If you want chat only on the live site, wrap the tag in a condition that checks the build environment. Hugo exposes the environment name as hugo.Environment; the development server runs in the development environment and a plain build runs in production. The tag then appears only in the build you publish. The official Hugo documentation explains the template lookup order and the environment settings.

Hugo checks that save time

Run the production build and search the output folder for your site key. The tag should appear in every HTML file, including section pages and the 404 page.
If your theme has a parameter for custom footer code, you can use it, but confirm it prints raw HTML rather than escaping the tag.
Multilingual Hugo sites share one layout across languages, so one edit covers all of them; the widget picks the visitor’s language on its own.

Jekyll

Jekyll builds pages from layouts in the _layouts folder and shared fragments in _includes. Open the layout that wraps your posts and pages, normally default.html, and look for the closing body tag. Paste the tag above it. If your site uses a theme installed as a gem, the original files are not in your repository; copy the one you need into the matching folder of your project and edit the copy.

Jekyll sets the environment variable JEKYLL_ENV, and the template can read it as jekyll.environment. A condition that checks for production keeps the chat out of local previews. Hosts that build Jekyll for you set production by default, but check your own build log if the tag does not appear. The Jekyll documentation covers layouts, includes and environments.

One Jekyll detail catches people out: pages that declare layout: none or a different layout never receive the tag. Landing pages and redirect stubs are the usual culprits. Decide whether those pages should have chat and fix the layout accordingly.

Eleventy

Eleventy does not impose a layout, so the location depends on how you built the site. Most projects have one base template in the includes folder that every other layout extends. Paste the tag before the closing body tag of that base template, rebuild and check the output folder.

For a development-only switch, expose a value from a data file that reads an environment variable you set in your build command, then wrap the tag in a condition on that value. The Eleventy documentation describes data files and layouts. Because Eleventy is flexible, test a page of each type: a post, a list page, the home page and the 404 page.

Astro

Astro projects usually have one layout component under src/layouts that every page imports. Open it and place the tag before the closing body tag. Astro processes and bundles ordinary script tags, which is helpful for your own code but not what you want for a third-party widget. Add the is:inline attribute so that Astro leaves the tag as you wrote it and the page loads the script from Talkmio directly.

If you use Astro’s client-side routing, often called view transitions, test navigation between pages with the chat open, because scripts behave differently from a full page load. The Astro guide to client-side scripts explains how script tags are handled and when each option applies. If you build the site with React or Vue islands, our guides to adding live chat to Next.js and Vue and Nuxt describe component-based installs.

Keep Preview Builds and Local Servers Out of Your Inbox

When you add live chat to a static site, hosting platforms often create a preview deploy for every branch. If the tag is in the layout unconditionally, each preview carries a working chat bubble, and a reviewer testing a draft page can start a real conversation in your Inbox. There are three tidy ways to avoid that:

Environment condition. Wrap the tag so that it renders only when the build environment is production.
A separate site key. Add the staging address as its own website in Talkmio and use its key in preview builds. Conversations then arrive labelled with the right site. The Free plan allows one website, Pro three and Ultimate ten, so check the count before you add a staging site.
Accept the noise. For a small personal site, a few test chats are harmless. Close them with a note and move on.

Whichever you choose, write the rule in the project readme so the next person who edits the layout knows why the condition is there.

Content Security Policy, Caching and Speed

Static sites are often hosted behind a CDN with strict headers, and two of them matter for a chat widget.

Content security policy

If your host sends a content security policy header, it must allow scripts and connections to the Talkmio domain used in the snippet. When the chat bubble fails to appear and the browser console reports a blocked script, the policy is the first suspect. Add the domain to the script and connection rules, redeploy and test again. If you run a very strict policy and need the full list of domains the widget uses, write to support at talkmio.com.

Caching

The tag itself is part of your cached HTML, so a CDN may keep serving the old pages for a while after a deploy. Purge the cache after the first install. Widget settings such as colour, position and welcome text live in Talkmio and apply within five minutes without a deploy, which means you rarely have to rebuild the site to change the look of the chat.

Page speed

The async attribute lets the browser keep rendering while the script loads, so the effect on first paint is small. Still, measure instead of assuming: run a speed test before and after the change and compare. Our guide to the live chat widget page speed impact explains what to look at.

Teach Mio From a Static Site

A static site is a good source for Mio because the pages are plain HTML that can be read without running scripts. Under Mio AI, then Knowledge base, add your website; Mio reads every public page on the same domain and respects robots.txt. Single pages, Q&A pairs, free text and files such as PDF, DOCX, TXT, MD, CSV and HTML up to 15 MB can be added as well.

Three points are specific to static content:

Re-read after deploys. Sources are re-read on demand. When a deploy changes prices, opening hours or documentation, use Re-read so Mio does not answer from the old version.
Mind the page limit. The plan limits how many pages Mio can keep: 20 on Free, 200 on Pro and 1000 on Ultimate. A documentation site with hundreds of pages may need a higher plan or a selection of the most useful pages.
Add what the pages do not say. Opening hours, refund rules and anything that lives only in people’s heads belong in Q&A pairs. The guide to training an AI chatbot on your website content lists what to include.

Use Try Mio before you go live. It shows the answer, which knowledge pieces were used and how long it took. Ask your five most common questions and check that each answer matches your pages.

Test the Install on the Live Site

After the deploy of your plan to add live chat to a static site, open the live address in a private browser window. The chat bubble should appear in the corner after a second or two. Then run through this short list:

Open a post, a list page, the home page and the 404 page. All should show the bubble.
Ask Mio a question that your pages answer and check the reply against the page.
Ask in a second language your audience uses; Mio replies in the visitor’s language and the widget text is translated.
Ask for a person. The conversation should appear in your Inbox with a needs-human badge. If nobody is online, you also get an e-mail and a push notification on the mobile app.
Check the mobile layout, because static themes sometimes place a fixed footer or cookie banner where the bubble sits.

If a page lacks the bubble, search the built output for your site key; a page missing it is using a layout you did not edit.

Common Problems and Fixes

Problem	Likely cause	Fix
No bubble anywhere	Tag only in a development condition, or cache not purged	Check the environment condition, rebuild and purge the CDN
Bubble on some pages only	Pages use a layout you did not edit	Search the output for the site key and fix the missing layouts
Script blocked in the console	Content security policy	Allow the Talkmio domain in the policy
Tag printed as visible text	Template escaped the HTML	Use the raw output form of your template language
Old answers after a deploy	Knowledge base not refreshed	Use Re-read on the website source
Test chats from previews	Tag present in every branch build	Add an environment condition or a separate site key

Plans, Limits and Where Static Sites Usually Land

Most projects that add live chat to a static site, such as portfolios, documentation and small business pages, fit on the Free plan: 1 operator, 1 website, 50 AI answers a month, 50 tickets a month, 20 knowledge-base pages and 30 days of history. A growing documentation site or a studio with a small team usually moves to Pro at €19 a month or €190 a year, which gives 3 operators, 3 websites, 1000 AI answers a month, unlimited tickets, 200 knowledge-base pages, 365 days of history and the e-mail channel, and removes the “Powered by Talkmio” mark. Ultimate at €49 a month adds 10 operators, 10 websites, 5000 AI answers, Facebook, Instagram and WhatsApp channels, reports export and API access. The live pricing page always has the current figures.

Frequently Asked Questions

Where do I put the Talkmio script on a static site?

Put it in the shared layout or footer partial that closes every page, just above the closing body tag. In Hugo that is usually baseof.html or a footer partial, in Jekyll default.html or footer.html, in Eleventy your base layout and in Astro your main layout component. One edit then reaches every page the generator builds.

Do I need a plugin to add live chat to a static site?

No. The Talkmio widget is one script tag, so a static site needs no plugin, no server code and no change to the build pipeline. You edit one template, rebuild and deploy. The WordPress plugin exists only for WordPress sites; static generators use the plain snippet with your site key.

How do I keep chat out of preview deployments?

Wrap the tag in a condition that checks the build environment so it renders only in production, or give preview builds their own site key by adding the staging address as a separate website in Talkmio. Without either, every preview shows a live bubble and testers can start real chats.

Why does Astro need the is:inline attribute?

Astro bundles and processes ordinary script tags by default. A third-party widget script should be left exactly as written, and the is:inline attribute tells Astro to do that. Without it the tag may be rewritten or moved, which can stop the chat from loading on some pages.

How does Mio learn from a static site?

Under Mio AI, Knowledge base, add your website address. Mio reads every public page on the same domain, respecting robots.txt, and answers only from that content. After a deploy that changes content, use Re-read so the knowledge base matches the live pages, and add Q&A pairs for facts that are not written on any page.

Will live chat slow down my static site?

The script loads with the async attribute, so the browser can continue rendering while it downloads, and the effect on first paint is normally small. Run a speed test before and after the change on your own pages and compare the results instead of relying on a general claim.

The Bottom Line

Adding live chat to a static site is a one-line change to a shared layout: paste the script before the closing body tag, keep it out of preview builds, allow the Talkmio domain in your security policy and re-read the knowledge base after content changes. For a typical portfolio or documentation site the Free plan is enough to start, and Pro covers a growing team. Create a free Talkmio account, copy your site key and ship the change in your next deploy.

Add Live Chat to a Static Site: Hugo, Jekyll, Astro and Eleventy