# Install StepsKit in a SvelteKit app > Add StepsKit to SvelteKit with the stepskit npm package in your root layout, identify users, and understand why SvelteKit's built-in CSP config conflicts with the embed's required style-src. *Source: https://stepskit.com/docs/install/sveltekit* For SvelteKit 2. If you're on plain Svelte + Vite with no SvelteKit, skip to [that section](#plain-svelte-vite) — the entrypoint is different. ## Prerequisites - Your project API key, from the **Integrations** page in the [dashboard](/app). - SvelteKit 2 (Svelte 4 or 5 — the package doesn't care). - **If your app enables SvelteKit's CSP config**, read [Content Security Policy](#content-security-policy) first. It's the one thing here that can block the install outright. ## 1. Install the package ```bash npm install stepskit ``` Call `init()` in your root layout, `src/routes/+layout.svelte`: ```html ``` `init()` is SSR-safe — it's a no-op when there's no `window`, so it does nothing during the server render and runs on hydration. It's also idempotent, so there's no `browser` guard or `onMount` to write. The root layout wraps every page and mounts once per full page load, never re-running on client-side navigation. That's what you want. The package's call queue is doing real work here: the engine loads asynchronously, so an `identify()` call from a child route would otherwise arrive before there's anything to receive it. The package buffers those calls and replays them in order when the engine is ready. ### Plain Svelte + Vite Without SvelteKit there is no root layout. Call `init()` at the top of `src/main.ts` instead, above the Svelte imports — see the [React guide](/docs/install/react.md#without-the-component) for the same pattern. ### Without the package If you can't add a dependency, paste the snippet into `src/app.html`, just before ``: ```html ``` Your `src/app.html` should end up looking like this: ```html

%sveltekit.body%

``` ## 2. Identify the user **This is half the install, not a nice-to-have.** Without an `id`, show-once capping degrades to a per-tab check and any tour with a "filtered" audience is hidden outright. Resolve the user in `src/routes/+layout.server.ts` and identify from `+layout.svelte`: ```ts // src/routes/+layout.server.ts export const load = async ({ locals }) => { return { user: locals.user }; }; ``` ```html {@render children()} ``` No `browser` guard needed: `+layout.svelte` runs on the server too, but every method on the package is a no-op there rather than a crash. (If you installed without the package, you do need one — `window` doesn't exist during SSR.) On Svelte 4, use `onMount` with `$props` replaced by `export let data` — the StepsKit call is identical. Pass whatever your user object already carries; every key becomes targetable and there's no fixed schema to conform to. Re-call it when the user switches workspace or changes plan, so what you target on doesn't go stale. ## 3. Verify it worked Load any page of your app, then: 1. **Dashboard** — the project's Integrations page flips to **Connected**. 2. **Console, on a signed-in page** — run `window.stepskit.validateEnvironment()`. You want a non-null `visitorId` and a populated `userAttributes`. A null `visitorId` means step 2 never ran. 3. **Network** — `cdn.stepskit.com/stepskit.latest.js` returns `200`. `validateEnvironment()` also returns a `toursFiltered` table that says exactly why any given tour isn't showing. ## SvelteKit notes **Route changes need no extra wiring.** StepsKit patches `history.pushState` and `replaceState` and listens for `popstate`, so it sees SvelteKit navigation on its own. You don't need `afterNavigate` from `$app/navigation`. **`src/app.html` is not reactive.** It renders once per full page load. That's exactly the lifetime you want for a global script — don't try to move it into a component. ### Content Security Policy SvelteKit is unusual in shipping first-class CSP generation in `svelte.config.js`. If you use it, this is the part to get right. StepsKit needs: - `script-src`: `https://cdn.stepskit.com`, plus `'unsafe-inline'` for the loader block above - `connect-src`: `https://stepskit.com` - `style-src`: `'unsafe-inline'` — **required**. The embed injects its entire stylesheet as a `