Skip to main content
How-to guide

How to record user sessions on your website.

A five-step practical guide — from installing the SDK to watching your first replay — with code samples, a privacy checklist, and the gotchas that bite teams on day one.

Before you start — five things to decide

Most teams over-think setup. Decide these once and move on:

  • <strong>Which tool?</strong> Pick from the <a href="/learn/best-session-replay-tools-2026">2026 comparison guide</a>. Most teams should start with Relyv's free tier.
  • <strong>Where will sessions land?</strong> Cloud (default) or self-hosted (enterprise tier).
  • <strong>What PII gets masked?</strong> At minimum: passwords (auto), credit cards, emails, phone numbers. Decide if you also mask names/addresses.
  • <strong>Consent flow?</strong> Tie capture start to your CMP's "analytics consent" signal if you operate in a GDPR jurisdiction.
  • <strong>Sampling?</strong> Default to 100%. Add per-route sampling if free-tier quota is tight.

Step-by-step

  1. 1

    Install the SDK

    Add one line of JavaScript to your app entry point — typically index.html, _document.tsx (Next.js), or main.ts (Vue/Angular). Relyv's SDK is <30KB gzipped and async-loaded, so it won't block your Time to Interactive.

    <script async src="https://relyv.ai/sdk/v1/relyv.min.js" data-key="rl_live_..."></script>

    Or via npm: npm install @relyv/sdk and call Relyv.init({ apiKey: 'rl_live_...' }) in your bootstrap.

  2. 2

    Configure PII masking

    The SDK auto-masks password fields. Add explicit masks for any other sensitive content by adding the data-relyv-mask attribute on elements:

    <div data-relyv-mask>{{ user.creditCardLastFour }}</div>

    The SDK also runs a regex-based PII filter by default (email, phone, SSN). Disable per-pattern via the init options if needed: Relyv.init({ mask: { email: false } }).

  3. 3

    Deploy to staging first

    Push the SDK to staging before production. Open a staging session yourself, perform the key flow (signup, checkout, settings page), and confirm the session appears in the Relyv dashboard within 30-60 seconds. If you're missing sessions, check the browser console for SDK errors and verify your API key is correct.

  4. 4

    Deploy to production + verify

    Ship to production. Within a few minutes you should see real visitor sessions land in the dashboard. Watch one end-to-end to verify the replay quality: check that DOM mutations render correctly, network calls appear in the waterfall, and console errors are captured. Spot-check that PII is actually masked in the replay (not just in your assumptions).

  5. 5

    Wire your alerts + integrations

    Connect Slack, Linear, Jira, or GitHub so AI-drafted bug tickets land in the right place. Set up alert rules for high-frustration sessions (rage clicks, dead clicks, repeated error bursts). Optional: enable the auto-generate-test workflow so any session can become a Playwright spec.

Frequently asked questions

Does the SDK slow down my site?

A well-engineered SDK adds under 30KB gzipped and under 1% main-thread CPU overhead. Async-load it so it doesn't block Time to Interactive.

When do I need explicit user consent?

Anywhere GDPR, CCPA, or similar privacy law applies — in practice, the EU, the UK, California, and a growing list of US states. Tie SDK init to your CMP's "analytics consent" signal. Most CMPs (OneTrust, Cookiebot, Didomi, TrustArc) emit an event you can listen for.

What if I want to record only a subset of users?

Configure sampling via init: Relyv.init({ sample: 0.1 }) records 10% of sessions. Per-route sampling lets you record 100% of /checkout and 5% of marketing pages.

Can I record across multiple subdomains?

Yes — set the cookie domain in init: Relyv.init({ cookieDomain: '.example.com' }). Cross-domain session stitching works via a BroadcastChannel handshake.

How do I delete a user's session data (for DSARs)?

Call the data-deletion API with the user's ID: POST /v1/users/{id}/delete. All sessions associated with that user ID are purged within 24 hours, with a deletion certificate emitted to your audit log.

What about content security policy (CSP)?

Add script-src https://relyv.ai and connect-src https://api.relyv.ai to your CSP. The SDK does not use eval or inline scripts.

Do I need to record canvas / WebGL content?

Only if your app uses them as a primary surface (data viz, games). The SDK can sample canvas frames at 4 FPS with WebP encoding; enable via Relyv.init({ recordCanvas: true }). Default is off to keep payloads small.

Ready to record your first session?

Free 1,000 sessions/mo. No credit card. Cancel anytime, no refunds.