---
title: "How to add session replay to a Framer site"
description: "Add Amplitude session replay to a Framer site and keep form fields masked."
canonical: "https://amplitude.com/en-us/build/framer-session-replay"
---

# How to add session replay to a Framer site

Add Amplitude session replay to a Framer site and keep form fields masked.

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

---

# How to add session replay to a Framer site

Add Amplitude session replay to a Framer site and keep form fields masked. Record and play back a synthetic visit in about 20 minutes.

- Framer
- Published site
- Browser SDK 2
- 20 min

Chris Tam · Last updated 19 October 2026

A visitor opens your Framer pricing page, reviews a plan, and starts filling out a form. Amplitude [session replay](https://amplitude.com/session-replay) lets you watch that visit to understand what happened around those actions.

In this tutorial, you'll record a synthetic visit through a small product website, keep form fields masked, and play it back in Amplitude. You'll check the recording before choosing production sampling and privacy settings.

A replay of a visit through home, pricing, and thank-you, with masked form input. You'll confirm that the replay plays and that its privacy settings match what you intended.

The example site follows a visitor evaluating a product: the home page introduces it, `/pricing` describes one plan, and a `Start test` button represents the decision to try that plan. For this demo, the button opens `/thank-you` so you can follow the navigation without creating an account or taking a payment.

## Prerequisites

- A Framer site where you can add custom code and publish changes.
- A published home page, `/pricing`, and `/thank-you`. On `/pricing`, add a `Start test` link to `/thank-you`.
- An Amplitude test project and its project API key from [your project settings](https://amplitude.com/docs/apis/authentication). Use the project's US data region for the code below.
- Session replay enabled in your test project, plus a native Framer form with a destination you control and a success redirect to `/thank-you`.

[Sign up for free](https://app.amplitude.com/signup) to create a project. Check your project's product access and quotas before moving beyond the test.

## 1. Add the analytics and replay snippet

In Framer, open **Settings > Code > Add**. Name the snippet `Amplitude`, set **Placement** to **Start of \<head>**, choose **All pages**, and set **Run** to **Once**. Use the [Amplitude Quickstart's script installation](https://amplitude.com/docs/get-started/amplitude-quickstart) for this site without a build step.

Replace every `AMPLITUDE_API_KEY` with the same project API key. The key is public and has the scope needed for ingestion. Framer injects this value into the published page; keep secret and management keys out of it.

If Amplitude is already installed, merge the additions into that snippet. Keep one SDK loader and one `amplitude.init()` call, including lines added by other Framer tutorials. Use the browser snippet in Framer's site settings, outside an Embed component or canvas preview.

```html
<!-- Framer Settings > Code: Start of <head>, All pages, Once -->
<!-- Keep lines other Framer pages added here: Pricing CTA Clicked listener
(/build/framer-product-analytics), attribution.trackingMethod
(/build/framer-web-analytics), sessionReplay privacyConfig
(/build/framer-session-replay), replay sampling used by heatmaps
(/build/framer-heatmaps), experiment.js (/build/framer-web-experiment),
engagement.js and engagement.plugin() (/build/framer-guides-surveys). -->
<script src="https://cdn.amplitude.com/script/AMPLITUDE_API_KEY.js"></script>
<script>
if (!window.__amplitudeFramerInitialized) {
  window.__amplitudeFramerInitialized = true;
  window.amplitude.add(window.sessionReplay.plugin({
    sampleRate: 1,
    privacyConfig: { maskSelector: ["input", "textarea", "select"] }
  }));
  window.amplitude.init("AMPLITUDE_API_KEY", {
    remoteConfig: { fetchRemoteConfig: true },
    autocapture: {
      attribution: { trackingMethod: ["userProperty", "eventProperty"] },
      fileDownloads: true,
      formInteractions: true,
      pageViews: true,
      sessions: true,
      elementInteractions: true,
      networkTracking: true,
      webVitals: true,
      frustrationInteractions: true
    }
  });
}
</script>
```

This test configuration also starts session replay with `sampleRate: 1`. That requests capture of every eligible session; project settings and quotas still apply. For an analytics-only installation, remove the `sessionReplay.plugin(...)` registration. Before a production rollout, choose the replay sampling and privacy settings you want.

Remote autocapture settings can override individual local options. If the expected page, click, or form events are missing, check **Data > Settings > Autocapture** in the project.

**Why.** Framer can navigate between pages without reloading the document. Running initialization once lets the SDK handle page views across those transitions without adding another listener on every route.

## 2. Check project sampling and privacy

Open your project's session replay settings in Amplitude. Check that collection is enabled and review the sample rate and privacy controls for this test project.

The snippet sets `sampleRate: 1` for testing and adds CSS selectors that mask form fields. Remote privacy settings take precedence where they conflict with the SDK. Keep sensitive content masked; a project's Conservative setting can mask ordinary page text as well.

```text
Replay test settings
SDK sampleRate: 1
privacyConfig.maskSelector: input, textarea, select
Project privacy: review before recording
```

## 3. Record a synthetic visit

Publish the snippet. Open the public site, navigate to pricing, enter a synthetic test name, and submit the form to a destination you control. Return home after the thank-you page loads.

Keep the page focused while you test. Replay capture depends on eligible recorded activity, and background-only sessions can produce limited recordings. The SDK's session tracking also sends `[Amplitude] Start Session`, which can carry `[Amplitude] Session Replay ID` when the session is captured.

## 4. Play the recording in Amplitude

Open **Session Replay** in the same project. Find the visit by time or the device ID you inspected in Instrumentation Explorer, then open the recording and press Play.

Check navigation, the pricing CTA, and the form field while it changes. Confirm that the synthetic input is masked in playback. Test at a mobile width too before using the configuration on a production site.

## Verify it worked

1. **Published site:** use the public Framer URL. Open developer tools and confirm the Amplitude scripts load. Canvas preview isn't the published installation.
2. **Network:** confirm an event ingestion POST succeeds with HTTP 200. For the US endpoint, filter on `api2.amplitude.com`. Requests can be compressed, so use Instrumentation Explorer for event contents.
3. **Instrumentation Explorer:** inspect the event names, properties, and device ID. In Amplitude, find that device in **User Profiles** and check its activity. Use your test project, not another project in the organization.
4. **Replay:** find the test visit in Session Replay and play it. Confirm pricing navigation and the final thank-you page.
5. **Privacy:** inspect the actual form input in playback. It should appear masked. Review other text and media so the recording matches your project's intended privacy settings.
6. **Sampling:** after testing, set an appropriate production sample rate. Remove the replay plugin registration entirely if you want this installation to collect analytics only.

## Troubleshooting

### The published page has no events

Confirm the snippet is saved, published, assigned to All pages, and uses the intended project key. Check browser console errors and whether an extension blocks the script or ingestion request.

### One navigation produces two page views

Remove duplicate installations from site and page code, tag managers, and components. Keep one init call and let `autocapture.pageViews` track navigation. Inspect a fresh page load after publishing.

### A form event arrives, but no submission arrives at its destination

Form autocapture records an interaction. Configure the native Framer form's destination and its **Redirect** field separately, then verify delivery at that destination. A link on the form layer doesn't configure the success redirect.

### Events arrive, but a replay doesn't

Check replay collection, project limits, sampling, remote configuration requests, and the time filter. A session outside the sample won't have a recording. When enabled remote privacy configuration fails to load, replay doesn't capture the session.

### The replay masks the headline as well as the input

Review the project's privacy level. Remote privacy settings can override SDK settings. Keep the stricter setting unless you deliberately approve a narrower mask for public content.

### Styles are missing in playback

Check whether your asset server permits replay playback to load the styles. The documented CORS origins are `app.amplitude.com` and, for EU projects, `app.eu.amplitude.com`. Follow the replay troubleshooting reference for your asset setup.

## Full code reference

Merge this replay configuration into the existing installation. Preserve the custom CTA listener, attribution settings, and any engagement or experiment loaders from other tutorials.

Full code reference

```html
<!-- Keep lines other Framer pages added here: Pricing CTA Clicked listener
(/build/framer-product-analytics), attribution.trackingMethod
(/build/framer-web-analytics), sessionReplay privacyConfig
(/build/framer-session-replay), replay sampling used by heatmaps
(/build/framer-heatmaps), experiment.js (/build/framer-web-experiment),
engagement.js and engagement.plugin() (/build/framer-guides-surveys). -->
<script src="https://cdn.amplitude.com/script/AMPLITUDE_API_KEY.js"></script>
<script>
if (!window.__amplitudeFramerInitialized) {
  window.__amplitudeFramerInitialized = true;
  window.amplitude.add(window.sessionReplay.plugin({
    sampleRate: 1,
    privacyConfig: { maskSelector: ["input", "textarea", "select"] }
  }));
  window.amplitude.init("AMPLITUDE_API_KEY", {
    remoteConfig: { fetchRemoteConfig: true },
    autocapture: {
      attribution: { trackingMethod: ["userProperty", "eventProperty"] },
      fileDownloads: true,
      formInteractions: true,
      pageViews: true,
      sessions: true,
      elementInteractions: true,
      networkTracking: true,
      webVitals: true,
      frustrationInteractions: true
    }
  });
}
</script>
```

## Hand it to your agent

Use this prompt with an agent that can inspect your Framer settings and the published page.

Using Cursor or Claude Code? Paste this prompt

```text
Follow https://amplitude.com/build/framer-session-replay on my Framer test site.
Merge changes into existing custom code. Preserve the additions listed in its
keep-lines comment, and never delete lines another Amplitude Build page added.
Use one analytics loader and one init call. Create /pricing and /thank-you if
missing, and add a pricing CTA pointing to /thank-you. Ask for the project API
key if it isn't available; never insert a secret or management key. Don't reset
anonymous visitors or double-track autocaptured page views. Check the published
site after saving and publishing custom code. Report events and properties you
observed, separate docs checks from runtime tests, and list unresolved checks.
Keep input, textarea, and select values masked. Check actual playback and remote privacy settings; never claim that a loaded SDK proves replay capture.
```

## What this unlocks

[Session replay](https://amplitude.com/session-replay) lets you inspect a recorded visit around `[Amplitude] Page Viewed` after replay capture is configured.

[Heatmaps](https://amplitude.com/heatmaps) show aggregate pricing-page interactions after heatmap capture and sufficient traffic are available.

[Experimentation](https://amplitude.com/amplitude-experiment) lets you compare variants using a defined conversion metric, alongside the experiment's exposure event.

[Guides and surveys](https://amplitude.com/guides-and-surveys) let you ask a targeted question on the pricing page after you install the engagement SDK and configure the experience.

## Next steps

[FoundationFramer product analyticsAdd a named pricing CTA event.](https://amplitude.com/build/framer-product-analytics)[FeedbackFramer guides and surveysAsk a question on a specific published page.](https://amplitude.com/build/framer-guides-surveys)

Reference docs

[Amplitude Quickstart →](https://amplitude.com/docs/get-started/amplitude-quickstart)[Browser SDK 2 →](https://amplitude.com/docs/sdks/analytics/browser/browser-sdk-2)[Debug analytics →](https://amplitude.com/docs/analytics/debug-analytics)[Session replay plugin →](https://amplitude.com/docs/sdks/session-replay/session-replay-plugin)[Session replay privacy →](https://amplitude.com/docs/session-replay/manage-privacy-settings-for-session-replay)

Use [Amplitude MCP](https://amplitude.com/mcp) to inspect your project's existing event taxonomy before naming custom events.

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/framer-session-replay.md)[llms.txt](/llms.txt)

## Ship the instrumentation, then read the data

Once events are flowing, build a funnel for your pricing flow and use the checks above to verify the additional products you enable.

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