ThumbmarkJS

https://docs.thumbmarkjs.com
Admin
ThumbmarkJS is an open-source, client-side fingerprinting library for the web, known for its high...
Tokens:11,249
Snippets:190
Trust Score:6.3
Update:1 month ago
Show doc for...
Tokens:
Raw
### Example

Source: https://docs.thumbmarkjs.com/docs/components/plugins

This is an example of the plugins configuration.

```json
"plugins": {
    "plugins": [
    "PDF Viewer|internal-pdf-viewer|Portable Document Format",
    "Chrome PDF Viewer|internal-pdf-viewer|Portable Document Format",
    "Chromium PDF Viewer|internal-pdf-viewer|Portable Document Format",
    "Microsoft Edge PDF Viewer|internal-pdf-viewer|Portable Document Format",
    "WebKit built-in PDF|internal-pdf-viewer|Portable Document Format"
    ]
},

```

--------------------------------

### Install with NPM

Source: https://docs.thumbmarkjs.com/docs/category/installing--usage

Install the NPM package @thumbmarkjs/thumbmarkjs.

```bash
npm install @thumbmarkjs/thumbmarkjs
```

--------------------------------

### WebGL Configuration Example

Source: https://docs.thumbmarkjs.com/docs/components/webgl

This is an example of how the WebGL component might be configured.

```json
"webgl": {  
    "commonPixelsHash": "72ec1429cf00d77fb4c381d3950fc0b0"
}  
```

--------------------------------

### Installation

Source: https://docs.thumbmarkjs.com/docs/integrations/usage-react

Install the necessary packages for React integration.

```bash
npm install @thumbmarkjs/thumbmarkjs @thumbmarkjs/react  
```

--------------------------------

### Install with NPM

Source: https://docs.thumbmarkjs.com/docs/installation/usage-npm

The command to install the ThumbmarkJS NPM package.

```bash
npm install @thumbmarkjs/thumbmarkjs  

```

--------------------------------

### Audio Component Configuration Example

Source: https://docs.thumbmarkjs.com/docs/components/audio

An example of how the audio component might be configured, showing sampleHash, maxChannels, and channelCountMode.

```json
"audio": {
    "sampleHash": 1168.9068228197468,
    "maxChannels": 1,
    "channelCountMode": "max"
},

```

--------------------------------

### System Component Example

Source: https://docs.thumbmarkjs.com/docs/components/system

An example of the system component's configuration, showing details like platform, user agent, browser information, and cookie status.

```json
"system": {
    "platform": "Linux x86_64",
    "productSub": "20030107",
    "product": "Gecko",
    "useragent": "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/136.0.0.0 Safari/537.36",
    "hardwareConcurrency": 8,
    "browser": {
    "name": "Chrome",
    "version": "136.0"
    },
    "applePayVersion": 0,
    "cookieEnabled": true
},

```

--------------------------------

### Installation

Source: https://docs.thumbmarkjs.com/docs/integrations/usage-preact

Install the necessary packages for Preact integration.

```bash
npm install @thumbmarkjs/thumbmarkjs @thumbmarkjs/preact  

```

--------------------------------

### Using ThumbmarkJS client directly in a NextJS app

Source: https://docs.thumbmarkjs.com/docs/installation/usage-npm

Example of using the ThumbmarkJS client directly within a NextJS application, ensuring the get() call runs on the client side using the useEffect hook.

```jsx
"use client"  
  
import React, { useState, useEffect } from 'react';  
import { Thumbmark } from "@thumbmarkjs/thumbmarkjs";  
  
function Fingerprint() {  
    const [thumbmark, setThumbmark] = useState('');  
    
    useEffect(() => {  
      const tm = new Thumbmark;  
      tm.get()  
        .then((result) => {  
          setThumbmark(result.thumbmark);  
        })  
        .catch((error) => {  
          console.error('Error getting fingerprint:', error);  
        });  
    }, []);  
      
    return (  
      <>{thumbmark}</>  
    );  
  }  
  
export default Fingerprint  

```

