The churn radar for B2B SaaS·Book a call·Setup in 10 minutes·Trusted by CS teams·SOC 2 · GDPR · AES-256·
The churn radar for B2B SaaS·Book a call·Setup in 10 minutes·Trusted by CS teams·SOC 2 · GDPR · AES-256·
First Distro
FirstDistro

Quick start (npm)

Install the FirstDistro SDK with npm install @firstdistro/sdk. React and Next.js. 14-day free trial. Get running in under 5 minutes.

Get FirstDistro running in your React or Next.js app in under 5 minutes. New here? Start a 14-day free trial (no credit card required).

1. install

bash
npm install @firstdistro/sdk

2. add the provider

Wrap your app with FirstDistroProvider and pass your installation token.

tsx
// app/providers.tsx
'use client'

import { FirstDistroProvider } from '@firstdistro/sdk/react'

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <FirstDistroProvider token={process.env.NEXT_PUBLIC_FIRSTDISTRO_TOKEN!}>
      {children}
    </FirstDistroProvider>
  )
}
tsx
// app/layout.tsx
import { Providers } from './providers'

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html>
      <body>
        <Providers>{children}</Providers>
      </body>
    </html>
  )
}

Get your token: Dashboard → Settings → SDK Configuration

3. identify users

Use the useFirstDistroSetup hook to identify users when they log in.

tsx
'use client'

import { useFirstDistroSetup } from '@firstdistro/sdk/react'

export function UserIdentifier({ user, organization }: { user: User; organization: Org }) {
  useFirstDistroSetup({
    userId: user.id,
    userEmail: user.email,
    userName: user.name,
    accountId: organization.id,
    accountName: organization.name,
    accountPlan: organization.plan,
  })

  return null
}

Note: Account context (accountId) is required for Customer Insights to calculate health scores. Without it, events are stored but not processed.

4. track events

Use the useTrack hook to track product usage events.

tsx
'use client'

import { useTrack } from '@firstdistro/sdk/react'

function ExportButton() {
  const track = useTrack()

  const handleExport = () => {
    track('feature_used', { feature: 'export', format: 'pdf' })
    // ... export logic
  }

  return <button onClick={handleExport}>Export</button>
}

5. verify

Open your browser console. You should see:

  • [FirstDistro] SDK initialized
  • [FirstDistro] Enabling event tracking

Events appear in your Customer Insights dashboard within seconds.

Next steps

Alternative: script tag

If you're not using a bundler, you can install via script tag instead.

See the Installation Guide for script tag instructions.