> ## Documentation Index
> Fetch the complete documentation index at: https://docs.cookiechimp.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.
# SvelteKit
> Install a consent banner in a SvelteKit application.
SvelteKit uses client-side navigation by default. CookieChimp installs in `app.html` and reinitializes on every navigation via the `afterNavigate` lifecycle hook.
***
## How do I load the CookieChimp script?
Add the script tag to `src/app.html` inside ``, before `%sveltekit.head%` and any other tags so it loads first:
```html theme={null}
%sveltekit.head%
%sveltekit.body%
```
***
## How do I handle client-side navigation?
SvelteKit transitions between pages without a full reload. Use `afterNavigate` in your root layout to re-inject the CookieChimp script on every navigation — this triggers a rescan of the newly mounted route's DOM. The static `
```
The `browser` check guards against SSR — `document` and `window` don't exist on the server, so any DOM access must be wrapped.
***
## How do I check consent status in code?
Wrap the CookieChimp events in a Svelte store so any component can subscribe:
```ts theme={null}
// src/lib/stores/consent.ts
import { writable } from "svelte/store";
import { browser } from "$app/environment";
export const consent = writable>({});
if (browser) {
function update() {
consent.set({
// @ts-ignore
analytics: !!window.CookieConsent?.acceptedService?.("Google Analytics", "analytics"),
});
}
update();
window.addEventListener("cc:onConsented", update);
window.addEventListener("cc:onUpdate", update);
}
```
Use it in a component:
```svelte theme={null}
{#if $consent.analytics}
Analytics is enabled.
{/if}
```
***
## Troubleshooting
* **Banner shows on first load but not after navigation** — make sure `afterNavigate` is called from your **root** `+layout.svelte`, not from a nested layout.
* **`window is not defined` / `document is not defined` errors** — wrap any DOM or `window` access in a `browser` check from `$app/environment`.