Svelte

The Fingerprint Svelte SDK integrates Fingerprint into Svelte applications. It supports all capabilities of the JavaScript agent including a built-in caching mechanism. See the Svelte quickstart for a step-by-step guide to get started.

How to install

Add @fingerprint/svelte as a dependency to your application.

NPM

npm install @fingerprint/svelte

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

Svelte

// src/App.svelte
<script>
  import { FingerprintProvider } from '@fingerprint/svelte'
  import VisitorData from './VisitorData.svelte'

  const options = {
    apiKey: 'PUBLIC_API_KEY',
    endpoints: 'https://metrics.yourwebsite.com',
    region: 'us',
  }
</script>

<FingerprintProvider {options}>
  <VisitorData />
</FingerprintProvider>

Use the useVisitorData hook in your components to identify visitors.

Svelte

// src/VisitorData.svelte
<script>
  import { useVisitorData } from '@fingerprint/svelte';
  const { getData, data, isLoading, error } = useVisitorData({ 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. The repository also contains example applications demonstrating the usage of the library.

Migration guide for Svelte SDK v3.0.0

Version 3.0.0 of the Svelte SDK switches from JavaScript agent v3 to JavaScript agent v4. It also adds Svelte 5 support (the svelte peer dependency is widened to ^4.0.0 || ^5.0.0).

1. Install the new version of the package:

NPM

npm install @fingerprint/svelte

2. Update the provider import and options.

The default caching strategy has changed from sessionStorage caching to no caching by default, aligned with the underlying JavaScript agent v4 default. To preserve the previous behavior, explicitly configure caching in the provider options (see example below).

Update provider imports and usage

<script>
  import {
    FpjsProvider,
    FingerprintJSPro,
  } from '@fingerprintjs/fingerprintjs-pro-svelte'
  import { FingerprintProvider } from '@fingerprint/svelte'

  const 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,
      ],
    },
  }
  const options = {
    cache: {
      storage: 'sessionStorage',
      duration: 3600,
    },
    apiKey: 'PUBLIC_API_KEY',
    endpoints: ['https://metrics.yourwebsite.com'],
  }
</script>

Also rename the component in your template from FpjsProvider to FingerprintProvider:

<FingerprintProvider {options}>
  <slot />
</FingerprintProvider>

3. Update useVisitorData calls and result field names:

Update visitor data usage

import { useVisitorData } from '@fingerprintjs/fingerprintjs-pro-svelte';
import { useVisitorData } from '@fingerprint/svelte'; 

const { getData, data, isLoading, error } = useVisitorData(
  { extendedResult: true },
  { immediate: false },
);
// `immediate` can now be set in the first argument
const { getData, data, isLoading, isFetched, error } = useVisitorData({ immediate: false });

const { visitorId, requestId } = await getData();
console.log(visitorId, requestId);
const { visitor_id, event_id } = await getData();
console.log(visitor_id, event_id);

The v4 agent uses snake_case field names. requestId is now event_id, and visitorId is now visitor_id.