Features
Session Replay
Watch back real visitor sessions — clicks, scrolls, navigation — to see exactly where people get stuck. Replay is off by default, privacy-first (inputs are masked), and you opt in either no-code from your CMS or in code.
Overview
Replay uses the same FlowGrid script you already installed. Once enabled, it records a sample of sessions and streams them to your dashboard, where you can play them back. By default it masks every input, textarea and password field so sensitive data is never captured.
No-code setup (for marketers & CMS)
On WordPress, Wix, Squarespace, Webflow, Shopify or Framer, turn replay on with one line of config before your FlowGrid tag — no JavaScript to write:
Your API key is required here
Recordings are sent to the key-gated ingestion endpoint, so replay only captures when your apiKey is present (via FlowGridConfig.apiKey or data-api-key on the tag). Without it the script loads but no sessions are recorded. It's a public, write-only ingestion key — safe to put on the page.
1<script>
2 window.FlowGridConfig = {
3 apiKey: "YOUR_API_KEY", // required — recordings won't send without it
4 replay: true, // record sessions
5 // sampleRate is set below via the options form
6 };
7</script>
8<script src="https://cdn.flow-grid.xyz/flowgrid.min.js" data-site="YOUR_WEBSITE_ID"></script>Want to record only a fraction of traffic (cheaper, still representative)? Pass an options object instead of true:
1<script>
2 window.FlowGridConfig = {
3 apiKey: "YOUR_API_KEY", // required for recordings to send
4 replay: {
5 sampleRate: 0.25, // record 25% of sessions
6 maskAllInputs: true, // default — keep form data private
7 },
8 };
9</script>
10<script src="https://cdn.flow-grid.xyz/flowgrid.min.js" data-site="YOUR_WEBSITE_ID"></script>Even quicker
For a simple on/off with no options, add data-replay to the tag: <script src="…/flowgrid.min.js" data-site="…" data-api-key="…" data-replay></script>.
Developer setup
Using the SDK in code? Enable replay at init, or start and stop it yourself for full control.
1import { FlowGrid } from "flowgrid-sdk";
2
3// Enable at init — simplest
4const fg = FlowGrid.init({
5 webId: "YOUR_WEBSITE_ID",
6 apiKey: "YOUR_API_KEY",
7 replay: { sampleRate: 0.25, maskAllInputs: true },
8});Privacy & masking
Replay is built to be safe by default. You control exactly what's captured with CSS classes:
| Add this class | Effect |
|---|---|
| fg-mask | Replace the element's text with blocks (e.g. names, emails shown on the page). |
| fg-block | Don't record the element at all — it shows as a blank box. |
| fg-ignore | Record the element but ignore interactions on it. |
All <input> values are masked by default (maskAllInputs: true). Recordings also stop automatically after 30 minutes or 10 MB per session to keep them lightweight.
Consent
To only record after a visitor accepts cookies, set requireConsent: true — recording then waits until analytics consent is granted. Pair it with the Cookie Consent setup.
1<script>
2 window.FlowGridConfig = {
3 apiKey: "YOUR_API_KEY",
4 replay: { requireConsent: true },
5 };
6</script>
7<script src="https://cdn.flow-grid.xyz/flowgrid.min.js" data-site="YOUR_WEBSITE_ID"></script>When the visitor accepts, grant consent and recording begins:
1// Call this from your "Accept" button
2FlowGrid.setConsent({ analytics: true });