Skip to main content

Quick Start

Get the JavaScript SDK running in your application in 5 minutes.

Basic Setup​

import SimplrFraud from '@simplr-ai/js';

// 1. Initialize the SDK
const simplr = new SimplrFraud({
  collectBiometrics: true,  // Enable keystroke/mouse tracking
  autoStart: true           // Start collecting immediately
});

// 2. Wait for initialization (optional but recommended)
await simplr.initialize();

// 3. Collect signals when needed
const signals = await simplr.collect();

console.log(signals);
// {
//   device: { fingerprint: 'fp_xxx', is_headless: false, ... },
//   behavior: { keystroke: {...}, mouse: {...} },
//   timestamp: '2024-01-15T10:30:00Z'
// }

Form Integration​

The most common use case is collecting signals on form submission:

const simplr = new SimplrFraud({
  collectBiometrics: true,
  autoStart: true
});

document.querySelector('#signup-form').addEventListener('submit', async (e) => {
  e.preventDefault();

  // Collect all signals
  const signals = await simplr.collect();

  // Submit to your backend
  const response = await fetch('/api/signup', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      email: document.querySelector('#email').value,
      password: document.querySelector('#password').value,
      signals: signals
    })
  });

  // Handle response
  const result = await response.json();
  if (result.risk_level === 'critical') {
    showError('Unable to create account. Please contact support.');
  } else if (result.risk_level === 'high') {
    redirectTo2FA();
  } else {
    redirectToDashboard();
  }
});

Tracking Specific Inputs​

For better biometric data, track specific form fields:

const simplr = new SimplrFraud({ collectBiometrics: true });

// Get tracking props for inputs
const emailProps = simplr.trackInput('email');
const passwordProps = simplr.trackInput('password');

// Apply to your inputs
const emailInput = document.querySelector('#email');
emailInput.addEventListener('input', emailProps.onInput);
emailInput.addEventListener('focus', emailProps.onFocus);
emailInput.addEventListener('blur', emailProps.onBlur);

Configuration Options​

const simplr = new SimplrFraud({
  // Enable behavioral biometrics collection
  collectBiometrics: true,

  // Start tracking immediately on init
  autoStart: true,

  // Custom device ID (optional, auto-generated if not provided)
  deviceId: 'custom-device-id',

  // Enable debug logging
  debug: false
});

SDK Methods​

initialize()​

Initialize the SDK and start collecting fingerprints:

await simplr.initialize();

collect()​

Collect all signals (device + behavior):

const signals = await simplr.collect();

collectDeviceSignals()​

Collect only device fingerprint:

const device = await simplr.collectDeviceSignals();

collectBehaviorSignals()​

Collect only behavioral metrics:

const behavior = simplr.collectBehaviorSignals();

trackInput(fieldName)​

Get tracking handlers for a form field:

const props = simplr.trackInput('email');
// Returns: { onInput, onFocus, onBlur, onKeyDown, onKeyUp }

startTracking() / stopTracking()​

Control behavioral tracking:

simplr.startTracking();  // Start collecting mouse/keyboard data
simplr.stopTracking();   // Stop collecting

reset()​

Clear collected behavioral data:

simplr.reset();

Response Structure​

interface CollectedSignals {
  device: {
    fingerprint: string;
    fingerprint_components: {
      canvas: string;
      webgl: string;
      audio: string;
      fonts: string;
    };
    device_id: string;
    device_id_created_at: string;
    platform: string;
    os: string;
    os_version: string;
    browser: string;
    browser_version: string;
    screen_resolution: string;
    timezone: string;
    language: string;
    is_headless: boolean;
    is_webdriver: boolean;
    canvas_blocked: boolean;
  };
  behavior: {
    keystroke: {
      avg_delay: number;
      delay_std_dev: number;
      avg_hold_time: number;
      typing_speed: number;
      correction_rate: number;
      keystroke_count: number;
    };
    mouse: {
      avg_velocity: number;
      avg_acceleration: number;
      total_distance: number;
      direction_changes: number;
      straightness_ratio: number;
      click_count: number;
    };
    form_fill_time_ms: number;
  };
  timestamp: string;
}

Next Steps​