Skip to main content

​
Prerequisites

Before you begin, ensure you have:

​
Step 1: Set Up Web Insights (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 — single script tag, no build tools needed
  • React — @infinitewatch/react provider component
  • Next.js — @infinitewatch/next for App Router
  • Vue.js — @infinitewatch/vue plugin

​
Quick Start (HTML)

The simplest way is a single script tag in your HTML <head>: 
<script async
  src="https://unpkg.com/@infinitewatch/web-core@^1/dist/watch.js"
  data-iw-organization-id="YOUR_ORGANIZATION_ID">
</script>
Replace YOUR_ORGANIZATION_ID with your actual organization ID. You can find this in your InfiniteWatch dashboard or contact 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

InfiniteWatch.identify({
  external_id: 'user-12345'
});

​
With Additional User Information

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

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 <body>. 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. 
<div class="rr-mask">
  <p>John Doe</p>
  <p>john.doe@example.com</p>
  <p>+1 (555) 123-4567</p>
</div>
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. 
<div class="rr-block">
  <img src="profile-photo.jpg" alt="User photo">
</div>
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 <body>
  • 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.