How to Add Live Chat to Astro: Layout, Script Tag and Transitions

To add live chat to Astro, you paste the Talkmio install snippet into the shared layout component that wraps your pages, just before the closing </body> tag, and rebuild the site. That is the whole job on a plain Astro site, and it takes a few minutes. Astro adds two details worth knowing: how it treats scripts you write in a component, and what happens to a chat widget when you turn on page transitions. This guide covers both, with a layout example, a checklist for testing and a table of common problems.

Talkmio is an AI live chat. Its assistant, Mio, reads your public pages and any documents you upload, answers visitors in their language, and hands the chat to your team when it cannot answer. Astro sites are mostly content, which is exactly what Mio learns from, so the pairing works well for documentation, marketing and blog sites.

What You Need Before You Add Live Chat to Astro

You need three things: an Astro project you can edit and deploy, a free account at app.talkmio.com, and a site key. In Talkmio, open Websites, choose Add, and enter your domain. Talkmio then shows a site key and an install snippet. Keep that page open, because you will copy the snippet from it exactly. This article uses a placeholder instead of printing the snippet, so you always paste the current version from your own account.

It also helps to know where your layout lives. Astro projects usually keep layouts in src/layouts, and the official Astro layouts guide explains the pattern: a layout is a component that holds the page shell, including <html>, <head> and <body>, and pages place their content inside it with a slot. If every page uses one layout, you edit one file and the chat appears everywhere.

Add the Snippet to Your Base Layout

Open the layout used by all your pages, often called Layout.astro or BaseLayout.astro. Find the closing body tag and paste the snippet above it. A simplified layout looks like this:

---
// src/layouts/Layout.astro
const { title } = Astro.props;
---
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>{title}</title>
  </head>
  <body>
    <slot />
    <!-- Paste the Talkmio snippet from Websites → your site here -->
  </body>
</html>

Save the file, run your build or start the dev server, and open any page. The chat bubble should appear in the corner. If your site has several layouts, for example one for the blog and one for landing pages, paste the snippet into each, or move the shared part into a single component that every layout imports.

Script Handling in Astro: Why Inline Matters

Astro processes scripts you write in a component. By default a plain script tag is bundled, deduplicated and treated as a module, and the Astro client-side scripts guide describes the behaviour in detail. That is perfect for your own code and sometimes unhelpful for a third-party snippet that must stay exactly as the vendor wrote it.

The directive to know is is:inline. Adding it to a script tag tells Astro to leave the tag alone, without bundling, rewriting or moving it. If the Talkmio snippet is a script tag, putting is:inline on it is the safe choice, because it keeps the attributes and the order intact. Astro may also warn you in the dev server when a script has attributes it cannot process, and the usual fix is the same directive. If the snippet is already a single external script with attributes, test both ways and keep the one that loads reliably in your production build.

Approach	What Astro does	Good for
Plain script tag	Bundles and processes it as a module	Your own site code
Script with is:inline	Leaves the tag exactly as written	Third-party snippets such as a chat widget
Script in the layout head	Loads earlier, before the body renders	Analytics; not needed for chat
Script before the closing body tag	Loads after your content	Chat widgets, because it does not delay the first paint

Live Chat with Astro Page Transitions

Astro can animate navigation between pages with its view transitions feature. When it is enabled, Astro swaps the content of the page without a full reload, and it matters for a chat widget because a visitor in the middle of a conversation should not lose it on every click. The Astro view transitions guide explains how scripts behave when the router is active, including which scripts run again after a navigation and how to control that.

Test three things after enabling transitions. First, the widget should appear once, not twice, after you click through several pages. Second, an open conversation should stay open and keep its messages when the visitor navigates. Third, the widget should still be there after the browser back button. If the bubble duplicates or vanishes, look at how the script is placed and whether it needs to be marked so that Astro re-runs or persists it according to the guide. Without view transitions Astro performs ordinary page loads, and the snippet runs on each page as it would on any static site.

Teach Mio From Your Astro Site

Installing the snippet gives you a chat window. The useful part starts when Mio knows your content. In Mio AI, open the Knowledge base and add your website. Mio reads every public page on the same domain and respects robots.txt, so a site that is built and deployed is ready to be read. You can also add single pages, question and answer pairs, free text and files such as PDF, DOCX, TXT, MD, CSV and HTML up to 15 MB.

Astro sites often keep content in Markdown, which is easy to reuse. If part of your documentation sits behind a login or in a repository rather than on public pages, upload the Markdown files directly. Then write business instructions that say what you sell, which tone to use and what Mio must never promise, for example never to quote delivery dates and to hand order questions to the team. Our guide to testing an AI chatbot before launch lists the questions to ask before visitors see it.