--------------------------------

### Locales Configuration Example

Source: https://docs.thumbmarkjs.com/docs/components/locales

An example of how to configure the 'locales' component, specifying preferred languages and timezone.

```json
"locales": {
    "languages": "en-GB",
    "timezone": "Europe/Helsinki"
}
```

--------------------------------

### Installation

Source: https://docs.thumbmarkjs.com/docs/integrations/usage-angular

Install the necessary packages for Angular integration.

```bash
npm install @thumbmarkjs/thumbmarkjs @thumbmarkjs/angular  

```

--------------------------------

### Example Return Value

Source: https://docs.thumbmarkjs.com/docs/installation/basic-usage

The object returned by the get() method includes various properties like thumbmark, visitorId, components, and info.

```json
{
    thumbmark: string;          // The digital fingerprint hash
    visitorId?: string;         // Persistent visitor identifier (only when API key is set)
    components: {...};          // The components used to calculate thumbmark
    info: {...};                // Smart signals from the API: ip_address, classification, uniqueness
    version: string;            // The version of ThumbmarkJS used. Keep this up to date.
  
    // Present conditionally:
    elapsed?: Record<string, number>;  // Per-component timings — only when options.performance is true
    experimental?: {...};              // Experimental components — only when options.experimental is true
    requestId?: string;                // API request id, useful for support
    metadata?: string | object;        // Metadata you passed in, echoed back from the API
    error?: ThumbmarkError[];          // Structured error array, present only when something went wrong
}
```

--------------------------------

### Math Component Example

Source: https://docs.thumbmarkjs.com/docs/components/math

An example of the 'math' object output from the Math component, showing various calculated values.

```json
"math": {
    "acos": 1.0471975511965979,
    "asin": -9.614302481290016e-17,
    "cos": -4.854249971455313e-16,
    "largeCos": 0.7639704044417283,
    "largeSin": -0.6452512852657808,
    "largeTan": -0.8446024630198843,
    "sin": -1.9461946644816207e-16,
    "tan": 6.980860926542689e-14
},

```

--------------------------------

### With Options

Source: https://docs.thumbmarkjs.com/docs/integrations/usage-vue

Install the plugin with an API key and custom options.

```javascript
app.use(createThumbmarkPlugin({  
  apiKey: 'your-key',  
  options: {  
    timeout: 3000,  
    exclude: ['webgl']  
  }  
}));  

```

--------------------------------

### Permissions Example

Source: https://docs.thumbmarkjs.com/docs/components/permissions

This JSON object shows an example of how permissions might be represented, including their granted or prompted status.

```json
"permissions": {
    "accelerometer": "granted",
    "background-fetch": "granted",
    "background-sync": "granted",
    "camera": "prompt",
    "clipboard-read": "prompt",
    "clipboard-write": "granted",
    "display-capture": "prompt",
    "gyroscope": "granted",
    "geolocation": "prompt",
    "local-fonts": "prompt",
    "magnetometer": "granted",
    "microphone": "prompt",
    "midi": "prompt",
    "notifications": "prompt",
    "payment-handler": "granted",
    "persistent-storage": "prompt",
    "storage-access": "granted",
    "window-management": "prompt"
},

```

--------------------------------

### Installation

Source: https://docs.thumbmarkjs.com/docs/integrations/usage-vue

Install the ThumbmarkJS Vue package using npm.

```bash
npm install @thumbmarkjs/thumbmarkjs @thumbmarkjs/vue  

```

--------------------------------

### Hardware Information Example

Source: https://docs.thumbmarkjs.com/docs/components/hardware

An example of the JSON structure representing hardware information, including videocard details, architecture, device memory, and JS heap size limit.

