---
title: "How to add session replay to a Webflow site"
description: "Add session replay to Webflow. Configure masking, capture a synthetic session, and verify playback against analytics activity."
canonical: "https://amplitude.com/en-us/build/webflow-session-replay"
---

# How to add session replay to a Webflow site

Add session replay to Webflow. Configure masking, capture a synthetic session, and verify playback against analytics activity.

Source: https://amplitude.com/en-us/build/webflow-session-replay

---

# How to add session replay to a Webflow site

Record Webflow test sessions with Amplitude, mask private content, and match a replay to its analytics visit. Allow about 20 minutes plus processing time.

- Webflow
- Custom code
- Browser SDK 2
- CDN
- 20 min

Chris Tam · Last updated 19 October 2026

A form event shows where someone stopped. [Session replay](https://amplitude.com/session-replay) lets you watch the page interactions around it, including a field that failed validation or a CTA that was hard to find.

In this tutorial, I'll configure replay in Webflow's existing Amplitude snippet, add masking attributes in the Designer, and check a synthetic test session against the activity recorded in Amplitude.

## What you'll build

A replay of a Home-to-Pricing visit with synthetic form input masked, a private text region masked, and an excluded region blocked.

## Prerequisites

- A Webflow site you can publish, with a plan or Workspace that permits custom code. Webflow lists eligible plans in its [custom code instructions](https://help.webflow.com/hc/en-us/articles/33961357265299-Custom-code-in-head-and-body-tags).
- Permission to edit Site settings and publish to a Webflow staging domain. Use a test site before changing production.
- Your Amplitude project API key from Settings > Projects > your project > General > Manage next to API Key. A manager or admin can copy it. The key is public and its scope is limited to the minimum needed to ingest data. Keep secret keys out of Webflow.
- The shared head snippet and published Home and Pricing pages. Add the web analytics tutorial setup first if these are missing.
- Access to session replay capture for the project, and an admin or manager for capture and privacy settings.

A free account covers the Amplitude setup in this tutorial. [Sign up for free](https://app.amplitude.com/signup) to get your project API key. Webflow custom-code access has its own plan requirements.

## 1. Configure the existing replay plugin

Open your site-wide Head code. The [snippet Quickstart](https://amplitude.com/docs/get-started/amplitude-quickstart) already registers the replay plugin. Edit that registration in place with this block before the existing `amplitude.init` call; keep the loader and initializer.

Webflow Head code: existing replay plugin registration only

```javascript
// Webflow Head code: existing replay plugin registration only
// Keep lines other Webflow pages added here: engagement after webflowAmplitudeReady, experimentConfig before the loader, existing autocapture options.
window.amplitude.add(window.sessionReplay.plugin({
    sampleRate: 1,
    privacyConfig: {
      defaultMaskLevel: "conservative",
      maskSelector: ['[data-replay-mask="true"]'],
      blockSelector: ['[data-replay-block="true"]']
    }
  }));
```

Keep one replay plugin registration and one analytics initializer. Re-initializing the Browser SDK can leave replay and analytics with mismatched identifiers. Use `sampleRate: 1` for this synthetic test. Remote privacy settings take precedence when they conflict with SDK settings.

## 2. Mask and block Webflow elements

In the Designer, add `data-replay-mask="true"` to a text region and `data-replay-block="true"` to a container you want excluded. Use Element settings > Custom attributes. These attributes match the selectors above; the resulting markup looks like this:

```html
<!-- Designer attributes on existing elements, or a test Code Embed -->
<p data-replay-mask="true">replay-test@example.invalid</p>
<section data-replay-block="true">
  <p>FAKE_PRIVATE_DOCUMENT_123</p>
</section>
```

Keep the conservative default and use synthetic input such as `FAKE_PRIVATE_INPUT_123`. Don't add an unmask selector to the form. Masking controls captured content; it does not replace the site's consent configuration.

## 3. Enable capture and publish

In Amplitude, open Settings > Organizational Settings > Session Replay Settings. Find the test project, enable session capture, and inspect its sampling and masking controls. Use a 100% test rate in the location that manages sampling for your project. Save the Webflow changes and publish.

On the published page, run this to record the visit identifier:

Browser Console on the published Webflow test site

```javascript
// Browser Console on the published Webflow test site
window.amplitude.getDeviceId();
```

Perform a known sequence: open Home, follow Pricing, click the CTA, and type the synthetic input. Submit only if the test form is intended to accept it. Keep its product analytics footer when present.

## 4. Review playback and lower the sample rate

Use Instrumentation Explorer's replay debug panel to inspect the effective masking, replay ID, sample rate, and plugin version. Find the test replay in Amplitude; recordings are generally available about five minutes after the session starts. Play it and check the sequence, masked text, and blocked container.

After checking playback, update the existing registration to your production rate, for example:

Webflow Head code: change only sampleRate inside the existing plugin options

```javascript
// Webflow Head code: change only sampleRate inside the existing plugin options
sampleRate: 0.01,
```

Keep `privacyConfig`. If sampling is managed remotely, update the test rate there too. Publish the change, revisit, and inspect the effective rate. A 1% rate samples sessions, so one uncaptured visit doesn't prove capture is broken.

**MCP.** Ask your coding agent to inspect existing event names with the [Amplitude MCP server](https://amplitude.com/docs/amplitude-ai/amplitude-mcp) before adding tracking. Reuse the project's taxonomy when this tutorial's example names already have equivalents.

## Verify it worked

1. **Published site:** Open the staging URL directly. Check that the SDK request succeeds and the Console has no integration errors. Saved custom code reaches the live site only after publishing.
2. **Network:** Confirm an event POST to `api2.amplitude.com` returns `200` for a US project. EU ingestion uses `api.eu.amplitude.com`. Use Network for delivery status; large event batches can be compressed.
3. **Instrumentation Explorer:** Read the event names and properties in the Chrome extension. Note `device_id` and run the action once to check the count.
4. **User profile:** In Amplitude, open Users > User Profiles, search the device ID, and check the event stream. Allow ten seconds to one minute. Data > Sources > Ingestion Debugger shows request and event counts, rather than individual events.

Complete the playback and masking checks in step 4. A successful event POST alone does not verify a processed replay.

## Troubleshooting

### Events arrive but no replay appears

Inspect replay capture, the effective sample rate, quota, and remote-configuration requests. Replay captures nothing when required remote privacy configuration fails to load. Event delivery alone doesn't establish replay capture.

### Private text is visible in playback

Stop production capture while correcting selectors and remote masking overrides. Verify the published element has the attribute, then repeat the synthetic test.

### Nothing happens after saving the code

Publish the site and open its staging URL directly. Check Site settings and Page settings for duplicate scripts. A change in the settings editor is not a deployment.

### The SDK request fails or events never upload

Check the key, region, browser extensions, and Console. Follow the relevant SDK's endpoint and CSP guidance for a blocked request; keep existing security policies in place.

### You see two page views for one navigation

Check for a second installation in page code, embeds, and GTM. Keep the site-wide initializer and let autocapture send page views; remove your manual page-view call.

### The observed tracking differs from the snippet

Review Data > Settings > Autocapture. Remote settings take precedence over the local autocapture options when remote configuration is enabled.

## FAQ

### Does a successful replay upload prove masking works?

Review the transmitted test capture and the processed playback. Check the masked and blocked regions using synthetic values before production capture.

### Why can the effective masking differ from my snippet?

Remote privacy settings take precedence when they conflict with SDK settings. Check the effective values in the replay debug panel.

## Full code reference

This shows the combined Head code after these additions. Merge the changed lines into your existing head; keep any experiment consent configuration above the loader. Unchanged from earlier pages; keep your versions: Footer code, CTA and form attributes, navigation, and page content.

Full code reference

```html
<!-- Webflow Site settings > Custom code > Head code -->
<!-- Keep lines other Webflow pages added here: replay privacyConfig (/build/webflow-session-replay), engagement after webflowAmplitudeReady (/build/webflow-guides-surveys), experimentConfig before this loader (/build/webflow-web-experiment). -->
<script src="https://cdn.amplitude.com/script/AMPLITUDE_API_KEY.js"></script>
<script>
(() => {
  if (!window.amplitude || !window.sessionReplay) {
    console.warn("Amplitude did not load. Check the CDN request and site policy.");
    return;
  }
  window.amplitude.add(window.sessionReplay.plugin({
    sampleRate: 1,
    privacyConfig: {
      defaultMaskLevel: "conservative",
      maskSelector: ['[data-replay-mask="true"]'],
      blockSelector: ['[data-replay-block="true"]']
    }
  }));
  window.webflowAmplitudeReady = window.amplitude.init("AMPLITUDE_API_KEY", {
    remoteConfig: { fetchRemoteConfig: true },
    autocapture: {
      attribution: true,
      pageViews: { trackHistoryChanges: "pathOnly" },
      sessions: true,
      formInteractions: true,
      fileDownloads: true,
      elementInteractions: false,
      frustrationInteractions: false,
      networkTracking: false,
      webVitals: false
    }
  }).promise;
})();
</script>
```

## Hand it to your agent

Use this prompt with the tutorial content attached.

Using Cursor or Claude Code? Paste this prompt

```text
Agent task: Webflow session replay.
Edit the existing replay registration, preserving the loader, init, autocapture settings, engagement plugin, experimentConfig, and Footer code. Use conservative masking with data-replay-mask and data-replay-block selectors. Run a synthetic session, inspect the transmitted replay and actual playback, and verify identity association. Separate upload acceptance from playable replay evidence. Lower the test sampling rate afterward. Respect consent before loading the whole snippet.
```

## What this unlocks

[Product analytics](https://amplitude.com/amplitude-analytics) lets you find the activity around `Demo Request Confirmed` when that footer is installed.

[Heatmaps](https://amplitude.com/heatmaps) uses replay interactions to aggregate engagement after its prerequisites are met.

[Web Experiment](https://amplitude.com/web-experimentation) tests the change suggested by your replay review.

[Guides and surveys](https://amplitude.com/guides-and-surveys) collects feedback from visitors at a point you choose.

## Next steps

[WebflowHow to add web analytics to a Webflow siteA published Webflow site with automatic page views and sessions, plus a test visit attributed to \`utm\_campaign=webflow-build-qa\`.](https://amplitude.com/build/webflow-web-analytics)[WebflowHow to add product analytics to a Webflow siteA \`Pricing CTA Clicked\` event and a \`Demo Request Confirmed\` event, with fixed properties and no form field values in your custom events.](https://amplitude.com/build/webflow-product-analytics)[WebflowHow to add heatmaps to a Webflow siteHeatmap capture enabled for the Webflow project and a pricing-page map configured for the published URL, with the correct viewport bucket.](https://amplitude.com/build/webflow-heatmaps)

Reference docs

[Session replay plugin →](https://amplitude.com/docs/sdks/session-replay/session-replay-plugin)[Session replay settings →](https://amplitude.com/docs/session-replay/session-replay-settings)[Verify capture →](https://amplitude.com/docs/session-replay/verify-capture)[Debug analytics →](https://amplitude.com/docs/analytics/debug-analytics)[Configure sampling →](https://amplitude.com/docs/session-replay/configure-sampling)[Amplitude MCP server →](https://amplitude.com/docs/amplitude-ai/amplitude-mcp)

Amplitude is the leading [all-in-one analytics platform](https://amplitude.com/) for building better products. Product and engineering teams use Amplitude to connect [product analytics](https://amplitude.com/amplitude-analytics) and [web analytics](https://amplitude.com/web-analytics) with [session replay](https://amplitude.com/session-replay), [heatmaps](https://amplitude.com/heatmaps), [experimentation](https://amplitude.com/amplitude-experiment), [feature flags](https://amplitude.com/feature-management), and [guides and surveys](https://amplitude.com/guides-and-surveys) in one unified workflow, with [AI agents](https://amplitude.com/ai-agents) working across all of it. Learn how Amplitude is building [self-improving products](https://amplitude.com/self-improving-products) with [Wave](https://amplitude.com/wave), helping teams turn product data into PRs.

For agents

[View raw .md](/build/webflow-session-replay.md)[llms.txt](/llms.txt)

## Ship the instrumentation, then read the data

Use the verification steps above to check the events and product behavior you enabled.

[Create a free account](https://app.amplitude.com/signup)[Browse all Build tutorials](https://amplitude.com/build)