# Svelte

> One component in your root layout.

Source: https://docs.usejot.co/docs/install/svelte

<Callout title="Packages are on their way to npm">
  Until `@usejot/svelte` is published, the [script tag](/docs/install/script) in `app.html` does the
  same job today.
</Callout>

```bash
npm install @usejot/svelte
```

```svelte title="src/routes/+layout.svelte"
<script>
  import { JotWidget } from "@usejot/svelte";
</script>

<slot />
<JotWidget config={{ projectKey: "jot_pk_your_key" }} />
```

The component mounts the widget in `onMount`, so it never runs during
SvelteKit's server render, and removes it when the layout unmounts.

Every [script option](/docs/install/script#options) is a key of `config`: `trigger`,
`edge`, `offset`, `environment`, `autostart`.