Add MyLiveChat to your Astro app
Astro ships no JavaScript to the browser unless you ask for it, which is exactly why a pasted chat snippet often does nothing. Astro does not treat a <script> tag in an .astro file as markup to pass through — it treats it as source to process and bundle. The attribute that turns that off is is:inline, and adding it once in your shared layout is the whole integration.
Use this guide to add MyLiveChat to Astro. The free plan includes one agent,
unlimited chats, and unlimited websites — no credit card required.
If you do not have a MyLiveChat account yet,
create a free MyLiveChat account.
Start free
Step 1. Get your MyLiveChat code
Sign in to the MyLiveChat web console and click
Deployment menu on the left. Choose Embedded Chat tab and copy the MyLiveChat code.
Step 2. Add the code to your Astro project
- Open your shared layout, usually src/layouts/Layout.astro. If your pages do not use a layout yet, create one — a snippet added to src/pages/index.astro covers only the home page.
- Paste the MyLiveChat code just before the closing </body> tag.
- Add the is:inline attribute to the script tag, so Astro leaves it exactly as you wrote it instead of bundling it.
- Save, then run astro build and astro preview before you deploy — the dev server and the built output process scripts differently.
If you use <ClientRouter /> (previously <ViewTransitions />), Astro swaps the document on each navigation and body scripts run again. Keep the tag in the layout <head>, or give the launcher element transition:persist so it survives the swap instead of being created twice.
Check that live chat is working
Do not assume the install worked because you saw no error. Open your site in a private
browsing window and walk through this once:
- Look for the chat launcher on the page. If it is missing, view the page source and search
for mylivechat to confirm the code is really being served.
- Start a chat as a visitor and send a test message.
- Sign in to the web console and confirm the message arrives and
that you can reply.
- Close the chat and check the transcript is saved, so you know follow-up will work.
Check a real build, not just the dev server. A development server and a production build load third-party scripts differently, and a widget that appears while you are developing can still be absent from the deployed site.
Common Astro setup mistakes
- The is:inline attribute was left off. Astro tries to bundle the script, the remote URL is not fetched the way you expect, and no error is printed. This is the single most common Astro cause.
- The snippet went into one page instead of the layout. src/pages/about.astro gets the widget and nothing else does. Astro has no implicit shared shell — the layout is it.
- Only astro dev was checked. Run astro build then astro preview, or test the deployed site.
- A view-transition navigation created two launchers. Move the tag to the head of the layout, or persist the element across transitions.
What happens next?
After setup, sign in to the web console to answer visitors from your browser. You can also use the desktop app from the download page if your team prefers it.
Want the AI to answer first? Point the AI assistant at your site content and it handles routine questions 24/7, then hands off to a human with the full transcript when one is needed.
Why add live chat to an Astro site?
Astro is chosen for content sites, documentation and marketing pages that need to rank, so most visitors arrive from search with one specific question. Chat answers it while they are still on the page.
Because Astro sends almost no JavaScript, the widget is usually the only third-party script on the page. Loading it after your content keeps the performance budget you picked Astro for.
Astro live chat FAQ
Why does my script tag disappear in Astro?
Astro processes script tags in .astro files and bundles them. Add the is:inline attribute and Astro leaves the tag exactly as written.
Where exactly should the code go?
In your shared layout, usually src/layouts/Layout.astro, just before the closing body tag. A snippet in a single page file only covers that page.
Does this work with Astro islands and partial hydration?
Yes. The widget is plain JavaScript loaded outside your components, so it does not depend on which islands hydrate.
Will it slow down my Astro site?
The widget loads after your content. Astro already ships almost no JavaScript, so chat is usually the only third-party script and it stays off the critical path.
Is it really free?
Yes. One agent, unlimited chats, and unlimited websites are free forever, with no credit card required.
Make the chat window fit your site
Colours, position, language, the pre-chat form and your offline message are all set in your
MyLiveChat dashboard rather than in your Astro code, so you can change them without editing
your project again. See customization options for
what can be changed, and visitor monitoring if you
want to see which page a visitor is on before you reply.
Related guides
New to live chat? Start with
how to add live chat to your
website and the
live chat launch checklist, then
live chat best practices once you are
answering real conversations.
Also useful: Loading your live chat script without slowing your page and Live chat on a single-page app.
If you are worried about page speed, see
does live chat slow down your
website.
Any questions?
If anything is unclear, contact our support team from the chat button on this page or visit the Support page. We can help you choose the right setup path.