A website heatmap is a picture of your page with color laid over it to show where visitors clicked, how far they scrolled or where they spent time. Warm colors mean many visitors, cool colors mean few. A small script on the page records interactions, and the tool adds them up across many visits.
| Type | What it shows | Question it answers |
|---|---|---|
| Click map | Where people clicked or tapped | Is anyone pressing my main button? |
| Scroll map | The share of visitors who reached each depth of the page | Do people ever see my prices? |
| Area map | Total clicks inside an area you select | How much does the whole menu get used? |
| Attention map | Time spent on each part of the page | Which section holds people? |
| Move map | Where the mouse pointer went, offered by some tools | What are desktop visitors drawn to? |
Updated
Analytics tells you how many people visited a page. A heatmap shows what they did once they were there. For a small business site that often explains the puzzle in one glance: the button nobody clicks, the photo everyone taps expecting a link, the offer sitting below where most visitors stop scrolling. Try the demo to see how one gets built.
Click or tap anywhere on the sample page below. Each click adds heat. Nothing is sent anywhere: the clicks stay in this browser tab.
Two short snippets for sites using Clarity. Both follow Microsoft's published API; the values here are examples.
Adding data-clarity-mask with the value True masks that element and everything inside it, whatever the site-wide setting.
<section data-clarity-mask="True">
<h2>Your account</h2>
<p>Order history and saved addresses</p>
</section>Call this from your cookie banner after the visitor accepts. If they decline, Clarity runs without cookies, so no call is needed.
window.clarity('consentv2', {
ad_Storage: "granted",
analytics_Storage: "granted"
});Each click becomes a soft circle from createRadialGradient. Overlapping circles stack, so busy spots turn darker.
function drawHeat(ctx, clicks, radius = 40) {
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
for (const { x, y } of clicks) {
const g = ctx.createRadialGradient(x, y, 0, x, y, radius);
g.addColorStop(0, "rgba(220, 38, 38, 0.45)");
g.addColorStop(1, "rgba(220, 38, 38, 0)");
ctx.fillStyle = g;
ctx.fillRect(x - radius, y - radius, radius * 2, radius * 2);
}
}A script on your page listens for clicks, taps and scrolling and sends small records to the tool: which element was pressed, the page width, how far down the visitor got. The tool then groups the records by page and device and colors the page.
Better tools tie clicks to page elements rather than raw screen positions. Clarity's documentation says its click maps use elements rather than absolute mouse position, so maps stay accurate across screen sizes and responsive layouts.
Decide how much page text the tool may store. Clarity offers Strict, which masks all content, Balanced, which masks sensitive content like numbers and email addresses, and Relaxed, which masks only form fields and drop-downs.
You can also mark single parts of a page as private. In Clarity that is the data-clarity-mask attribute, shown in the code below. Clarity also says it should not be used on sites aimed at users under 18.
Yes. Microsoft's documentation describes Clarity as a free service forever, with click, scroll, area, conversion and attention maps plus session recordings. Other tools such as Hotjar also offer heatmaps; check their current plans on their own sites.
There is no official number. Some tools draw a map from very little traffic, but a handful of visits mostly shows individual habits. Wait until the pattern stops changing as more visits arrive before you redesign anything.
It depends on the tool and the law where your visitors are. Clarity, for example, began enforcing consent signals for visits from the EEA, the UK and Switzerland on October 31, 2025. This is not legal advice; check the rules that apply to you.
Good tools hide it. Clarity's documentation says content in input boxes and drop-downs is masked in every mode, and its default Balanced mode also masks numbers and email addresses.
A heatmap adds up many visits into one picture of a page. A session recording replays one visitor's journey across pages. Heatmaps show patterns; recordings help explain a single odd one.
Related: A/B test calculator, How to run an A/B test, Google Ads landing page experience, Facebook UTM parameters.
Start for free or see all free tools. We.Inc is free to start, with no card needed. AI building is on paid plans from $20 a month.
We.Inc is an AI-powered website builder you can resell under your own brand. Launch a branded client dashboard, bill on Stripe Connect, and deliver AI-generated websites in minutes. White-label plans start at $99 a month for 25 client sites, with a 7-day free trial and no per-site fees.