```json
"hardware": {
    "videocard": {
        "vendor": "WebKit",
        "renderer": "WebKit WebGL",
        "version": "WebGL 1.0 (OpenGL ES 2.0 Chromium)",
        "shadingLanguageVersion": "WebGL GLSL ES 1.0 (OpenGL ES GLSL ES 1.0 Chromium)"
    },
    "architecture": 255,
    "deviceMemory": "8",
    "jsHeapSizeLimit": 4294705152
},

```

--------------------------------

### With API Key

Source: https://docs.thumbmarkjs.com/docs/integrations/usage-vue

Install the plugin with an API key.

```javascript
app.use(createThumbmarkPlugin({  
  apiKey: 'your-key'  
}));  

```

--------------------------------

### Speech Component Example

Source: https://docs.thumbmarkjs.com/docs/components/speech

An example of the output structure for the Speech component, showing voice details and hashes.

```json
"speech": {
    "details": {
        "voiceCount": 24,
        "voicesHash": "..."
    },
    "hash": "..."
}

```

--------------------------------

### Endpoint Path Resolution Examples

Source: https://docs.thumbmarkjs.com/docs/installation/api-endpoint

Demonstrates how ThumbmarkJS handles path appending based on the presence of a path or a trailing slash in the provided URL.

```javascript
// → POST https://your.domain.com/thumbmark  
new Thumbmark({ api_endpoint: 'https://your.domain.com' });  
  
// → POST https://your.domain.com/ingest   (path present, used as-is)  
new Thumbmark({ api_endpoint: 'https://your.domain.com/ingest' });  
  
// → POST https://your.domain.com/          (trailing slash, used as-is)  
new Thumbmark({ api_endpoint: 'https://your.domain.com/' });  
```

--------------------------------

### Canvas Component Example

Source: https://docs.thumbmarkjs.com/docs/components/canvas

An example of the canvas component configuration, showing the commonPixelsHash.

```json
"canvas": {
    "commonPixelsHash": "99592faf86726fa69469ff29a23a82bb"
}
```

--------------------------------

### Import with Javascript

Source: https://docs.thumbmarkjs.com/docs/category/installing--usage

A simple way to import the JSDelivr hosted UMD package.

```javascript
import ThumbmarkJS from 'https://cdn.jsdelivr.net/npm/@thumbmarkjs/thumbmarkjs@latest/dist/thumbmark.umd.min.js';
```

--------------------------------

### Caching Configuration

Source: https://docs.thumbmarkjs.com/docs/configuration/caching

Example of how to configure ThumbmarkJS with a cache lifetime.

```javascript
const t = new Thumbmark(  
    {  
        api_key: 'your-api-key',  
        cache_lifetime_in_ms: 60 * 1000 // sets a 1 minute cache lifetime  
        }  
    );   
const tm = await t.get();  

```

--------------------------------

### Font Widths Example

Source: https://docs.thumbmarkjs.com/docs/components/fonts

This example shows a JSON object representing font names and their measured widths, as determined by the fonts component.

```json
"fonts": {
    "Courier": 432.0703125,
    "Courier New": 432.0703125,
    "Lato": 465.26416015625,
    "Quicksand": 460.5841979980469,
    "Roboto": 448.83984375,
    "Roboto Condensed": 392.484375
},

```

--------------------------------

### Install the plugin

Source: https://docs.thumbmarkjs.com/docs/integrations/usage-vue

Install the ThumbmarkJS plugin in your Vue application.

```javascript
import { createApp } from 'vue';  
import { createThumbmarkPlugin } from '@thumbmarkjs/vue';  
  
const app = createApp(App);  
app.use(createThumbmarkPlugin());  
app.mount('#app');  


```

--------------------------------

### Example Custom Component: Fetch IP Address

Source: https://docs.thumbmarkjs.com/docs/configuration/custom-components

An example of a custom component function that fetches the user's IP address.

