Next.js

Overview

The @infinitewatch/next SDK provides a Next.js-compatible provider component that works with the App Router and Server Components.

Step 1: Installation

npm install @infinitewatch/next

pnpm add @infinitewatch/next

yarn add @infinitewatch/next

Step 2: Environment Variables

Add to your .env.local file:

NEXT_PUBLIC_INFINITEWATCH_ORG_ID=YOUR_ORGANIZATION_ID

Replace YOUR_ORGANIZATION_ID with your actual organization ID. You can find this in your InfiniteWatch dashboard.

Step 3: Basic Setup

Create a providers file and wrap your app layout. First, create app/providers.tsx:

'use client';

import { InfiniteWatchProvider } from '@infinitewatch/next';

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <InfiniteWatchProvider
      organizationId={process.env.NEXT_PUBLIC_INFINITEWATCH_ORG_ID!}
    >
      {children}
    </InfiniteWatchProvider>
  );
}

Then use it in app/layout.tsx:

import { Providers } from './providers';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        <Providers>{children}</Providers>
      </body>
    </html>
  );
}

The InfiniteWatchProvider must be inside a 'use client' component since it uses browser APIs. That’s why we put it in a separate providers file.

Identify Users

After the provider is set up, you can associate sessions with specific users:

InfiniteWatch.identify({
  external_id: 'user-12345',
  email: 'user@example.com',
  full_name: 'John Doe',
  metadata: {
    plan: 'premium',
    signup_date: '2024-01-15'
  }
});

Call identify() after the user logs in. The external_id is persisted in a cookie so it carries across page reloads and sessions.

Get Started

Claude Connector

SDKs

Overview

Step 1: Installation

Step 2: Environment Variables

Step 3: Basic Setup

Identify Users

​Overview

​Step 1: Installation

​Step 2: Environment Variables

​Step 3: Basic Setup

​Identify Users

Overview

Step 1: Installation

Step 2: Environment Variables

Step 3: Basic Setup

Identify Users