@convivainc/conviva-js-replay

Conviva Replay

A standalone replay module for Conviva analytics that works with both npm and script tags.

Installation

NPM

npm install @convivainc/conviva-js-replay

Script Tag

Conviva hosts sensor scripts on its CDN, allowing direct integration via

To use them, add a script tag to your HTML before DPI SDK intialization:

<script src="https://sensor.conviva.com/replay/releases/v1.0.1/conviva-replay.umd.min.js"></script>

Conviva's CDN supports Brotli and gzip compression. When the browser sends the appropriate Accept-Encoding header (which modern browsers do by default), the CDN automatically serves a compressed response, reducing download size and improving load times with no additional configuration required.

Note: Conviva CDN serves replay packages starting from version v1.0.1

Usage

NPM/ES Modules

Simple Usage (Recommended)

import { init } from '@convivainc/conviva-js-replay';

// Just provide your customer key - that's it!
init('CONVIVA_ACCOUNT_CUSTOMER_KEY');
// INITIALISE CONVIVA-JS-APPP-ANALYTICS(https://github.com/Conviva/conviva-js-appanalytics) AFTER COHORT REPLAY INITIALISATION

Script Tag

Simple Usage (Recommended)

<script src= "<<URL / Path to conviva-replay.umd.min.js>>"></script>
<script>
  // Just provide your customer key - that's it!
  ConvivaReplay.init('CONVIVA_ACCOUNT_CUSTOMER_KEY');
  // INITIALISE CONVIVA-JS-SCRIPT-APPP-ANALYTICS(https://github.com/Conviva/conviva-js-script-appanalytics) AFTER COHORT REPLAY INITIALISATION
</script>

API Reference

Functions

init(customerKey)

Recommended method - Simple initialization with just a customer key.

Parameters:

• customerKey (string): Your Conviva customer key

Example:

// Simple usage
init('CONVIVA_ACCOUNT_CUSTOMER_KEY');

Important configurations

Content Security Policy (CSP): allow Web Workers (Blob)

Some environments enforce a strict Content Security Policy (CSP). The SDK uses a Web Worker created from a blob: URL, which requires explicitly allowing workers. Add the following directive to your site’s Content-Security-Policy:

Content-Security-Policy: worker-src 'self' blob:;

Notes

• If your policy already includes worker-src, extend it to include blob:.
• If worker-src is not defined, browsers may fall back to script-src, which can prevent worker creation.

CORS: allow loading required external assets (CSS/SVG)

On many websites, required assets (commonly CSS files or SVGs) may be hosted on a different origin (domain/subdomain). If those assets are blocked by cross-origin restrictions, configure the hosting server/CDN to allow cross-origin access. Ensure the asset server returns appropriate CORS response headers, such as:

Access-Control-Allow-Origin: https://pulse.conviva.com
// If the host changes or a new host is introduced in the future, it should be allowed as well.

Or, if your security policy allows it:

Access-Control-Allow-Origin: *

Limitation

Replay availability after tab close

If a user closes the browser tab after performing an activity, the last up to 1 minute of user activity per origin may not be available immediately. This duration represents the maximum possible gap; in most cases, the unavailable replay segment will be less than 1 minute. Replay data for that origin will resume only after the application is relaunched and the user returns to the same origin.

Notes

• This limitation applies on a per-origin basis.
• Once the user revisits the same origin, replay capture and availability continue as expected.