---
title: "How to add heatmaps to a Framer site"
description: "Use Amplitude session replay to create heatmaps for a Framer pricing page."
canonical: "https://amplitude.com/en-us/build/framer-heatmaps"
---

# How to add heatmaps to a Framer site

Use Amplitude session replay to create heatmaps for a Framer pricing page.

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

---

# How to add heatmaps to a Framer site

Use Amplitude session replay to create heatmaps for a Framer pricing page. Configure capture, choose a matching background, and check data availability.

- Framer
- Published site
- Browser SDK 2
- 20 min plus data collection

Chris Tam · Last updated 19 October 2026

On a Framer product website, you may want to know whether visitors reach the plan details and notice the button beneath them. Amplitude [heatmaps](https://amplitude.com/heatmaps) show aggregate clicks and scrolling for that page.

In this tutorial, you'll use a pricing page as the example, configure replay capture, and choose a background that matches its layout. You'll check data availability before interpreting the map.

A saved pricing-page heatmap with a replay background from the matching viewport range. Once enough eligible interaction data is available, you'll inspect click and scroll patterns for that page.

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.
- Heatmap access and enough eligible traffic for a populated map. You can verify installation and a replay background before that threshold.

Heatmaps require a Plus, Growth, or Enterprise plan with the session replay addon. [Compare plans](https://amplitude.com/pricing), or [sign up](https://app.amplitude.com/signup) to create a project.

## 1. Install the replay-enabled 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 }));
  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. Enable heatmap capture

In Amplitude's session replay and heatmap settings, check that heatmap capture is enabled for your project. Have an admin or manager update those controls if your role can't change them.

Heatmaps require session replay plugin 1.7.0 or later, or standalone replay SDK 1.14.0 or later. Confirm the version actually loaded on your published page; the CDN URL is project-specific, so avoid assuming a version from the URL alone.

```text
Heatmap prerequisites
Session replay collection: enabled
Heatmap capture: enabled
Replay plugin version: 1.7.0 or later
```

## 3. Create a pricing-page heatmap

Visit the published pricing page, click the CTA, and scroll through it in a recorded test session. In Amplitude, open **Heatmaps**, choose **Create Heatmap**, and enter your published pricing URL.

Start with an exact page match and a date range that includes the test. Use the full hostname so traffic from a different deployment doesn't get mixed into the view. Keep the initial segment broad while you verify data availability.

```text
Heatmap setup
URL: https://your-site.framer.app/pricing
Match: matches exactly
Date range: includes your test visit
Segment: All Users
```

## 4. Choose a matching replay background

Select **Add Screenshot** on a new heatmap, or **Change Screenshot** on an existing one, then **From a Replay**. Choose the device-size range that contains your recorded viewport, confirm the pricing URL, and find a replay.

Select a frame that shows the layout you want to analyze, choose **Use This Screenshot**, and save the heatmap with a descriptive name. Framer's own breakpoint labels can differ from Amplitude's ranges; use the recorded pixel width when choosing the range.

## 5. Check data before interpreting the map

Compare click and scroll views only after confirming the URL, range, and segment include eligible data. A replay background can be available before an aggregate heatmap is ready.

Amplitude's troubleshooting guide says heatmap availability requires approximately 10 separate pages with 500 session replay clicks each. A three-page test site with a few visits is enough to check setup and replay backgrounds, but it doesn't establish populated heatmap behavior. Use a site with sufficient real eligible traffic for the aggregate check.

## 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 background:** confirm the pricing layout and selected viewport range match. If the page is masked in replay, its replay-derived background can be masked too.
5. **Saved map:** reopen the saved heatmap and check its URL, date range, and segment.
6. **Aggregate data:** confirm the traffic prerequisites before expecting a populated map. Record an empty state as an availability result; don't interpret it as proof that visitors never clicked.

## 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.

### A recording exists, but the map is empty

Check heatmap enablement and traffic prerequisites, then URL, time range, and viewport filters. Replay availability alone doesn't prove heatmap aggregation is available.

### Clicks don't line up with the page

Use a background from a replay in the same viewport range and site version. Replace a background after a Framer redesign changes element positions.

### A cohort filter removes all data

Use the replay plugin with the same analytics instance so device IDs align. Remove the filter while checking whether eligible data exists.

## Full code reference

For a fresh installation, use the replay-enabled snippet below. Unchanged from earlier pages; keep your versions: the replay privacy configuration, custom CTA listener, engagement registration, and experiment loader. The remaining changes are project capture settings and the saved heatmap configuration.

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 }));
  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-heatmaps 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.
Check the real traffic threshold and matching viewport. Distinguish a saved replay background from populated aggregate heatmap data.
```

## 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)[BehaviorFramer session replayReview a visit while keeping form fields masked.](https://amplitude.com/build/framer-session-replay)[FeedbackFramer guides and surveysAsk a question on a specific published page.](https://amplitude.com/build/framer-guides-surveys)

Reference docs

[Heatmaps →](https://amplitude.com/docs/heatmaps)[Create a heatmap →](https://amplitude.com/docs/heatmaps/create-a-heatmap)[Troubleshoot heatmaps →](https://amplitude.com/docs/heatmaps/troubleshooting)[Amplitude Quickstart →](https://amplitude.com/docs/get-started/amplitude-quickstart)[Browser SDK 2 →](https://amplitude.com/docs/sdks/analytics/browser/browser-sdk-2)

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-heatmaps.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)