How to Add Live Chat to Jekyll: Include, Environment and GitHub Pages

To add live chat to Jekyll you need one small include file and one line in a layout. The include holds the Talkmio snippet, the layout calls it just before the closing body tag, and a check on the build environment keeps the widget out of your local preview. That is the whole job, and it takes about ten minutes. This guide shows where the files go, how to handle themes and GitHub Pages, and how to test the result.

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 Jekyll site is a good fit, because the content Mio needs is already public, structured and well written.

What You Need Before You Add Live Chat to Jekyll

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 snippet exactly as Talkmio shows it, including every attribute, and never retype the site key by hand.

Then teach Mio. Open Mio AI, then Knowledge base, and add your deployed site. Mio reads every public page on the same domain and respects robots.txt, so a published Jekyll site is easy to ingest. If you keep material outside the site, such as a price list or a manual, upload it as a file (PDF, DOCX, TXT, MD, CSV or HTML, up to 15 MB each). You can do this before or after the widget is live, and the Try Mio screen lets you test answers before any visitor sees them.

Where the Snippet Belongs in a Jekyll Site

Jekyll builds every page by wrapping its content in a layout. Most sites have a default layout, usually _layouts/default.html, which closes with a footer and the closing body tag. The snippet belongs just before that closing tag, so it loads after your content and never blocks rendering. The table compares the four realistic ways to get it there.

Method	Effort	Survives theme updates	Best for
New include file called from your own layout	Low	Yes	Sites with their own layouts
Copy of the theme’s layout placed in your site folder	Medium	Only partly, compare after updates	Gem-based themes without a hook
Theme hook, such as a custom footer include	Lowest	Yes, if the theme keeps the hook	Themes that document an override file
Loading through Google Tag Manager	Medium	Yes	Teams that already manage scripts in a tag container

The first row is the one to choose when you can. It is explicit, it is easy to find a year from now and it does not depend on a theme decision you do not control.

Method 1: Create an Include and Call It from the Layout

An include is a reusable fragment that lives in the _includes folder. The Jekyll includes documentation explains the syntax. Create _includes/talkmio.html and paste the snippet into it, exactly as copied from Talkmio.

<!-- _includes/talkmio.html -->
<script async src="SCRIPT_ADDRESS_FROM_YOUR_SNIPPET"></script>

Now call it from your default layout, just above the closing body tag.

<!-- _layouts/default.html -->
  {% include footer.html %}
  {% include talkmio.html %}
</body>
</html>

If your snippet is a longer inline script rather than a single script address, the approach is the same. Keep the whole block in the include file. Liquid, the template language Jekyll uses, treats the curly percent and double curly brace characters as its own syntax, so if your snippet happens to contain such a sequence, wrap it in a raw block. Most snippets contain none, and a literal include is output untouched.

Method 2: Work with a Gem-Based Theme

Many Jekyll sites use a theme that arrives as a Ruby gem, so the layouts are not in your repository at all. Jekyll lets you override any theme file by placing a file with the same path in your own site folder. If the theme’s default layout is where the closing body tag lives, copy that one file into _layouts/default.html in your site, add the include line and keep a note of the date. Your copy now wins over the gem version.

The cost of an override is maintenance. When the theme is updated, your copy does not receive the changes, so compare it with the new original now and then. Some themes make this easier by calling an empty include for custom footer or head code. If yours documents such a file, create it with the right name and put the Talkmio snippet there instead, because it will not need the comparison. Do not edit files inside the installed gem folder, since a bundle update will quietly overwrite them.

Load the Chat Only in Production Builds

When you run jekyll serve, Jekyll builds in the development environment. When you build for deployment, you normally set the environment to production by writing JEKYLL_ENV=production before the build command. The documentation on environments describes the variable, and a template can read it as jekyll.environment. Use it to wrap the include.

{% if jekyll.environment == "production" %}
  {% include talkmio.html %}
{% endif %}

This keeps test conversations out of your Inbox while you work on layouts. It also keeps a staging copy from sending visitors to your support team. Be aware that Jekyll’s default environment is development, so a build that forgets to set the variable will leave the widget out. That is the safe failure, and it is easy to notice, but it explains the most common complaint: the chat is missing on the live site because the deployment script never set production.

Add Live Chat to Jekyll on GitHub Pages

GitHub Pages can build a Jekyll site for you without any command on your side. In that case the platform sets the production environment itself, so the check above works without changes. The GitHub documentation about Pages and Jekyll lists the limits of the built-in build, mainly that only an approved set of plugins is available. The include approach needs no plugin at all, which is why it works there.

If you build with GitHub Actions instead, you control the environment variable in the workflow file, so set production for the deployment build only. Whichever way you publish, a custom domain with HTTPS is the normal setup, and the widget needs nothing from it beyond a normal secure page. After the first deployment, open the live address and check that the bubble appears. If it does not, view the page source and search for the script address. A missing line points to the environment check or a layout that does not include the file.

Switch Live Chat Off on Selected Pages

Some pages should not carry a chat bubble. A printable invoice, a kiosk page or a landing page built for one very specific call to action are common examples. Jekyll makes this easy with front matter.