```javascript
function fetchIpAddress() {
  return new Promise((resolve, reject) => {
    fetch('http://checkip.amazonaws.com')
      .then(response => {
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }
        return response.text();
      })
      .then(ip => resolve({'ip_address': ip.trim()}))
      .catch(error => {
        console.error('There was a problem with the fetch operation:', error);
        reject(error);
      });
  });
}

```

--------------------------------

### Standalone Setup (Angular 16+)

Source: https://docs.thumbmarkjs.com/docs/integrations/usage-angular

Configure the application providers with `provideThumbmark` in `app.config.ts`.

```typescript
// app.config.ts  
import { ApplicationConfig } from '@angular/core';  
import { provideThumbmark } from '@thumbmarkjs/angular';  
  
export const appConfig: ApplicationConfig = {  
  providers: [  
    provideThumbmark({  
      apiKey: 'your-api-key', // optional  
    }),  
  ],  
};

```

--------------------------------

### Full customization of property names

Source: https://docs.thumbmarkjs.com/docs/configuration/property_naming

This example demonstrates how to fully customize local storage property names based on specific conditions.

```javascript
const t = new Thumbmark(  
    {
        api_key: 'your-api-key',
        property_name_factory: (name) => {
            if (name === 'visitor_id') {
                return 'your_visitor_id_property_name';
            } else if (name === 'cache') {
                return 'your_cache_property_name';
            }
            return `your_prefix_${name}`; // fallback for future-proofing
        },
    }
);

```

--------------------------------

### Get Identifiers

Source: https://docs.thumbmarkjs.com/docs/installation/basic-usage

Call the get() method on the Thumbmark instance to generate identifiers and associated data.

```javascript
const tm_data = await t.get();  
```

--------------------------------

### Screen Component Example

Source: https://docs.thumbmarkjs.com/docs/components/screen

This JSON object represents the data collected by the screen component, including touchscreen capabilities, maximum touch points, color depth, and media query matches.

```json
"screen": {
    "is_touchscreen": false,
    "maxTouchPoints": 0,
    "colorDepth": 24,
    "mediaMatches": [
    "prefers-contrast: no-preference",
    "any-hover: hover",
    "any-pointer: fine",
    "pointer: fine",
    "hover: hover",
    "update: fast",
    "prefers-reduced-motion: no-preference",
    "prefers-reduced-transparency: no-preference",
    "scripting: enabled",
    "forced-colors: none"
    ]
},

```

--------------------------------

### Interactive Button

Source: https://docs.thumbmarkjs.com/blog/mdx-blog-post

An example of using JSX to create an interactive button within a blog post.

```jsx
<button onClick={() => alert('button clicked!')}>Click me!</button>
```

--------------------------------

### Usage with AsyncPipe (Recommended)

Source: https://docs.thumbmarkjs.com/docs/integrations/usage-angular

Example of using `ThumbmarkService` with `AsyncPipe` in a standalone Angular component.

```typescript
import { Component, OnInit } from '@angular/core';  
import { CommonModule } from '@angular/common';  
import { ThumbmarkService } from '@thumbmarkjs/angular';  
  
@Component({
  selector: 'app-example',
  standalone: true,
  imports: [CommonModule],
  template: `  
    <div *ngIf="thumbmarkService.isLoading$ | async">Loading...</div>  
    <div *ngIf="!(thumbmarkService.isLoading$ | async)">  
      <p>Thumbmark: {{ thumbmarkService.thumbmark$ | async }}</p>  
      <p>Visitor ID: {{ thumbmarkService.visitorId$ | async }}</p>  
      <button (click)="thumbmarkService.reload()">Reload</button>  
    </div>  
  `,
})
export class ExampleComponent {
  constructor(public thumbmarkService: ThumbmarkService) {}
}

```

--------------------------------

### Simple property name renaming

Source: https://docs.thumbmarkjs.com/docs/configuration/property_naming

This example shows a basic implementation of renaming local storage properties by appending a suffix.

