Add Live Chat to Craft CMS: Layout and Multi-Site

To add live chat to Craft CMS, paste the Talkmio snippet into your main layout template, just above {{ endBody() }} and the closing body tag, and wrap it in a condition so it stays out of Dev Mode and Live Preview. Because every Craft page extends a layout, one edit puts the chat on the whole site, and the same template lets you keep it off checkout or members-only pages. This guide shows the layout edit, how to handle several sites, how to keep test traffic out of your Inbox, what to check with template caching and a checklist you can run before you deploy.

Talkmio is an AI live chat for websites. Its assistant, Mio, reads your website, FAQ and uploaded documents, answers visitors in their own language and hands the conversation to your team when it cannot answer from your content. The widget is a single script, so it works with Craft the same way it works with any site.

Before You Start

Create a free account at app.talkmio.com, confirm your e-mail and add your website under Websites. You get a site key and an install snippet. Copy the snippet exactly as shown, because it already contains your key. Then add your public pages and a few documents to the Mio knowledge base so the chat can answer real questions on day one. Mio reads every public page on the same domain and respects robots.txt, so make sure your Craft site is reachable without a login and that robots.txt does not block the sections you want answered.

You need access to your Craft templates, either on a local copy that you deploy or on the server. If you use Git, make the change on a branch, test it locally and deploy it the usual way. Editing templates directly on a live server is possible in Craft but makes it harder to roll back, so avoid it for anything you can test first.

Add Live Chat to Craft CMS in the Main Layout

Open the layout template that your other templates extend. In many Craft projects that is templates/_layout.twig, but the name varies. Find the closing body tag and paste the snippet above it, after your own scripts and before {{ endBody() }}.

