Add live chat to SvelteKit. DeskCrew support widget
DeskCrew adds AI live chat, an AI support chatbot and ticketing to a SvelteKit app through the official @deskcrew/sveltekit package: one server hook that injects the widget into every page, SSR and prerendering. A single script tag in src/app.html works too.
An official npm package
Install @deskcrew/sveltekit and add one server hook. Every page carries the widget, server-rendered or prerendered, with no template edits.
AI drafts, humans approve
The AI drafts replies grounded in the knowledge base you publish, and every draft waits in an approval queue until a human sends it.
Every conversation is a ticket
Widget chats, emails, and board posts land in one dashboard with full history; visitors who leave get their answer by email.
Free plan, no card
The free plan includes the chat widget, a public knowledge base, and ticketing. Start free and upgrade only when you outgrow it.
How to install DeskCrew on SvelteKit
Install the official package: npm install @deskcrew/sveltekit.
In src/hooks.server.js (or .ts): import { deskcrewHandle } from "@deskcrew/sveltekit", then export const handle = deskcrewHandle({ widgetKey: "pub_YOUR_KEY", board: "your-board" }). Already have a handle? Wrap both in sequence() from @sveltejs/kit/hooks.
Build and deploy. The hook injects the widget into every HTML response, including prerendered pages, and leaves JSON endpoints, redirects and streamed responses alone. Your key and board slug are on the dashboard’s Install page.
<script src="https://deskcrew.io/desk.js" data-key="pub_YOUR_KEY" data-board="your-board" defer></script>
pub_YOUR_KEY and your-board are placeholders. Your real widget key and board slug are in your DeskCrew dashboard under Install (free signup, no card).
Note: Prefer no dependency? Paste the tag below into src/app.html, the shell every route renders through, before </body>.
DeskCrew vs the usual suspects
| DeskCrew | Tidio | Crisp | Zendesk | |
|---|---|---|---|---|
| Free tier | Yes. Free plan, no card | Yes (limited) | Yes (basic) | Free trial only |
| AI included | Yes. AI drafts on every plan, human-approved | Paid add-on | Higher plans | Paid add-on |
| Setup | About 2 minutes. One script tag or plugin | Minutes. Script tag | Minutes. Script tag | Longer. Full workspace setup |
| Price floor | $0 free plan · paid from $29/mo | Free plan; paid tiers above | Free plan; paid tiers above | Per-agent pricing, no free plan |
Competitor cells generalize their public pricing pages. Always check current plans.
DeskCrew has a free plan with no card. Chat widget, public knowledge base, and ticketing included. Every new workspace starts with full Team features free for 14 days, and paid plans start at $29/mo. Full details on the pricing page.
FAQ. add live chat to SvelteKit
Last updated: September 2026
How do I add a live chat widget to a SvelteKit app?
Paste the widget script into src/app.html, just before the closing body tag. That file is the shell every route renders through, so a single edit covers the entire app including new routes you add later.
Should it go in app.html or a layout?
app.html is simpler and covers everything. Use src/routes/+layout.svelte with a <svelte:head> block only if you want the widget on some routes and not others, for example excluding an admin section.
Does it work with SSR and prerendering?
Yes. The tag is part of the HTML shell, so it is present whether a route is server-rendered, prerendered at build time, or client-side navigated. The script itself loads deferred and does not block hydration.
Will it interfere with SvelteKit’s client-side routing?
No. The widget mounts once into its own container and survives client-side navigation, so it does not reload or lose an open conversation when the user moves between routes.
Will it clash with my styles?
No. The widget renders inside a Shadow DOM, so its CSS is fully isolated from your app’s, including any global styles or CSS resets.
Is there a free live chat widget for SvelteKit?
Yes. The DeskCrew free plan includes the chat widget, ticketing, a public help center, and a monthly AI answer allowance, with no credit card.