```javascript
const t = new Thumbmark(  
    {  
        api_key: 'your-api-key',  
        property_name_factory: (name) => `${name}_your_suffix`,
    }
);

```

--------------------------------

### Error Handling Example

Source: https://docs.thumbmarkjs.com/docs/installation/basic-usage

A partial result object showing how errors are surfaced in the 'error' array.

```json
{
    thumbmark: 'xxxx',
    components: { ... },
    info: { ... },
    version: '1.7.7',
    error: [
        { type: 'component_timeout', message: "Component 'webrtc' timed out", component: 'webrtc' },
    ],
}
```

--------------------------------

### Passing Custom Metadata

Source: https://docs.thumbmarkjs.com/docs/installation/webhooks

Example of how to pass custom metadata when creating a Thumbmark instance to correlate webhook events.

```javascript
const tm = new Thumbmark({
  api_key: 'your-key',
  metadata: { userId: 'abc123', source: 'checkout' }
});

```

--------------------------------

### Usage by Subscribing Manually

Source: https://docs.thumbmarkjs.com/docs/integrations/usage-angular

Example of manually subscribing to observables from `ThumbmarkService` in an Angular component.

```typescript
import { Component, OnInit, OnDestroy } from '@angular/core';  
import { Subscription } from 'rxjs';  
import { ThumbmarkService } from '@thumbmarkjs/angular';  
  
@Component({
  selector: 'app-example',
  template: `  
    <div *ngIf="isLoading">Loading...</div>  
    <div *ngIf="!isLoading">  
      <p>Thumbmark: {{ thumbmark }}</p>  
      <p>Visitor ID: {{ visitorId }}</p>  
      <button (click)="reload()">Reload</button>  
    </div>  
  `,
})
export class ExampleComponent implements OnInit, OnDestroy {
  thumbmark: string | null = null;  
  visitorId: string | null = null;  
  isLoading = false;  
  
  private subscriptions = new Subscription();  
  
  constructor(private thumbmarkService: ThumbmarkService) {}
  
  ngOnInit(): void {
    this.subscriptions.add(
      this.thumbmarkService.thumbmark$.subscribe(v => (this.thumbmark = v))
    );
    this.subscriptions.add(
      this.thumbmarkService.visitorId$.subscribe(v => (this.visitorId = v))
    );
    this.subscriptions.add(
      this.thumbmarkService.isLoading$.subscribe(v => (this.isLoading = v))
    );
  }
  
  reload(): void {
    this.thumbmarkService.reload();
  }
  
  ngOnDestroy(): void {
    this.subscriptions.unsubscribe();
  }
}

```

--------------------------------

### WebRTC Component Output Example

Source: https://docs.thumbmarkjs.com/docs/components/webrtc

This JSON structure represents the output of the WebRTC component, showing supported codecs, extensions, and candidate type.

```json
"webrtc": {
    "details": {
        "supported": true,
        "audio": { "count": 4, "hash": "..." },
        "video": { "count": 7, "hash": "..." },
        "extensionsHash": "...",
        "candidateType": "host"
    },
    "hash": "..."
}

```

--------------------------------

### Use the composable

Source: https://docs.thumbmarkjs.com/docs/integrations/usage-vue

Use the useThumbmark composable in your Vue component to get thumbmark data.

```vue
<template>  
  <div v-if="isLoading">Loading...</div>  
  <div v-else-if="error">Error: {{ error.message }}</div>  
  <div v-else>  
    <div>Visitor ID: {{ visitorId }}</div>  
    <div>Thumbmark: {{ thumbmark }}</div>  
    <button @click="reload">Reload</button>  
  </div>  
</template>  
  
<script setup>  
import { useThumbmark } from '@thumbmarkjs/vue';  
  
const { thumbmark, visitorId, isLoading, error, reload } = useThumbmark();  
</script>  


```

--------------------------------

### Enable experimental components

Source: https://docs.thumbmarkjs.com/docs/components/experimental

