Fingerprinting-Api Quickstart Guide

Welcome to Fingerprinting-Api! This quickstart guide will help you get started with our API, enabling you to create your first API key and explore the full potential of our platform.

Sign Up
- Visit the Sign-Up Page.
- Create your account and log in.
Integrate the API
- Navigate to Settings → Integration.
- Copy the code snippet provided:
```
<script src="my_integration_url" type="text/javascript"></script>
```
- Implementation Recommendations:
  - Direct Integration: Add the script directly to your website's index.html file for optimal performance.
  - Alternative Methods: While third-party tools like Google Tag Manager (GTM) can be used, we strongly recommend embedding the script directly into your website to ensure seamless integration.

Step 2: Make Your First API Request

Generate Your API Key
- Go to the Settings page and create your API key. This key is essential for authenticating all your API requests.
Test the API
- Visit the API Reference Page.
- Select an API endpoint and test it using your newly generated API key.

Frontend Integration

After completing Step 1: Sign Up and Integration, you can integrate the API into your website frontend application to retrieve visitorId and visitId. Utilize this data to harness the power of our API and make informed decisions based on visitor insights.

Example: Simple JS inside HTML document

<script>
    const FpApiInstance = new FpApi();

    // Wait for the async initialization to finish
    FpApiInstance.ready().then(() => {
        console.log('visitId:', FpApiInstance.visitId);
        console.log('visitorId:', FpApiInstance.visitorId);
    });
</script>

React

const MyComponent = () => {
    const [visitData, setVisitData] = useState({});

    useEffect(() => {
        // Ensure FpApi is available globally
        if (typeof window.FpApi !== 'undefined') {
            const FpApiInstance = new window.FpApi();

            // Wait for the async initialization to finish
            FpApiInstance.ready().then(() => {
                console.log('visitId:', FpApiInstance.visitId);
                console.log('visitorId:', FpApiInstance.visitorId);
                setVisitData({
                    visitId: FpApiInstance.visitId,
                    visitorId: FpApiInstance.visitorId,
                });
            });
        } else {
            console.error('FpApi is not available on the global window object.');
        }
    }, []);

    return (
        <div>
            <h1>Using FpApi in React</h1>
            <p>{JSON.stringify(visitData)}</p>
        </div>
    );
};

Angular

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-fpapi',
  template: `
    <div>
      <h1>Using FpApi in Angular</h1>
      <p>{{ visitData | json }}</p>
    </div>
  `,
  styles: []
})
export class FpapiComponent implements OnInit {
  visitData: { visitId?: string; visitorId?: string } = {};

  constructor() { }

  ngOnInit(): void {
    // Ensure FpApi is available globally
    if (typeof (window as any).FpApi !== 'undefined') {
      const FpApiInstance = new (window as any).FpApi();

      // Wait for the async initialization to finish
      FpApiInstance.ready().then(() => {
        console.log('visitId:', FpApiInstance.visitId);
        console.log('visitorId:', FpApiInstance.visitorId);
        this.visitData = {
          visitId: FpApiInstance.visitId,
          visitorId: FpApiInstance.visitorId,
        };
      }).catch((error: any) => {
        console.error('Error initializing FpApi:', error);
      });
    } else {
      console.error('FpApi is not available on the global window object.');
    }
  }
}