What is a website heatmap?

What are the four types of website heatmap?

Four distinct visualizations get called "heatmap," and they answer different questions.

Click maps show where visitors clicked or tapped, aggregated across sessions. The valuable half is the clicks landing on things that are not clickable, because those are visitors telling you what they expected to be a link.

Scroll maps show how far down the page visitors got, as a percentage of the sample still present at each depth. Where the color drops sharply is where most of your page stops existing for most of your audience.

Attention maps (also called move maps or hover maps) approximate where visitors looked by tracking cursor position and dwell time. Cursor position is a proxy for gaze, not a measurement of it. Treat these as the weakest of the four.

Area maps aggregate all clicks inside a region you select, rather than per element. Useful on navigation blocks and card grids where per-element counts fragment across a dozen near-identical targets.

Microsoft Clarity generates heatmaps automatically from tracked sessions without per-page configuration. Which types it ships, and what Microsoft calls each one, has changed over time, so take the current list from Clarity's own documentation.

How does a website heatmap actually work?

A tracking script loads on the page and listens for pointer and scroll events. Each event is recorded with coordinates, a timestamp, a viewport size, and usually a reference to the DOM element under the pointer. Those events stream to the vendor, get grouped by URL and device class, and get composited into a single overlay rendered over a screenshot or a live rebuild of the page.

What differs between tools is what each event is anchored to. Coordinate binding stores raw x and y pixel positions, which stop pointing at the right thing as soon as the layout reflows at a different viewport width. DOM binding stores a selector path to the element, which survives reflow and makes device segmentation possible, and which stops resolving when the markup changes. That choice decides how much of your history survives a redesign, and click map covers its consequences in detail.

How much traffic does a heatmap need before you can trust it?

A heatmap is not a statistical test. It produces no p-value, no confidence interval, and no significance threshold, so no sample size makes it "valid" in the way a sample size validates an A/B test. What sample size buys you is stability, meaning the pattern stops changing as more sessions arrive.

Working thresholds, by map type:

Those figures come from vendor guidance rather than published research, so treat them as starting points. Two adjustments matter more than the numbers. Segmenting by device splits the sample, so a page needing 1,000 sessions for a combined read needs roughly 2,000 to support separate mobile and desktop conclusions. And the higher the stakes, the higher the bar: restructuring a checkout deserves several thousand sessions, not several hundred.

The honest test is whether the pattern holds when you cut the date range in half. If it moves, you do not have enough data.

What can a heatmap not tell you?

A heatmap shows behavior, never motive. A cold section is ambiguous. It might be irrelevant, badly positioned, or so clear that nobody needed to linger. The overlay cannot separate those.

Attention maps infer, they do not measure. Any conclusion resting on a move map alone is a guess wearing a color gradient.

Aggregation hides segments. A heatmap averages your traffic. If paid visitors behave differently from organic visitors, the composite describes neither. Segment before concluding, which returns you to the sample size problem above.

Dynamic content flattens into one picture. Tabs, accordions, sliders, and modals change what is on screen without changing the URL, so every visual state composites onto a single screenshot. The map then describes a page that no individual visitor ever saw. The same applies to a personalized or A/B tested URL, where the overlay blends the variants.

Below-fold attention decays regardless of your design. Attention concentrates before the first scroll, which above the fold covers with the eyetracking figures. A scroll map showing steep decay is often showing you a universal pattern, not a flaw specific to your page.

How do you set up heatmaps on a Webflow site?

Installation is a script tag.

1. Get the tracking snippet from your tool. Microsoft Clarity is the usual default on a Webflow site, for the reason in the FAQ below.
2. In the Webflow Designer, open Site Settings, Custom Code, Head Code and paste the snippet, which loads it site-wide. For one page only, use Page Settings, Custom Code on that page instead.
3. Publish. Scripts in custom code do not run on the Designer canvas or in preview mode, only on the published site.
4. Wait for traffic to accumulate against the thresholds above before opening the overlay.

Three Webflow-specific issues to plan around:

Decide how you will handle CMS templates before you choose a tool. Every CMS item is a separate URL, so one template's traffic fragments across every item under it. URL pattern grouping is the feature that solves this, and not every tool has it. Without it, individual CMS pages will rarely clear the thresholds above.

Staging and production collect separately. The .webflow.io staging domain and your custom domain are different hostnames, so your team's QA clicks land in the sample as real visits unless you filter that hostname out.

Republishing can invalidate history. Structural changes break DOM binding, so the historical data for a rebuilt section stops resolving to anything. Export or screenshot a heatmap you care about before a redesign, because it cannot be reconstructed afterward.

When should you use a heatmap instead of a session recording or an A/B test?

Heatmaps are a hypothesis generator. They tell you which part of a page to interrogate, and they cannot tell you whether a change works. A heatmap that shows a cold pricing section becomes a session recording review of visitors who reached that section, which becomes a hypothesis, which becomes a test. Skipping to the redesign because the overlay looked cold is how teams ship changes that lose money and never find out.

Related terms

• Click map
• Scroll map
• Rage click
• Session recording
• Heatmap tools

Deeper reading: Diagnosing why users drop off using session recordings and What is structured A/B testing.

Service: Conversion Rate Optimization.

FAQ

Are website heatmaps accurate?

They accurately report the events they recorded, and they represent your audience only when the sample is large enough to be stable and segmented enough to be meaningful. Failures come from small samples, blended device data, and dynamic content.

Is Microsoft Clarity good enough, or do you need a paid heatmap tool?

Clarity is free with no session limit at the time of writing in August 2026, and its heatmap coverage is enough for most Webflow sites. Paid tools earn their price on segmentation depth, URL pattern grouping across CMS pages, and testing integrations. Upgrade when a specific limitation blocks a specific decision.

Do heatmaps slow down a Webflow site?

Every tracking script adds weight and a third party connection. Run one behavioral analytics tool rather than three in parallel, and measure the difference in PageSpeed Insights rather than assuming it is negligible.

How long should you run a heatmap before reading it?

Long enough to clear the sample thresholds above and to cover at least one full weekly cycle, because weekday and weekend traffic often behave differently. Two weeks is a reasonable default for a page with steady traffic.