Initialize the Thumbmark instance with the experimental flag set to true to access additional components.

```javascript
const t = new Thumbmark({ experimental: true });  
const { experimental } = await t.get();  
```

--------------------------------

### Instantiate Thumbmark with options

Source: https://docs.thumbmarkjs.com/docs/configuration/options

Initialize the Thumbmark class with a custom API key, exclusion list, and timeout setting.

```javascript
const t = new Thumbmark({ api_key: 'xxxxxxxxxxx', exclude: ['permissions'], timeout: 7000 })  
```

--------------------------------

### Initialize ThumbmarkJS

Source: https://docs.thumbmarkjs.com/docs/installation/basic-usage

Instantiate the Thumbmark class, optionally passing an API key.

```javascript
const t = new Thumbmark({ api_key: 'xxxxxxxxxxxx' });  
```

--------------------------------

### info

Source: https://docs.thumbmarkjs.com/docs/components/pro

A bundle of "smart signals" derived server-side.

```json
info: {  
    ip_address?: {  
        ip_address: string;  
        ip_identifier: string;  
        autonomous_system_number: number;  
        ip_version: 'v4' | 'v6';  
    };
    classification?: {  
        tor: boolean;  
        vpn: boolean;  
        bot: boolean;  
        datacenter: boolean;  
        danger_level: number; // 0 (safe) to 5 (block)  
    };
    uniqueness?: {  
        score: number | string;  
    };
}  

```

--------------------------------

### Enable experimental components

Source: https://docs.thumbmarkjs.com/docs/configuration/options

Set experimental to true to resolve additional components like mathml, which are exposed on ThumbmarkResponse.experimental but excluded from the hash.

```javascript
const t = new Thumbmark({ experimental: true })
```

--------------------------------

### Import UMD package with options

Source: https://docs.thumbmarkjs.com/docs/installation/usage-import

To pass Options like the API key, you'll pass them to the class constructor like so:

```javascript
import('https://cdn.jsdelivr.net/npm/@thumbmarkjs/thumbmarkjs/dist/thumbmark.umd.js')
.then(() => {
    const t = new ThumbmarkJS.Thumbmark({ api_key: 'xxxxxxxxxxxx' });
    t.get().then((tm) => {
        console.log(tm);
    });
})

```

--------------------------------

### Enable performance monitoring

Source: https://docs.thumbmarkjs.com/docs/configuration/options

Enables performance tracking to expose component resolution times in the ThumbmarkResponse.elapsed property.

```javascript
const t = new Thumbmark({ performance: true })  
```

--------------------------------

### Initialize Thumbmark with Custom Endpoint

Source: https://docs.thumbmarkjs.com/docs/installation/api-endpoint

Pass the api_endpoint option during Thumbmark initialization to override the default URL.

```javascript
const t = new Thumbmark({ api_endpoint: 'https://your.domain.com' });  
```

--------------------------------

### Configure API key

Source: https://docs.thumbmarkjs.com/docs/configuration/options

Provide an API key to enable server-side fingerprinting components for improved identifier uniqueness.

```javascript
const t = new Thumbmark({ api_key: 'xxxxxxxxxxx' })  
```

--------------------------------

### With Options

Source: https://docs.thumbmarkjs.com/docs/integrations/usage-preact

Configure ThumbmarkJS by passing options to the ThumbmarkProvider, such as timeout and exclusion lists.

```jsx
<ThumbmarkProvider
  apiKey="your-key"
  options={{
    timeout: 3000,
    exclude: ['webgl']
  }}
>
  <MyComponent />
</ThumbmarkProvider>

```

--------------------------------

### Including a Custom Component

Source: https://docs.thumbmarkjs.com/docs/configuration/custom-components

Demonstrates how to include a custom component into the ThumbmarkJS fingerprinting process.

