Prerequisites
Before you begin, you’ll need:
Step 1: Add the Tracker
Choose your preferred integration method:
Add this snippet before the closing </body> tag on every page:<script>
!function(w,d,src,key,auto){
if(w.outlit&&w.outlit._loaded)return;
var o=w.outlit=w.outlit||{_q:[]};
function stub(target,prefix,methods){
for(var i=0;i<methods.length;i++){
var m=methods[i];
target[m]=target[m]||function(mm){
return function(){o._q.push([prefix?prefix+"."+mm:mm,[].slice.call(arguments)])};
}(m);
}
}
stub(o,"",["init","track","identify","enableTracking","isTrackingEnabled","getVisitorId","setUser","clearUser"]);
o.user=o.user||{};o.customer=o.customer||{};
stub(o.user,"user",["identify","activate","engaged","inactive"]);
stub(o.customer,"customer",["trialing","paid","churned"]);
var s=d.createElement("script");s.async=1;s.src=src;
s.dataset.publicKey=key;if(auto!==undefined)s.dataset.autoTrack=auto;
(d.body||d.head).appendChild(s);
}(window,document,"https://cdn.outlit.ai/stable/outlit.js","pk_your_public_key_here");
</script>
Replace pk_your_public_key_here with your actual public key from Settings. This snippet queues any tracking calls made before the SDK loads, so you can safely call outlit.track() anywhere on the page.
Install the package:npm install --save @outlit/browser
import outlit from '@outlit/browser'
outlit.init({ publicKey: 'pk_your_public_key_here' })
Install the package:npm install --save @outlit/browser
// 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