# invoice-template.md
---
layout: default
title: Invoice template
nochat: true
---

{% if jekyll.environment == "production" and page.nochat != true %}
  {% include talkmio.html %}
{% endif %}

You can set the same flag for a whole folder with front matter defaults in _config.yml, so you do not repeat it in every file. Keep the number of exceptions small. A chat that is missing on half the site confuses visitors, and the pages where people hesitate most, such as pricing, delivery and returns, are exactly the pages where an answer helps.

Multilingual Sites and the Knowledge Base

Jekyll has no built-in language system, so multilingual sites usually use a plugin or separate folders for each language. The snippet itself does not need to change per language. Mio replies in the language the visitor writes in and the chat window is translated as well, so a German visitor on your German pages and an English visitor on your English pages are both served from the same widget. In the website settings you can leave the language on auto-detect or fix it if your pages are strictly single-language.

The knowledge base is where multilingual sites need a decision. Because Mio finds answers across languages, a question in German can be answered from an English FAQ. That is helpful when only some pages are translated. Read a few German answers yourself with Try Mio before launch, and add a question-and-answer pair for anything important that the English source states too loosely.

Performance, Caching and Content Security

A static site is fast because there is little to load, so protect that. The async attribute lets the browser fetch the script without pausing the page, and placing the include at the end of the body means your content paints first. If you run a strict content security policy, add the Talkmio script address and the connections it needs to the allowed list. If visitors must consent before scripts load, read our guide to chat widget cookies and consent and load the include only after consent. Measure the effect on your own pages instead of guessing.

Because the widget is added at build time, a CDN will serve the same HTML to everyone, which is what you want. You do not need to rebuild the site when you change widget colours, position or texts in Talkmio. Changes made under Websites apply within five minutes.

Common Problems When You Add Live Chat to Jekyll

Most failures come from a short list of causes. The widget appears twice when both a theme hook and your own include load the snippet, so search the generated _site folder for the script address and make sure it appears once on each page. The widget is missing in production when the build never sets the production environment. Incremental builds can leave an old copy of a page behind, so run a clean build before you judge the result. Include file names are case sensitive on most servers, so a file called Talkmio.html will not match a call for talkmio.html.

If you maintain several static sites, the general guide to adding live chat to a static site covers the generic steps, and this page covers the Jekyll details. Whichever route you choose, the goal when you add live chat to Jekyll is the same: one clear include, one environment check and a short list of pages that opt out.

Test the Result Before You Announce It

1. Run a production build and open a generated HTML file in the output folder. Confirm the script appears once, near the end of the body.
2. Run jekyll serve. The widget should not appear locally.
3. Deploy, open the live site in a private browser window and check that the chat bubble appears in the corner.
4. Ask Mio two or three questions your customers often ask and check that each answer comes from your own pages.
5. Open a page with nochat: true and confirm the bubble is absent.
6. Ask for a person. The conversation should appear in the Inbox with a needs-human badge, and your browser should notify you.
7. Test on a phone. The guide to mobile widget design covers overlap with cookie banners and sticky bars.

If the bubble does not appear, view the page source. A missing script usually means the environment check is false, the include sits outside the final layout, or an HTML compressor removed the line. Fix the source, rebuild and test again.

Frequently Asked Questions

Do I need a Jekyll plugin to add live chat?

No. You add the Talkmio snippet to a file in the includes folder and call that file from a layout, which is a few lines of code. The WordPress plugin is only for WordPress. Any static site works with the plain snippet, including Jekyll, because the widget is just one script.

Which Jekyll file should hold the snippet?

Put it in _includes/talkmio.html and include it from your default layout just before the closing body tag. If your theme offers a documented footer or head include, use that instead, since it survives theme updates. Avoid editing files inside the installed theme gem.

Will the chat work on GitHub Pages?

Yes. The include approach needs no plugin, so it works with the built-in GitHub Pages build and with a custom workflow. GitHub Pages sets the production environment itself, so a production check in the template passes. After deployment, view the page source and confirm the script line is present.

How do I stop the chat appearing on my local preview?

Wrap the include in a check for the production environment using jekyll.environment. The development server uses the development environment, so the widget stays out of local pages and your test chats stay out of the Inbox. Set JEKYLL_ENV=production in your deployment build so the widget appears on the live site.

Can I hide the chat on a single page?

Yes. Add a front matter flag such as nochat: true to the page, then test for it in the layout with page.nochat. You can set the flag for a whole folder using front matter defaults in the configuration file. Keep exceptions rare, because visitors expect help on every page.

Does Mio know about my Jekyll content automatically?

After you add your deployed site to the knowledge base, Mio reads every public page on the same domain and respects robots.txt. When you publish new pages, use the re-read option so Mio picks up the change. Mio answers only from your content and hands over to a person when it cannot.

The Bottom Line

To add live chat to Jekyll, create one include file, call it before the closing body tag, wrap it in a production check and give pages a simple opt-out. Use your theme’s documented hook if it has one, and avoid editing the installed gem. Then teach Mio from your own pages and test with real questions in a private window. Start free with Talkmio, paste the snippet into your include and see how many visitor questions your Jekyll content can already answer.