> For the complete documentation index, see [llms.txt](https://docs.humblytics.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.humblytics.com/understanding-your-data/understanding-heatmap.md).

# Understanding Heatmap

See where visitors click and how far they scroll, drawn on top of a screenshot of your real page.

A heatmap colors your page by activity: warm colors (red, orange) show where people click the most, and cool colors (blue) show where they click least. A scroll map shows how many visitors reach each part of the page.

Go to **Observe → Heatmaps**.

<mark style="background-color:pink;">ADD GIF HERE</mark>

## Add a page

1. Click **Add Page**.
2. Pick a page from the suggestions, which are your most-visited pages that aren't tracked yet. You can also search your pages, or type any URL under **Or add any URL**.
3. Humblytics captures a screenshot and starts drawing the heatmap from your existing click and scroll data.

Click **Show Guide** for a quick walkthrough.

## Controls (left panel)

| Control               | What it does                                                                                                                                                            |
| --------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Page selector**     | Switch between your tracked pages.                                                                                                                                      |
| **Device View**       | Switch between **Mobile** and **Desktop**. People behave differently on each.                                                                                           |
| **Show Heatmap**      | Turn the color overlay on or off.                                                                                                                                       |
| **Heatmap Intensity** | Make hotspots stronger or softer.                                                                                                                                       |
| **Advanced Options**  | **Click Count Badges** (numbers on each element), **Average Fold Line** (how far the average visitor scrolls), and **Screen Size Filter** (one screen width at a time). |
| **Date Range**        | Pick which version of the heatmap to view. See [Versions](#versions) below.                                                                                             |
| **Captured On**       | When the screenshot was taken. Click the refresh icon to capture a new one.                                                                                             |

Below the controls:

* **Top Clicked Elements:** every clicked element, ranked, with its click count, share of clicks, and the screen sizes the clicks came from.
* **Scroll Details:** **Average Depth** (how far down the average visitor gets), **Sessions**, and **Scroll Buckets**. Each bucket shows the percentage of visitors who reached that 10% slice of the page. The top bucket is always 100%, because everyone sees the top of the page.

## Screenshot (right panel)

Switch between **Heatmap** (clicks) and **Scroll** (reach at each depth). Use the toolbar to zoom, recapture the screenshot, go full screen, or download the heatmap image and scroll details.

## Versions

Each time you capture a new screenshot, Humblytics starts a new heatmap version and keeps the old ones. Open **Date Range** to switch between versions, with the newest marked **Current**. This lets you compare behavior before and after a redesign.

{% hint style="info" %}
**Seeing "Date Range Mismatch"?** The heatmap version you're viewing falls outside the dates picked at the top of the page. Pick a wider date range, or switch to a different version.
{% endhint %}

## What to look for

* **Hotspots on things that aren't links:** people expect them to be clickable.
* **A cold main CTA:** it isn't standing out, or it sits below where most people stop scrolling.
* **The average fold line above your key content:** most visitors never see it. Move it up or shorten what comes before it.
* **Mobile vs. desktop differences:** a layout that works on desktop can bury content on mobile.