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

# Svelte

The [Fingerprint Svelte SDK](https://github.com/fingerprintjs/fingerprintjs-pro-svelte) is an easy way to integrate Fingerprint into your Svelte application. It supports all capabilities of the JavaScript agent and provides a built-in caching mechanism. You can view our [Svelte quickstart](/docs/svelte-quickstart) for a step-by-step guide to get started.

### How to install

Add `@fingerprintjs/fingerprintjs-pro-svelte` as a dependency to your application via npm or yarn.

<CodeGroup>
  ```bash NPM theme={"theme":"github-dark-dimmed"}
  npm install @fingerprintjs/fingerprintjs-pro-svelte
  ```

  ```bash Yarn theme={"theme":"github-dark-dimmed"}
  yarn add @fingerprintjs/fingerprintjs-pro-svelte
  ```

  ```bash PNPM theme={"theme":"github-dark-dimmed"}
  pnpm add @fingerprintjs/fingerprintjs-pro-svelte
  ```
</CodeGroup>

Wrap your application (or component) in `FpjsProvider`. You need to specify your public API key and other configuration options based on your chosen region and active integration.

```svelte Svelte theme={"theme":"github-dark-dimmed"}
// src/App.svelte
<script>
  import {
    FpjsProvider,
    FingerprintJSPro
  } from '@fingerprintjs/fingerprintjs-pro-svelte'
  import VisitorData from './VisitorData.svelte'
</script>
<FpjsProvider
  options={{
    loadOptions: {
      apiKey: "PUBLIC_API_KEY",
      endpoint: [
        // "https://metrics.yourwebsite.com", 
        FingerprintJSPro.defaultEndpoint
      ],
      scriptUrlPattern: [
        // "https://metrics.yourwebsite.com/web/v<version>/<apiKey>/loader_v<loaderVersion>.js",
        FingerprintJSPro.defaultScriptUrlPattern
      ],
      // region: "eu"
    }
  }}
>
  <VisitorData />
</FpjsProvider>
```

Use the `useVisitorData` hook in your components to identify visitors.

```svelte Svelte theme={"theme":"github-dark-dimmed"}
// src/VisitorData.svelte
<script>
  import { useVisitorData } from '@fingerprintjs/fingerprintjs-pro-svelte';
  const { getData, data, isLoading, error } = useVisitorData(
    { extendedResult: true },
    { immediate: false }
  );
</script>

<div>
  <button on:click={() => getData()}>Get visitor data</button>
  {#if $isLoading} Loading... {/if}
  {#if $error} {$error.message} {/if}
  {#if $data}
    <pre>{JSON.stringify($data, null, 2)}</pre>
  {/if}
</div>
```

### Documentation

You can find the full documentation in the official [GitHub repository](https://github.com/fingerprintjs/fingerprintjs-pro-svelte). The repository also contains [example applications](https://github.com/fingerprintjs/fingerprintjs-pro-svelte/tree/main/examples) demonstrating the usage of the library.