```javascript
const t = new Thumbmark();
t.includeComponent('my-custom-component', myCustomComponentFunction)
const tm = await t.get();

```

--------------------------------

### Configure custom API endpoint

Source: https://docs.thumbmarkjs.com/docs/configuration/options

Set a custom API endpoint and provide an API key for enterprise configurations.

```javascript
const t = new Thumbmark({  
    api_key: 'xxxxxxxxxxx',  
    api_endpoint: 'https://api.thumbmarkjs.com'  
    })
```

--------------------------------

### Including the IP Address Component

Source: https://docs.thumbmarkjs.com/docs/configuration/custom-components

Shows how to include the previously defined 'fetchIpAddress' custom component.

```javascript
const t = new Thumbmark();
t.includeComponent('ip_address', fetchIpAddress)
const tm = await t.get();

```

--------------------------------

### With API Key

Source: https://docs.thumbmarkjs.com/docs/integrations/usage-preact

Provide an API key to the ThumbmarkProvider for authentication with the hosted ThumbmarkJS API.

```jsx
<ThumbmarkProvider apiKey="your-key">
  <MyComponent />
</ThumbmarkProvider>

```

--------------------------------

### Import UMD package

Source: https://docs.thumbmarkjs.com/docs/installation/usage-import

A simple way to import the JSDelivr hosted UMD package is as follows:

```javascript
import('https://cdn.jsdelivr.net/npm/@thumbmarkjs/thumbmarkjs/dist/thumbmark.umd.js')
.then(() => {
    const t = new ThumbmarkJS.Thumbmark();
    t.get().then((tm) => {
        console.log(tm);
    });
})

```

--------------------------------

### Include specific components

Source: https://docs.thumbmarkjs.com/docs/configuration/options

Restrict fingerprinting to a specific list of client-side components using top-level names or dot-separated paths.

```javascript
const t = new Thumbmark({ include: ['canvas', 'audio', 'webgl'] })  
```

--------------------------------

### Configure ThumbmarkJS Timeout

Source: https://docs.thumbmarkjs.com/docs/configuration/options

Adjust the default fingerprinting timeout in milliseconds to accommodate specific performance needs.

```javascript
const t = new Thumbmark({ timeout: 7000 })
```

--------------------------------

### Configure ThumbmarkJS Stabilization

Source: https://docs.thumbmarkjs.com/docs/configuration/options

Set stabilization rules to exclude components that vary across different browsing environments or contexts.

```javascript
const t = new Thumbmark({ stabilize: ['private', 'iframe', 'vpn'] })
```

--------------------------------

### Configuration Options

Source: https://docs.thumbmarkjs.com/docs/integrations/usage-angular

Pass configuration options like `timeout` and `exclude` to `provideThumbmark`.

```typescript
provideThumbmark({
  apiKey: 'your-api-key',
  options: {
    timeout: 3000,
    exclude: ['webgl'],
  },
}),

```

--------------------------------

### Wrap your app or a specific component

Source: https://docs.thumbmarkjs.com/docs/integrations/usage-preact

Wrap your application or a specific component with ThumbmarkProvider to enable ThumbmarkJS functionality.

```jsx
import { ThumbmarkProvider } from '@thumbmarkjs/preact';  
  
function App() {
  return (
    <ThumbmarkProvider>
      <MyComponent />
    </ThumbmarkProvider>
  );
}

```

--------------------------------

### Attach metadata to requests

Source: https://docs.thumbmarkjs.com/docs/configuration/options

Pass static or dynamic metadata to correlate fingerprinting results with internal application state. Metadata is excluded from the fingerprint hash and requires an API key.

```javascript
// Static  
const t = new Thumbmark({  
    api_key: 'xxxxxxxxxxx',  
    metadata: { userId: 'abc123', source: 'checkout' },  
})  
  
// Dynamic  
const t = new Thumbmark({  
    api_key: 'xxxxxxxxxxx',  
    metadata: () => ({ timestamp: Date.now(), sessionId: getSessionId() }),  
})
```

