> ## Documentation Index
> Fetch the complete documentation index at: https://docs.infinitewatch.ai/llms.txt
> Use this file to discover all available pages before exploring further.
# Quickstart
> Get started with InfiniteWatch API in under 5 minutes
## Prerequisites
Before you begin, ensure you have:
* A valid Orgnization ID (contact [support@infinitewatch.ai](mailto:support@infinitewatch.ai) to get one)
## Step 1: Set Up Web (For Web Applications)
If you want to generate web insights from your website, start by adding the InfiniteWatch SDK. Choose the guide for your framework:
* [HTML / CDN](/docs/sdks/html) — single script tag, no build tools needed
* [React](/docs/sdks/react) — `@infinitewatch/react` provider component
* [Next.js](/docs/sdks/nextjs) — `@infinitewatch/next` for App Router
* [Vue.js](/docs/sdks/vue) — `@infinitewatch/vue` plugin
### Quick Start (HTML)
The simplest way is a single script tag in your HTML ``:
```html theme={null}
```
Replace `YOUR_ORGANIZATION_ID` with your actual organization ID. You can find this in your [InfiniteWatch dashboard](https://app.infinitewatch.ai/dashboard/settings) or contact [support@infinitewatch.ai](mailto:support@infinitewatch.ai).
### How It Works
Once the SDK is set up, InfiniteWatch will automatically:
* Record user sessions and interactions
* Capture DOM events, mouse movements, and clicks
* Generate web insights data
* Send data to your InfiniteWatch dashboard
The script loads asynchronously, so it won't block your page load. It automatically starts recording when the page loads.
## Step 2: Identify Your Users
After the tracker is initialized and recording has started, you can associate sessions with specific users in your system using the `identify()` method. This links session recordings and analytics to individual users.
### Basic Usage
```javascript theme={null}
InfiniteWatch.identify({
external_id: 'user-12345'
});
```
### With Additional User Information
```javascript theme={null}
InfiniteWatch.identify({
external_id: 'user-12345',
email: 'user@example.com',
full_name: 'John Doe',
metadata: {
plan: 'premium',
signup_date: '2024-01-15'
}
});
```
### In a Login Flow
```javascript theme={null}
async function handleLogin(user) {
// Identify the logged-in user
InfiniteWatch.identify({
external_id: user.id,
email: user.email,
full_name: user.name
});
}
```
### What It Does
When you call `identify()`:
1. **Links Sessions to Users**: Associates the current session with your system's user identifier
2. **Persists Identity**: The `external_id` is stored in a cookie (2-year expiration) and persists across page reloads and sessions
3. **Auto-Collects Metadata**: Automatically gathers browser information (user agent, language, screen dimensions, timezone, etc.)
4. **Enriches Events**: All subsequent events will include the `external_id` in their payloads
**Required Field**: The `external_id` is required - use a stable identifier from your system (like a database user ID). Optional fields include `email`, `full_name`, and custom `metadata`.
**Privacy**: Only the `external_id` is persisted in cookies. Email, full name, and metadata are sent to the API but not stored in browser cookies.
### Best Practices
* **Call Early**: Identify users as soon as they're authenticated to ensure all session data is linked
* **Use Stable IDs**: Use consistent identifiers (database IDs) rather than temporary values
* **Update Anytime**: You can call `identify()` multiple times to update user information
For complete documentation on the `identify()` method, including all parameters, error handling, and advanced usage, see the [full identify() documentation](#).
## Step 3: Set Up Your Privacy Settings
InfiniteWatch records DOM content from your pages to generate web insights. You can control exactly what gets captured by adding privacy CSS classes to specific HTML elements. This lets you protect sensitive information while still collecting the data you need.
Always apply privacy classes to the specific elements you want to protect — never to the entire page or ``. Applying them too broadly will prevent InfiniteWatch from generating useful insights.
### Mask Sensitive Text (`rr-mask`)
The `rr-mask` class replaces all text content within an element (and its children) with masking characters. The element structure and layout remain visible in session replays, but the actual text is hidden.
```html theme={null}
John Doe
john.doe@example.com
+1 (555) 123-4567
```
Use `rr-mask` for any element that displays confidential text — names, email addresses, phone numbers, physical addresses, credit card details, affiliations, gender, or similar personal information.
### Block Entire Elements (`rr-block`)
The `rr-block` class completely prevents an element from being recorded. During replay, a placeholder with the original element's dimensions is shown instead.
```html theme={null}
```
Use `rr-block` for sensitive images, videos, embedded third-party content, or entire sections where you want nothing to be recorded at all.
We highly recommend adding `rr-block` to any area where users can freely write long-form content, as this can introduce noise and inaccurate signals into your web insights. This includes:
* **Live-chat widgets** — conversations often contain personal details and off-topic content
* **Review sections** — hotel, product, or service reviews contain free-form text that can skew behavioral insights
* **Comment sections, forums, or community feeds** — user-generated discussions are rarely relevant to UX analytics
* **Support ticket forms, feedback boxes, or survey text fields** — open-ended responses are meant for your team, not for session analysis
Blocking these elements keeps your insights focused on actual user interactions with your interface rather than the content users happen to type.
### Password Fields (Automatic)
All `input[type="password"]` fields are automatically masked — no additional classes or configuration required. You don't need to do anything extra to protect password inputs.
### Recommendations
* Apply `rr-mask` or `rr-block` to **specific elements**, not to your page wrapper or ``
* Use `rr-mask` for fields displaying confidential text (names, phones, addresses, emails, credit cards, affiliations, gender, etc.)
* Use `rr-block` for visual or embedded content you want fully hidden from recordings
* Add `rr-block` to any area where users write free-form content — live-chat widgets, review sections (product, hotel, service), comment sections, feedback forms, and support ticket inputs — to keep conversations private and avoid polluting your insights with unrelated text
* Password fields are handled automatically — no setup needed
* Test your privacy configuration before deploying to production to make sure the right content is protected
Applying privacy classes to the entire page will block or mask all content, which means InfiniteWatch won't be able to generate meaningful insights from your sessions. Target only the elements that contain sensitive data.
