How to add heatmaps to a Webflow site

A replay shows one visit to your Webflow pricing page. Heatmaps combines replay interactions so you can see where visitors click and how far they scroll.

In this tutorial, I'll check the existing replay installation, enable heatmap capture for the project, and build a pricing-page map. You'll also check the URL and viewport filters that can leave a map empty.

What you'll build

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.
• 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.
• A Webflow site with the session replay tutorial setup, including verified masking and a published Pricing page.
• An Amplitude Plus, Growth, or Enterprise plan with session replay access. An admin or manager enables capture; users with View permissions can create heatmaps.

Sign up for an Amplitude account and compare plans for heatmap access.

1. Check the deployed replay installation

Follow the heatmap prerequisites before adding code. Heatmaps uses replay interactions, so keep the existing replay plugin and analytics initializer. You don't install a heatmap package or turn on click autocapture for this step.

Use Instrumentation Explorer's replay debug panel to verify that the deployed replay plugin is at least version 1.7.0. The project-specific CDN controls versions remotely. Check the live page rather than assuming a version from a package reference.

// Browser Console: inspect the analytics identity on the published page
window.amplitude.getDeviceId();

The Browser SDK with its replay plugin manages device-ID alignment automatically. Keep that integration together.

2. Enable heatmap capture for the project

In Amplitude, go to Settings > Organizational Settings > Session Replay Settings. Find the project and enable heatmap capture, keeping session capture enabled. Review the effective sample rate: fewer captured sessions means fewer interactions available for maps.

Use a synthetic visit to check replay collection after changing the setting:

// Browser Console: send a named test marker after the page is ready
window.amplitude.track("Webflow Heatmap QA", { page_path: location.pathname });
window.amplitude.flush();

This marker helps you find the test visit. It doesn't generate heatmap clicks; interact with the page normally and verify its replay.

3. Create the pricing-page heatmap

Open Heatmaps > + New Heatmap. Choose a map type and use Exact match with the published Pricing URL. Choose the intended date range and leave segment filters broad for the first check.

Compare the target with the captured [Amplitude] Page URL property in Instrumentation Explorer. For this first map, open Pricing without query parameters or a hash and use that URL. The SDK's default Page URL removes the query string but can retain a hash; pathOnly controls page-view emission, not URL normalization. Don't assume a bare /pricing exact match covers events recorded at /pricing#demo. If you need both, choose an appropriate broader match and check which pages it includes.

Inspect the current browser URL:

// Browser Console on your published Pricing page
location.href;

Docs describe initial availability after at least 10 separate pages with about 500 replay clicks on each page. These are approximate thresholds. A small test site can prove capture and replay playback without yet producing a usable heatmap. Collect representative traffic rather than treating an empty overlay as a failed SDK install.

4. Match the background to the recorded width

Heatmaps groups widths into four buckets: greater than 1440px, 900 to 1440px, 500 to 899px, and less than 500px. Select the device width represented in your test data. Use Change Screenshot > From a Replay when the background comes from a different bucket.

// Browser Console: note the viewport width used for this test visit
window.innerWidth;

Once the map has data, narrow segments or cohorts. If the broad map works but a segment is empty, check device-ID alignment and whether the segment has captured sessions.

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.

Record map availability separately from SDK and replay checks. A blank map below the documented thresholds remains unverified.

Troubleshooting

The heatmap is empty but the replay plays

Check the exact URL, date range, approximate data thresholds, and width bucket. Confirm heatmap capture is enabled separately from replay capture.

The URL cannot be matched

Check whether [Amplitude] Page URL was deleted. In Data > Properties, search for the property and use Restore when appropriate.

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

Do heatmaps require click autocapture?

Heatmaps uses session replay data. Keep replay capture working; elementInteractions is a separate analytics setting.

Can I validate an entire heatmap on a three-page test site?

You can check installation, capture, replay, and map configuration. The documented data thresholds mean a usable aggregate map can remain unavailable.

Full code reference

Keep existing sibling-page additions named in the comments.

// No new SDK code. Keep Head code and Footer code from earlier Webflow pages.
// Optional QA marker, run in the browser Console:
window.amplitude.track("Webflow Heatmap QA", { page_path: location.pathname });
window.amplitude.flush();

Hand it to your agent

Use this prompt with the tutorial content attached.

Agent task: Webflow heatmaps.
Keep all existing Webflow integration code, privacy settings, consent handling, and conversion listeners. Do not add another SDK or use elementInteractions as the heatmap dependency. Verify plugin version, capture settings, replay identity, URL matching, and width bucket. Create the map in Amplitude and report whether a real overlay is available. Treat insufficient data as an unverified map, not a passing visual test. Do not fabricate traffic to claim a pass.

What this unlocks

Session replay lets you review a visit behind a busy area of the pricing page.

Product analytics compares Pricing CTA Clicked and Demo Request Confirmed when those events are installed.

Web Experiment tests moving a CTA after the map suggests a placement problem.

Guides and surveys asks visitors a question on a page you target.

Next steps

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