how do i set up session replay for javascript SDK
how do i set up session replay for javascript SDK
how do i set up session replay for javascript SDK
Hi Kathleen M., Please stand by as I search the Mixpanel knowledge base for an AI-powered answer. I normally take about 15 seconds or so. In case AI cannot answer your question, feel free to reach out to Mixpanel support at mixpanel.com/get-support. If you have follow-up questions for this thread, please tag me again with your question: @kapa.ai <follow-up question> 👋
Feel free to ask a follow-up question once I've answered by mentioning me with @kapa.ai
To set up Session Replay with the JavaScript SDK:
1. Confirm prerequisites
- You must have the Mixpanel JavaScript SDK installed, version v2.50.0 or later. [JS replay overview]
2. Enable Session Replay via sampling (recommended)
Edit your existing mixpanel.init call to add record_sessions_percent in the config object. This is the only required code change.
js
mixpanel.init("<YOUR_PROJECT_TOKEN> ", {
record_sessions_percent: 100 // records 100% of all sessions
});
Start with 100% in a sandbox project to verify behavior and privacy, then lower as needed. [Capturing replays]
3. (Optional) Manually start/stop recording
Use these if you want to control exactly when replays are captured (e.g., exclude sensitive screens):
js
// Force recording to begin
mixpanel.start_session_recording();
// Stop recording
mixpanel.stop_session_recording();
start_session_recording() works even if record_sessions_percent is 0; stop_session_recording() ends any active capture. [Capturing replays]
4. (Optional) Configure privacy & behavior
You can fine‑tune masking, idle timeout, max length, etc. by passing additional init options:
js
mixpanel.init("<YOUR_PROJECT_TOKEN> ", {
record_sessions_percent: 10, // sample 10% of sessions
record_idle_timeout_ms: 1800000, // 30 min inactivity timeout
record_mask_all_text: true, // mask all text by default
record_unmask_text_selector: ['.nav', '.public-content'],
record_mask_all_inputs: true, // mask all inputs by default
record_unmask_input_selector: '#search-box'
});
See the full list of options like record_block_class, record_canvas, record_heatmap_data, etc. in the init options table. [Init options]
5. (Optional) Attach Replay IDs to other events
If you send events from outside the JS SDK, you can fetch the current replay properties and add $mp_replay_id yourself:
js
const replayProps = mixpanel.get_session_recording_properties();
// e.g. send replayProps.$mp_replay_id with your custom event
This ensures those events show up in the correct replay. [Replay ID]
After deployment, you’ll see captured replays in the Session Replay section of your Mixpanel project. [Session Replay docs]
kapa.ai is still learning and improving, please let me know how I did by reacting below.
ℹ️ Tip: Mention @kapa.ai in the thread for follow-ups or DM the app for 1-to-1 help.