Overview
The @infinitewatch/react SDK provides a React provider component that wraps your app and automatically handles session recording.
Step 1: Installation
npm install @infinitewatch/react
Step 2: Environment Variables
Create an environment file with your organization ID.
Add to your .env file:VITE_INFINITEWATCH_ORG_ID=YOUR_ORGANIZATION_ID
Add to your .env file:REACT_APP_INFINITEWATCH_ORG_ID=YOUR_ORGANIZATION_ID
Step 3: Basic Setup
Wrap your app with the InfiniteWatchProvider for automatic tracking.
import { InfiniteWatchProvider } from '@infinitewatch/react';
function App() {
return (
<InfiniteWatchProvider
organizationId={import.meta.env.VITE_INFINITEWATCH_ORG_ID}
>
{/* Your entire app goes here */}
<YourApp />
</InfiniteWatchProvider>
);
}
export default App;
import { InfiniteWatchProvider } from '@infinitewatch/react';
function App() {
return (
<InfiniteWatchProvider
organizationId={process.env.REACT_APP_INFINITEWATCH_ORG_ID}
>
{/* Your entire app goes here */}
<YourApp />
</InfiniteWatchProvider>
);
}
export default App;
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.
