Quick Start

Prerequisites

Before you begin, you’ll need:

An Outlit account with an organization

Your public key from Settings → Website Tracking

Step 1: Add the Tracker

Choose your preferred integration method:

Script Tag
NPM
React

Add this script tag before the closing </body> tag on every page:

<script
  src="https://cdn.outlit.ai/stable/outlit.js"
  data-public-key="pk_your_public_key_here"
  async
></script>

Replace pk_your_public_key_here with your actual public key from Settings.

Install the package:

npm install @outlit/browser
# or
pnpm add @outlit/browser
# or
yarn add @outlit/browser

Initialize once at app startup:

import outlit from '@outlit/browser'

outlit.init({ publicKey: 'pk_your_public_key_here' })

Install the package:

npm install @outlit/browser

Wrap your app with the provider:

// app/layout.tsx or _app.tsx
import { OutlitProvider } from '@outlit/browser/react'

export default function RootLayout({ children }) {
  return (
    <OutlitProvider publicKey="pk_your_public_key_here" trackPageviews>
      {children}
    </OutlitProvider>
  )
}

Step 2: Verify Installation

After adding the tracker, visit your website and:

Open browser DevTools → Network tab
Filter by “outlit” or “events”
You should see requests to app.outlit.ai/api/i/v1/...

Look for requests to app.outlit.ai/api/i/v1/ with a 200 status code.

If you don’t see requests, check that your public key is correct and the domain is allowed in your tracking settings.

Step 3: Track Custom Events

Beyond automatic pageviews and form captures, track events that matter to your business:

// After a user views pricing
window.outlit.track('pricing_viewed', {
  plan: 'enterprise'
})

// After a user starts a trial
window.outlit.track('trial_started', {
  plan: 'pro',
  source: 'pricing_page'
})

Step 4: Identify Visitors

When a visitor signs up, logs in, or submits a form with their email, identify them:

// After login or signup
outlit.identify({
  email: 'user@example.com',
  userId: 'usr_abc123', // Your internal user ID (optional)
  traits: {
    name: 'Jane Doe',
    company: 'Acme Inc',
    plan: 'pro'
  }
})

Good news: If your signup/login uses a standard HTML form with an email field, auto-identify handles this automatically! Manual identify() calls are only needed for:

JavaScript-based auth (OAuth, magic links)
Server-side authentication
Adding additional traits after login

What’s Captured Automatically

With the default configuration, Outlit automatically captures:

Event	Trigger	Data
Pageview	Every navigation	URL, path, title, referrer, UTM params
Form Submit	Form submission	Form ID, field values (sensitive fields removed)
Auto-Identify	Form with email	Email + name extracted, visitor linked to profile
Engagement	Page exit/navigation	Active time, total time on page
Calendar Booking	Cal.com/Calendly embed	Provider, event type, scheduled time

Zero-code identification: When a visitor submits a form with an email field (signup, contact, demo request), they’re automatically identified and linked to a customer profile. No manual identify() call needed! Learn more

Next Steps

Browser Integration

Deep dive into browser tracking options

React Integration

Learn about React hooks and providers

Server-Side Tracking

Track events from your backend

Identity Resolution

Understand how profiles are merged

Getting Started

Browser Tracking

Server-Side Tracking

Identity & Resolution

Prerequisites

Step 1: Add the Tracker

Step 2: Verify Installation

Step 3: Track Custom Events

Step 4: Identify Visitors

What’s Captured Automatically

Next Steps

Browser Integration

React Integration

Server-Side Tracking

Identity Resolution

Getting Started

Browser Tracking

Server-Side Tracking

Identity & Resolution

​Prerequisites

​Step 1: Add the Tracker

​Step 2: Verify Installation

​Step 3: Track Custom Events

​Step 4: Identify Visitors

​What’s Captured Automatically

​Next Steps

Browser Integration

React Integration

Server-Side Tracking

Identity Resolution

Prerequisites

Step 1: Add the Tracker

Step 2: Verify Installation

Step 3: Track Custom Events

Step 4: Identify Visitors

What’s Captured Automatically

Next Steps