SvelteKit Live Chat Integration

Add MyLiveChat to your SvelteKit app

The SvelteKit trap is specific and it catches almost everyone: a <script> block inside a .svelte component is the component's own code, not markup. Paste a chat snippet there and Svelte compiles it as component logic instead of rendering a script tag, so nothing is ever added to the page. The file you want is src/app.html, the HTML shell that Svelte does not compile at all.

Use this guide to add MyLiveChat to SvelteKit. 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

Sign in to the MyLiveChat web console and click Deployment menu on the left. Choose Embedded Chat tab and copy the MyLiveChat code.

1. Open src/app.html in your project root. This is the shell template SvelteKit wraps every route in.
2. Paste the MyLiveChat code just before the closing </body> tag, after the %sveltekit.body% placeholder.
3. Do not put it inside a .svelte file's script block — that is component code, not markup.
4. Save and restart vite dev. Changes to src/app.html are picked up at server start, not by hot reload.

If you would rather keep it in Svelte, use <svelte:head> inside src/routes/+layout.svelte. That is a real element Svelte renders into the document head, unlike a bare script block. Either place covers every route; src/app.html is simpler and survives route restructuring.

Do not assume the install worked because you saw no error. Open your site in a private browsing window and walk through this once:

1. 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.
2. Start a chat as a visitor and send a test message.
3. Sign in to the web console and confirm the message arrives and that you can reply.
4. 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.

• The snippet was pasted into a component's script block. Svelte compiles that as component code. It never becomes a script tag and nothing appears.
• The snippet went in +page.svelte. Even done correctly that covers one route. Use src/app.html or the root +layout.svelte.
• The dev server was not restarted. Edits to src/app.html need a restart of vite dev; hot reload will not show them.
• Only the dev server was checked. Run vite build and vite preview, or test the deployed site, before deciding it works.

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.

SvelteKit apps are usually small, fast and built by small teams, which means there is rarely a support queue behind them. Chat lets one person answer the questions that would otherwise become abandoned sessions.

Because SvelteKit navigations are client-side, a visitor can move through several routes in one session. The widget loads once in the shell and the conversation follows them across every route.

Why does nothing happen when I paste the code into a Svelte component?

A script block in a .svelte file is the component's own instance code, not markup. Svelte compiles it instead of rendering a script tag. Use src/app.html.

Which file should the code go in?

src/app.html, just before the closing body tag. It is the shell SvelteKit wraps every route in and Svelte does not compile it.

Does the widget survive client-side navigation?

Yes. Because it loads in the shell rather than in a route component, it stays mounted while SvelteKit swaps routes.

Can I use svelte:head instead?

Yes. A svelte:head block in src/routes/+layout.svelte renders into the document head and also covers every route.

Is it really free?

Yes. One agent, unlimited chats, and unlimited websites are free forever, with no credit card required.

Colours, position, language, the pre-chat form and your offline message are all set in your MyLiveChat dashboard rather than in your SvelteKit 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.

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.

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.