Environment, Staging and Preview Builds

Astro projects are often deployed to a preview URL for every branch. Think about whether you want the chat on those previews. The simplest route is to keep the snippet in the layout and accept that previews load it too. If you would rather avoid test traffic reaching your inbox, wrap the snippet in a condition that checks an environment variable and renders it only for the production build. Astro exposes environment values to components at build time, so a single flag such as a public variable named for the environment can decide whether the snippet renders.

Whatever you choose, add the production domain in Talkmio under Websites. Adding each domain separately keeps conversations, widget settings and reports tied to the right site. Plans differ in how many websites they allow: Free has one, Pro three and Ultimate ten, so check the Talkmio pricing page if you manage several Astro sites.

Customize the Widget Without Touching Code

Everything visual is set in Talkmio, not in your Astro files. Under Websites, open your site to change the colour, position, assistant name, welcome and offline texts, the pre-chat form (none, optional or required), the language (automatic or fixed) and business hours. Changes apply within five minutes, with no rebuild or deploy. That separation is useful for teams where developers own the Astro repository and support staff own the chat wording.

Match the colour to your brand and keep the position away from other fixed elements such as cookie banners or a back-to-top button. On mobile, check that the bubble does not cover a sticky call-to-action. The paid plans remove the “Powered by Talkmio” label.

Troubleshooting Live Chat on Astro

If the widget does not appear, work through the list below in order. Most problems are placement, caching or a mismatch between the domain and the site key.

Symptom	Likely cause	Fix
No chat bubble anywhere	Snippet not in the layout, or the site was not redeployed	Check the deployed HTML for the snippet and redeploy
Bubble only on some pages	Pages use a different layout	Add the snippet to every layout or share one component
Bubble appears twice	Snippet pasted in the layout and a page, or re-run by transitions	Keep a single copy and check the transitions setup
Chat opens but Mio cannot answer	Knowledge base is empty or the site was not read	Add the website in Mio AI and wait for it to finish reading
Warning in the dev console	Astro processes a script it cannot bundle	Add is:inline to the script tag
Works locally, not in production	Domain not added in Talkmio	Add the production domain under Websites

For a broader checklist that applies to any site, read our guide on how to add live chat to a website. If your Astro output is fully static, the notes on adding live chat to a static site apply too, and developers moving from another framework can compare with the Next.js guide.

After Launch: What to Watch

Once the chat is live, open the Inbox and read the first week of conversations. Look for questions Mio could not answer, and fix the source page rather than patching the answer. In Reports, watch conversations per day and the share Mio answered alone. If your team is offline at night, visitors are asked for an e-mail before their first message, and your reply from the Inbox goes out as an e-mail, so nothing is lost overnight.

Frequently Asked Questions

Where do I put the Talkmio snippet in an Astro project?

Put it in the base layout component, just above the closing body tag, so every page that uses the layout loads the chat. If you have several layouts, add it to each or move it into one component they all import. Then rebuild and redeploy the site.

Do I need is:inline on the chat script in Astro?

It is the safe default for third-party snippets, because it tells Astro to leave the script tag exactly as written instead of bundling or rewriting it. Test the production build with and without it, and keep the version where the widget loads once and reliably.

Does the chat survive Astro page transitions?

It can, but you must test it. With view transitions enabled Astro swaps page content without a full reload, so check that the widget appears once, keeps an open conversation across clicks and still works after the back button. Adjust script placement according to the Astro guide if not.

Can Mio learn from my Markdown files?

Yes. Add your website so Mio reads the public pages, and upload Markdown files directly if some content is not public. Talkmio accepts PDF, DOCX, TXT, MD, CSV and HTML files up to 15 MB, and the knowledge base page limit depends on your plan.

Do I need a developer to change the chat appearance later?

No. Colour, position, assistant name, welcome and offline texts, the pre-chat form, language and business hours are all set in Talkmio under Websites. Changes apply within five minutes and need no rebuild or deploy of your Astro site.

Is there a free way to try this on Astro?

Yes. The Free plan includes one operator, one website, 50 AI answers a month and 20 knowledge base pages, and needs no card. Paid plans start with a 14-day trial and add more operators, websites, AI answers and the e-mail channel.

The Bottom Line

Adding live chat to Astro is a one-file change: paste the Talkmio snippet into your base layout, mark it so Astro leaves it alone, and test it with and without page transitions. The real value comes afterwards, when Mio answers from your own pages and your team picks up what it cannot. Create a free Talkmio account, add your Astro site, and have the chat live before your next deploy finishes.