Install Session Replay and Record Sessions

Session Replay is supported on the Javascript or React SDKs for both desktop and mobile web users on your web application. See the instructions below to install our SDK and record user sessions.

Note that Session Replay is currently only available when used with the new @statsig/js-client sdk, it is not compatible with statsig-js or statsig-react. If you are using either of those SDKs, you will need to migrate to the new sdk first. If this is your first time integrating statsig, you can ignore this step.

info

If your website uses canvas elements to display content, we don't currently support recording this content for playback in Session Replay. If this impacts you, let us know so we can prioritize making this possible!

Option 1 - No code - Add Javascript Snippet to your website

<script src="https://cdn.jsdelivr.net/npm/@statsig/js-client@3/build/statsig-js-client+session-replay+web-analytics.min.js?apikey=[YOUR_CLIENT_KEY]"></script>

Get YOUR_CLIENT_KEY from Project Settings -> Keys & Environments. Reveal the Client API Key, copy, and paste it over the [YOUR-API-KEY] in the snippet above.

And you're done! This will auto initialize the sdk and start recording sessions, no code required.

If you'd like to use your existing Statsig integration, or customize the integration further, see option 2 below. If you still want to use the script tag but also customize the integration, remove your key from the script url and initialize using the javascript code below.

Option 2 - Custom code - Install via Package Manager

js

npm

npm install @statsig/js-client @statsig/session-replay @statsig/web-analytics

yarn

yarn add @statsig/js-client @statsig/session-replay @statsig/web-analytics

react

npm

npm install @statsig/session-replay @statsig/web-analytics @statsig/react-bindings

yarn

yarn add @statsig/session-replay @statsig/web-analytics @statsig/react-bindings

We recommend using autocapture as a great way to get started, but if you don’t want to automatically log and send events, you can remove the runStatsigAutoCapture option from the Javascript snippet or skip the @statsig/web-analytics package installation.

Next, following the instructions for the Statsig Javascript SDK, initialize Statsig with your SDK key, user and options:

js

import { StatsigClient } from '@statsig/js-client';
import { runStatsigSessionReplay } from '@statsig/session-replay';
import { runStatsigAutoCapture } from '@statsig/web-analytics';

const client = new StatsigClient(sdkKey,
	{ userID: "some_user_id" },
  { environment: { tier: "production" } } // optional, pass options here if needed. Session replays are only recorded and stored if the environment is production.
);
runStatsigSessionReplay(client);
runStatsigAutoCapture(client);
await client.initializeAsync();

react

import { StatsigProvider, useClientAsyncInit } from '@statsig/react-bindings';
import { StatsigSessionReplayPlugin } from '@statsig/session-replay';
import { StatsigAutoCapturePlugin } from '@statsig/web-analytics';

function App() {
  return (
    <StatsigProvider
      sdkKey={YOUR_CLIENT_KEY}
      user={{ userID: 'a-user' }}
      loadingComponent={<div>Loading...</div>}
      options={{
        plugins: [ new StatsigSessionReplayPlugin(), new StatsigAutoCapturePlugin() ]
      }}>
      <Content />
    </StatsigProvider>
  );
}

As a side effect of creating the SessionReplay, Statsig will begin recording if the session is sampled (see Configure to learn more).

That’s it! In the future, we will be adding robust ways to control other scenarios in which you may or may not want to record the session, but at this time, this is all you need to do.