> ## Documentation Index
> Fetch the complete documentation index at: https://www.pagent.ai/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# SvelteKit

> Add pagent to a SvelteKit site.

Add the tag to `src/app.html`, inside `<head>` and before `%sveltekit.head%`, so it loads on every route:

```html src/app.html theme={"dark"}
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <script
      src="https://cdn.pagent.ai/js/sdk.js"
      data-client-key="YOUR_CLIENT_KEY">
    </script>
    %sveltekit.head%
  </head>
  <body data-sveltekit-preload-data="hover">
    <div style="display: contents">%sveltekit.body%</div>
  </body>
</html>
```

* **No hydration wait.** pagent can't tell when SvelteKit has finished hydrating, so `data-await-hydration` has no effect here. Leave it out.
* **Check your variants:** open each test's preview link once and check that the variant stays after the page has finished loading and after you navigate.
* **Navigation** between routes is tracked automatically.

See [Frameworks](https://www.pagent.ai/docs/install/frameworks.md) for the shared rules and the Content Security Policy.

## Check it worked

1. Deploy, then open your site in a private browser window.
2. Back in pagent, click **Check connection** in the install step.
3. Open a test's preview link and check that the variant shows and stays after the page has finished loading.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.