Quick Start

Add one line of code and start seeing real user sessions, heatmaps, and form data in minutes.

Add the script tag

The simplest way to get started. Add this to your HTML:

HTML
<script
  src="https://cdn.traceflair.com/tracker.js" crossorigin="anonymous"
  data-site-id="YOUR_SITE_ID"
  data-consent="opt-in"
  defer
></script>

By default, Traceflair uses opt-in consent. No data is collected until the user grants consent. Change to opt-out or implied via the data-consent attribute or consent config option.

Keep crossorigin="anonymous". Without it the browser reports any error thrown inside the tracker as a bare "Script error." with no message, file or line — in your error tracking as well as ours. If you self-host the script from an origin that does not send Access-Control-Allow-Origin, remove the attribute or add the header.

Or install via npm

For frameworks and build tools:

Terminal
npm install @traceflair/core @traceflair/recorder @traceflair/heatmap

Then import and initialize:

JavaScript
import Traceflair from '@traceflair/core';
import { recorderPlugin } from '@traceflair/recorder';
import { heatmapPlugin } from '@traceflair/heatmap';

Traceflair.init({
  siteId: 'YOUR_SITE_ID',
  consent: 'opt-in',
  plugins: [
    recorderPlugin({ maskInputs: true }),
    heatmapPlugin({ trackClicks: true }),
  ],
});

Configure with TypeScript

Full control with the programmatic API:

TypeScript
import Traceflair from '@traceflair/core';
import { recorderPlugin } from '@traceflair/recorder';
import { heatmapPlugin } from '@traceflair/heatmap';
import { funnelPlugin } from '@traceflair/funnel';
import { formsPlugin } from '@traceflair/forms';
import { errorPlugin } from '@traceflair/errors';
import { vitalsPlugin } from '@traceflair/vitals';

Traceflair.init({
  siteId: 'YOUR_SITE_ID',
  endpoint: 'https://your-server.com/v1/events',
  consent: 'opt-in',
  debug: false,
  plugins: [
    recorderPlugin({
      maskInputs: true,
      trackNetwork: true,
      trackConsole: true,
    }),
    heatmapPlugin({
      trackClicks: true,
      trackMoves: true,
      trackScroll: true,
    }),
    funnelPlugin({
      funnels: [{
        id: 'signup',
        name: 'Signup Flow',
        steps: [
          { name: 'Landing', match: '/' },
          { name: 'Pricing', match: '/pricing' },
          { name: 'Signup', match: '/signup' },
        ],
      }],
    }),
    formsPlugin(),
    errorPlugin(),
    vitalsPlugin(),
  ],
});

Verify installation

Open your site and check the browser console for:

Console Output
[Traceflair] Initialized with siteId: YOUR_SITE_ID
[Traceflair] Plugins loaded: recorder, heatmap, funnel, forms, errors, vitals
[Traceflair] Consent mode: opt-in (waiting for grant)

To grant consent programmatically:

JavaScript
Traceflair.consent.grant();  // Start tracking
Traceflair.consent.revoke(); // Stop and delete data

See what your users see. Fix what they struggle with.

Start your 14-day free trial in under 5 minutes. No credit card needed.

Start Your Free Trial Now