{# templates/_layout.twig #}
<body>
  {% block content %}{% endblock %}

  {% if not craft.app.config.general.devMode
     and not craft.app.request.isLivePreview %}
    {# Talkmio snippet copied from Websites in your account #}
  {% endif %}

  {{ endBody() }}
</body>

The condition does two jobs. devMode is true on your local and staging environments when you have turned Dev Mode on, so the chat will not load there and nobody will start test conversations. isLivePreview is true when an editor uses Live Preview inside the control panel, where a chat bubble is only noise. On production, where Dev Mode is off, the snippet renders on every page that extends the layout. If your project does not use _layout.twig but several layouts, repeat the edit in each, or move the snippet into a partial and include it with {% include '_partials/talkmio' %}.

Layouts, Partials and Where to Put the Code

Approach	When it fits	Watch out for
Paste in the main layout	One layout, simple site	Edits are easy to overwrite by accident in a merge
Partial included from layouts	Several layouts or sites	Remember to include it in every layout
Global set with a toggle	Editors should switch the chat on and off	Needs a field and a condition in the template
Tag manager	Marketing owns scripts and consent	Extra layer; see the Google Tag Manager guide
Plugin or module	Many projects with the same setup	More code to maintain than a template edit

For most sites the partial is the best balance. It keeps the snippet in one file, it is easy to review in a pull request and it can be removed in one step if you ever change tools. If you prefer to manage scripts outside templates, our article on live chat with Google Tag Manager shows a tag-based option.

Several Sites and Languages in One Craft Install

Craft makes it easy to run several sites from one install, for example a main site and a shop, or one site per country. Decide whether they share one Talkmio website or have separate ones. Separate sites make reporting clearer and let you set a different language, welcome text and business hours for each. Add each site in Talkmio under Websites, then choose the snippet by site handle.

{% switch currentSite.handle %}
  {% case 'main' %}
    {# snippet for the main website #}
  {% case 'shop' %}
    {# snippet for the shop website #}
{% endswitch %}

Under Websites you can set the widget language to auto-detect or fixed, and change colour, position, assistant name, welcome and offline texts; changes apply within five minutes, so you rarely need a new deploy for content. Mio replies in the visitor’s language whichever way the widget is set, so a visitor on your German site can still write in English and be answered. For the wider approach to several languages, read multilingual live chat.

Caching, Performance and Consent

Template and page caching

The snippet is the same for every visitor, so it caches safely. If you use Twig’s {% cache %} tag, place the condition outside it or make sure the cache key includes anything the condition depends on, such as the environment. If you use a static page cache, purge it after you deploy the template so that old cached pages without the chat do not linger.

Performance

A chat widget is a third-party script and it has a cost. Measure your pages before and after, in a production build, on a mid-range phone. The guide to live chat widget page speed shows how to test and how to delay loading. Craft sites that already serve small, cached HTML pages usually see only a small difference.

Cookies and consent

If your site shows a cookie banner, decide whether the chat should load before or after consent. A Craft template can read a consent flag, for example from a cookie set by your banner, and include the snippet only when it is present. Document your choice in your privacy notice.

Headless and Hybrid Craft Projects

Some Craft projects use the CMS only as a content API and render pages with a separate front end. In that case, the Twig layout does not control the public pages and you must add the snippet where the front end is built. Follow the guide for your framework, such as adding live chat to Next.js or Vue and Nuxt. For a fully static build, the same rule applies: add the snippet to the template that generates every page.

Test Before You Deploy

Deploy to staging with Dev Mode on and confirm no chat bubble appears.
Deploy to production, open the site in a private window and confirm exactly one bubble appears on each template type: home, entry, category, search and 404.
Open an entry in Live Preview from the control panel and confirm the bubble does not appear.
Ask Mio two or three real customer questions and check that each answer comes from your own pages in Try Mio.
Send a message that needs a person and confirm it appears in the Inbox with a notification.
Check the widget on a phone, with the keyboard open, and make sure it does not cover buttons.

The Craft documentation and the Twig documentation are the best references if you want to structure the partial or condition differently. Plans and limits are on the Talkmio pricing page.

Common Problems and Quick Fixes

The bubble does not appear on production

Check that Dev Mode is really off on that environment, because a forgotten setting in the general config is the most common cause. Then view the page source and search for the snippet. If it is missing, the template you edited is probably not the one in use; Craft’s template path may point to a different folder than you expect. If the snippet is present but nothing shows, open the browser console and look for blocked requests, for example from a content security policy that does not allow the widget script.

Two bubbles appear

This happens when the snippet exists both in the layout and in a partial, or when a tag manager also loads it. Search the project for the site key and keep one copy only.

The bubble appears on pages where it should not

Wrap the include in a condition that checks the template path or a section handle, for example to skip a checkout section. Keep the rule in one place so the next developer can see it.

Old pages still show no chat after deploying

A static cache or a CDN may still serve the old HTML. Purge it after deployment and test again in a private window. Template caches created with the cache tag expire on their own schedule, so clear them or wait for the next refresh.

Answers feel out of date

That is a knowledge issue, not a template issue. Mio keeps what it read the last time a source was read. After you change important pages in Craft, open Mio AI, Knowledge base and use Re-read on the website source, then test the same question again in Try Mio.

Keep It Maintainable

A chat widget should be boring to maintain. Keep the snippet in one partial, comment where it came from and note the date, so the next developer knows it is third-party code. Keep content and style in the Talkmio account instead of the template: colour, position, welcome text and business hours are settings, not code. When you update Craft or move to a new major version, re-run the checklist above, because layout changes are the most common reason a widget disappears from part of a site. Record the check in your release notes so it happens every time.

It is also worth deciding who owns the chat after launch. A developer owns the snippet, but a person from support or marketing should own the content, the knowledge base and the hand-offs. Give them access to the Talkmio account with the right role, since Agents handle conversations and Admins also manage websites, Mio and settings. That split keeps template changes rare and content changes fast.

Frequently Asked Questions

Where do I put the live chat snippet in Craft CMS?

In the layout template that your other templates extend, above the closing body tag and before the endBody call. That puts the chat on every page that uses the layout. With several layouts, put the snippet in a partial and include it from each layout.

How do I keep the chat off my development site?

Wrap the snippet in a condition that checks whether Dev Mode is enabled, and only render it when Dev Mode is off. Your local and staging environments then stay free of the bubble, and test conversations never reach your real Inbox.

Will the chat appear in Craft’s Live Preview?

Not if you add a Live Preview check to the condition. The request exposes whether the page is rendered in Live Preview, so you can skip the snippet there. Editors then see the clean page, and the chat appears only on the public site.

Can I run different chats on different Craft sites?

Yes. Add each site as its own website in Talkmio, then choose the correct snippet in the template based on the current site handle. Each website then has its own language, texts, colour, business hours and reports, which keeps the data clean.

Does the chat work with a headless Craft setup?

Yes, but you add the snippet in the front end that renders the pages, not in Craft’s Twig layout. Use the guide for your framework, or the static site guide, and keep the same checks for environments and consent.

Does Talkmio have a free plan for testing on Craft?

Yes. The Free plan needs no card and includes one operator, one website and 50 AI answers a month. Pro is 19 euro a month and Ultimate 49 euro a month, with a 14-day trial on paid plans and VAT added at checkout.

The Bottom Line

To add live chat to Craft CMS, paste the snippet into one layout or partial, wrap it in a condition for Dev Mode and Live Preview, choose the right snippet per site and run a short checklist after each deploy. Keep content and style in the Talkmio account so that template changes stay rare. Start free with Talkmio and let Mio answer from the pages your Craft site already publishes.

How to Add Live Chat to Craft CMS: Layout, Dev Mode and Multi-Site