--------------------------------

### Configure simple request mode

Source: https://docs.thumbmarkjs.com/docs/configuration/options

Enables CORS simple request mode to bypass preflight checks when using a proxy that injects API keys server-side.

```javascript
const t = new Thumbmark({  
    api_endpoint: 'https://your-proxy.example.com/',  
    simple_request: true,  
})  
```

--------------------------------

### Disable ThumbmarkJS logging

Source: https://docs.thumbmarkjs.com/docs/configuration/options

Use this configuration to opt out of the default ~0.01% sampling rate for analysis data.

```javascript
const t = new Thumbmark({ logging: false })
```

--------------------------------

### Wrap your app or a specific component

Source: https://docs.thumbmarkjs.com/docs/integrations/usage-react

Wrap your application or a component with ThumbmarkProvider to enable ThumbmarkJS functionality.

```jsx
import { ThumbmarkProvider } from '@thumbmarkjs/react';  
  
function App() {
  return (
    <ThumbmarkProvider>
      <MyComponent />
    </ThumbmarkProvider>
  );
}

```

--------------------------------

### Exclude specific components

Source: https://docs.thumbmarkjs.com/docs/configuration/options

Filter out specific client-side components from the fingerprinting process.

```javascript
const t = new Thumbmark({ exclude: ['permissions'] })  
```

--------------------------------

### Use the hook

Source: https://docs.thumbmarkjs.com/docs/integrations/usage-react

Use the useThumbmark hook within your components to access thumbmark data, visitor ID, loading state, and error state.

```jsx
import { useThumbmark } from '@thumbmarkjs/react';  
  
function MyComponent() {
  const { thumbmark, visitorId, isLoading, error, reload } = useThumbmark();
  
  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;
  
  return (
    <div>
      <div>Visitor ID: {visitorId}</div>
      <div>Thumbmark: {thumbmark}</div>
      <button onClick={reload}>Reload</button>
    </div>
  );
}

```

--------------------------------

### Use the hook

Source: https://docs.thumbmarkjs.com/docs/integrations/usage-preact

Use the useThumbmark hook within your components to access thumbmark data and related functions.

```jsx
import { useThumbmark } from '@thumbmarkjs/preact';  
  
function MyComponent() {
  const { thumbmark, visitorId, isLoading, error, reload } = useThumbmark();  
  
  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;
  
  return (
    <div>
      <div>Visitor ID: {visitorId}</div>
      <div>Thumbmark: {thumbmark}</div>
      <button onClick={reload}>Reload</button>
    </div>
  );
}

```

--------------------------------

### Webhook Event Format

Source: https://docs.thumbmarkjs.com/docs/installation/webhooks

The format of the event sent to webhooks, including timestamp, eventName, and payload details.

```json
[
    {
        "timestamp":1756200078,
        "eventName":"thumbmark.success",
        "payload": {
            "thumbmark":"xxxx",
            "visitorId":"yyyy",
            "components":{ ... }
            "info":{ ... },
            "classification":{ ... },
            "uniqueness":{ ... },
            "visitor":{ ... },
            "requestId":"zzzz",
            "metadata": ... // present if set on the client
        }
    },
    { ... }, // might have multiple events
]

```

--------------------------------

### Override permission checks

Source: https://docs.thumbmarkjs.com/docs/configuration/options

Define a custom list of Permission API names to query using the permissions_to_check option.

```javascript
const t = new Thumbmark({  
    permissions_to_check: ['geolocation', 'notifications', 'camera'],  
})
```

--------------------------------

### visitorId

Source: https://docs.thumbmarkjs.com/docs/components/pro

A persistent visitor identifier. This is what you should use as the primary identifier when you have an API key — it is significantly more stable and significantly more unique than the open-source thumbmark alone.

```javascript
const { visitorId } = await t.get();  
```
Tokens:
Raw