Svelte

Add an AI support assistant to a Svelte or SvelteKit site

The whole appeal of Svelte is shipping very little JavaScript. A support widget should not undo that.

Two lines
About two minutes
One file

src/app.htmlfile

<!-- Matter Chat — paste right before </body> --><script>  window.MatterChat = window.MatterChat || { q: [] };  window.MatterChat.q.push(["init", { id: "bot_your_key" }]);</script><script async src="https://app.matterchat.co/widget.js"></script>

</body>

html · paste above the dimmed line

Where the snippet goes

In SvelteKit, paste the two lines into src/app.html before the closing body tag — the shell every route renders into. For a plain Svelte app built with Vite, it goes in index.html in the same position.

SvelteKit: src/app.html: The shared shell, so one paste covers every route.
Svelte: index.html: Same position, before the closing body tag.
Outside the bundle: Nothing is imported, so your build output is unchanged.

app.html is the shell every SvelteKit route renders into. A plain Vite Svelte app uses index.html in the same position.

Nothing in your build output

Because it is an external script rather than an import, the compiler never sees it. Your bundle size is exactly what it was before, and the widget loads asynchronously afterwards.

What the crawler sees on SvelteKit

Our crawler reads served HTML without executing JavaScript. SvelteKit's default server-side rendering means your pages arrive as complete documents, so a crawl works out of the box — and adapter-static output is exactly as crawlable.

Server rendering stays intact

SvelteKit renders on the server by default. An external script never executes during that render, so there is no window reference to guard and no hydration mismatch to debug.

Checking it actually worked

Four things, in order. The third is the one people skip, and it is the one that tells you whether the answers are grounded.

1Hard refresh the page — the launcher appears bottom-right.
2Ask it something your site answers, and check the reply cites a page.
3Ask it something your site does not cover, and check it declines.
4Open Conversations in the dashboard; both should be there.

On a different stack?

The snippet is the same everywhere. Only the place you paste it changes.

What developers ask

Short answers. If yours is not here, the assistant on this page will try it — and tell you honestly if it cannot.

Does the crawler handle SvelteKit's rendered pages?

Yes — SvelteKit renders on the server by default, so pages arrive as complete HTML and crawl like a static site. Only routes that opt out with ssr = false are invisible to a fetch-based crawler.

Where exactly does it go in SvelteKit?

src/app.html, before the closing body tag. That file is the shell every route renders into, so one paste covers the whole site.

Does it affect my bundle size?

No. It is not imported, so the compiler never includes it. It is one runtime request loaded asynchronously.

Will it break SSR?

No. External scripts do not run during server rendering, so there is nothing to guard against.

From the blog

All posts

Answer honestly. Capture the rest.

Point Matter Chat at your site and see what it can — and can't — answer. It's honest about both.

Start free — chat in your site

No credit card. 2 minute setup.

Every answer cites the source it came from. When there isn't one, it says so — and hands the visitor to you.

Installs on the tools you already run.