Scroll sideways or use arrow keys.
![Connected SDKs, integrations, and conversations feed a graph of visitors, contacts, accounts, relationships, activity, and facts; customer profiles and developer interfaces use that context.]()
![Connected SDKs, integrations, and conversations feed a graph of visitors, contacts, accounts, relationships, activity, and facts; customer profiles and developer interfaces use that context.]()
![Connected SDKs, integrations, and conversations feed a graph of visitors, contacts, accounts, relationships, activity, and facts; customer profiles and developer interfaces use that context.]()
![Connected SDKs, integrations, and conversations feed a graph of visitors, contacts, accounts, relationships, activity, and facts; customer profiles and developer interfaces use that context.]()
The diagram shows how connected sources feed customer profiles. Outlit uses those profiles and their evidence when it prepares churn cases and renewal briefs.
| Source | What it adds |
| - | - |
| Outlit Browser SDK and Outlit server SDKs | Website visits, identified people, and product events you instrument |
| PostHog or Mixpanel integrations | Product activity and usage trends imported into Outlit |
| Stripe | Subscription state, billing status, and revenue |
| Salesforce, HubSpot, or Attio | Account records, contacts, owners, deals, and renewal dates |
| Gmail, Slack, Granola, Gong, Fireflies, or Google Calendar | Conversations and meetings |
| Pylon | Support tickets and escalations |
| Clerk or Supabase Auth | User identity and sign-in activity |
Connect sources in the [Outlit app](/integrations/overview). Churn monitoring needs billing and product activity for useful coverage; the Outlit Browser SDK adds the landing page, referrer, UTM data, and anonymous website visits before signup. Identifying the browser visitor links that history to later customer activity. Check **Responsibilities → Churn** for your workspace's actual monitoring status.
## How records become a profile
[Identity resolution](/concepts/identity-resolution) links an anonymous visitor to a known person after they identify. A company email domain, explicit `customerId`, or connected account records can link that person to a customer. Ambiguous matches wait for review rather than being merged automatically. A customer's **Coverage** tab shows which sources support its profile.
The activity timeline records events in time order. Each source can also support a **fact**, such as declining usage, a support escalation, a competitor mention, or a change in a key contact. Public fact results include `occurredAt`, `status`, and available provenance fields such as `sourceType`, `sourceId`, `sourceOccurredAt`, `sourceQuote`, and `permalink`. Read the source time and status before relying on an older finding.
## Customer journey and billing
A person's product journey can be **Discovered**, **Signed Up**, **Activated**, **Engaged**, or **Inactive**. A customer's billing status can be **None**, **Trialing**, **Paying**, **Past due**, or **Churned**. These describe different parts of the relationship. Billing comes from a verified integration such as Stripe.
You choose an ordinary product event for activation. The first matching event records activation once for each eligible resolved person and company, independently; later matches leave the recorded timestamp unchanged. SDKs and analytics integrations send ordinary events, and Outlit derives activation from the configured event. See [Customer journey](/concepts/customer-journey) for the exact stages and setup.
## Where to use the context
* **Customers** shows profiles, people, coverage, timelines, and facts.
* **Attention** shows churn and renewal situations that need a person, with evidence and an approach when available.
* The [CLI](/cli/overview), [MCP](/ai-integrations/mcp), and [API](/api-reference/tools) let authorized agents and applications query customer context. Their access follows the same customer and workspace permissions.
## Next steps
Scroll sideways or use arrow keys.
![A first visit creates anonymous pageview history with a visitor ID. After the visitor submits an email, the Outlit Browser SDK identifies them and Outlit links earlier activity to the contact.]()
![A first visit creates anonymous pageview history with a visitor ID. After the visitor submits an email, the Outlit Browser SDK identifies them and Outlit links earlier activity to the contact.]()
![A first visit creates anonymous pageview history with a visitor ID. After the visitor submits an email, the Outlit Browser SDK identifies them and Outlit links earlier activity to the contact.]()
![A first visit creates anonymous pageview history with a visitor ID. After the visitor submits an email, the Outlit Browser SDK identifies them and Outlit links earlier activity to the contact.]()
## Captured data
### Automatic attribution
On first visit, Outlit captures:
| Data | Source | Example |
| - | - | - |
| UTM Source | URL params | `utm_source=google` |
| UTM Medium | URL params | `utm_medium=cpc` |
| UTM Campaign | URL params | `utm_campaign=spring_2024` |
| First Referrer | Browser `document.referrer` | `https://google.com` |
| First Landing Page | URL | `/pricing?plan=pro` |
### Events stored
All events are stored for anonymous visitors and will be linked when they identify:
```typescript theme={null}
// All these are tracked for anonymous visitors
outlit.track('pricing_viewed', { plan: 'enterprise' })
outlit.track('demo_video_played', { duration: 120 })
outlit.track('feature_explored', { feature: 'integrations' })
```
### Form data
Form submissions are captured with automatic sanitization:
```json theme={null}
{
"type": "form",
"formId": "contact-form",
"formFields": {
"email": "jane@acme.com",
"name": "Jane",
"company": "Acme Inc"
}
}
```
Sensitive fields (password, credit\_card, SSN, etc.) are automatically removed from form data.
## Link a visit to a person
When `identify()` is called, the anonymous history is linked:
```typescript theme={null}
// This triggers identity resolution
outlit.identify({
email: 'jane@acme.com',
traits: { name: 'Jane Doe' }
})
```
Here's what happens:
1. **Find or create contact** with the provided email
2. **Link the anonymous visitor** to the contact
3. **Historical events are processed**:
* All previous events are added to the customer timeline
* Original timestamps are preserved
* The pre-identification journey is now visible on the profile
### Timeline after resolution
```
Jane Doe (jane@acme.com) - Customer Timeline
├── Mar 1, 10:00am - First visited /pricing (anonymous)
├── Mar 1, 10:05am - Viewed enterprise plan (anonymous)
├── Mar 1, 10:10am - Watched demo video (anonymous)
├── Mar 3, 2:00pm - Returned, viewed /features (anonymous)
├── Mar 3, 2:15pm - Submitted contact form ← IDENTIFIED
├── Mar 3, 2:20pm - Viewed /signup
└── Mar 3, 2:25pm - Created account
```
## Visits across devices
Anonymous tracking is per-browser. The same person on different devices has different visitor IDs until identified. Once someone calls `identify()` with the same email on multiple devices, their visit histories link to the same contact timeline.
**Edge cases**: If visitors clear cookies, use incognito mode, or share browsers, they may generate new visitor IDs. Call `identify()` immediately after login—even for returning users—to ensure continuity and accurate tracking.
## Device tracking (non-browser)
For native apps without browser storage (desktop apps, mobile apps, CLI tools), use `fingerprint` instead of `visitorId`. A fingerprint is a device identifier that you generate and manage.
### When to use fingerprint
| Environment | Use |
| - | - |
| Desktop apps (Tauri, Electron) | `fingerprint` |
| Mobile apps (React Native) | `fingerprint` |
| CLI tools | `fingerprint` |
| Browser/Webview | `visitorId` (automatic) |
### How it differs from `visitorId`
| | visitorId | fingerprint |
| - | - | - |
| Generated by | SDK (once tracking is enabled) | You (manual) |
| Stored in | localStorage + cookies | Your app (you decide) |
| SDKs | Outlit Browser SDK | Outlit Rust SDK, Outlit Node.js SDK |
### Generating a fingerprint
Use any persistent, unique identifier for the device or installation:
* **Device UUID** - Hardware identifier
* **Installation ID** - Generated on first app launch, stored in app data
* **Keychain/Secure storage** - For sensitive apps
The fingerprint must be:
* Consistent across app sessions
* Unique per device/installation
* Stored persistently by your app
### Example: tracking before sign-in
{product.name}
``` ## Content collections Track interactions with content: ```astro theme={null} // src/pages/blog/[...slug].astro import { getEntry } from 'astro:content' const entry = await getEntry('blog', Astro.params.slug)Dashboard
We use cookies to improve your experience.
Dashboard
}
```
### Next.js pages router
```tsx theme={null}
// pages/_app.tsx
import { OutlitProvider } from '@outlit/browser/react'
export default function App({ Component, pageProps }) {
return (
Product {productId}
}
```
### Track form submission
Track custom form events:
```tsx theme={null}
import { useOutlit } from '@outlit/browser/react'
function ContactForm() {
const { track, identify } = useOutlit()
const handleSubmit = (e) => {
e.preventDefault()
const formData = new FormData(e.target)
track('contact_form_submitted', {
subject: formData.get('subject')
})
identify({
email: formData.get('email'),
traits: {
name: formData.get('name'),
company: formData.get('company')
}
})
}
return (
)
}
```
### Identify after auth
**Prefer the `user` prop instead.** The pattern below works, but using the `user` prop on `OutlitProvider` is cleaner and handles the lifecycle automatically. See [User identity patterns](#user-identity-patterns) above.
If you can't use the `user` prop (e.g., the provider is in a different part of the tree), you can sync manually:
```tsx theme={null}
import { useOutlit } from '@outlit/browser/react'
import { useUser } from '@/hooks/use-user' // Your auth hook
function AuthObserver() {
const { setUser, clearUser } = useOutlit()
const { user, isLoading } = useUser()
useEffect(() => {
if (isLoading) return
if (user) {
setUser({
email: user.email,
userId: user.id,
traits: {
name: user.name,
plan: user.subscription?.plan
}
})
} else {
clearUser()
}
}, [user, isLoading, setUser, clearUser])
return null
}
```
## TypeScript
Full TypeScript support is included:
```tsx theme={null}
import {
useOutlit,
OutlitProvider,
type OutlitProviderProps,
type UseOutlitReturn,
type UserIdentity,
} from '@outlit/browser/react'
// Types are inferred
const { track, identify, setUser } = useOutlit()
// Or explicitly typed
const outlit: UseOutlitReturn = useOutlit()
// User identity type
const user: UserIdentity = {
email: 'user@example.com',
userId: 'usr_123',
traits: { name: 'Jane' }
}
```
## Next steps