Skip to main content

JavaScript agent v4 support coming soon

This client SDK currently supports JavaScript agent v3. If you need JavaScript agent v4 today, use it directly or see the current integration compatibility table.
The Fingerprint Svelte SDK is an easy way to integrate Fingerprint into your Svelte application. It supports all capabilities of the JS agent and provides a built-in caching mechanism. You can view our 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.
npm install @fingerprintjs/fingerprintjs-pro-svelte
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
// 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
// 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. The repository also contains example applications demonstrating the usage of the library.