Click heatmaps show you exactly where visitors click on your pages. Every click from every visitor is aggregated into a single color overlay on a screenshot of the page, so you can see at a glance which elements draw attention and which areas go ignored.
What Are Click Heatmaps?
Click heatmaps aggregate all clicks on a page:
| Aspect | Description |
|---|---|
| Data | Every click from every visitor |
| Display | Color gradient overlaid on a page screenshot |
| Hot spots | High click concentration |
| Cold spots | Low or no clicks |
Color Scale
The overlay uses a continuous gradient running from low to high click density. A legend below the heatmap marks the Low and High ends of the scale. Brighter, warmer areas are where clicks cluster most.
Accessing Heatmaps
Heatmaps are a paid feature, available on Pro and above.
Open Heatmaps
Select Heatmaps from the sidebar, or open a website's dashboard and choose the Heatmaps tab.
Pick a page
The left panel lists pages with collected click data, each showing its total interaction and click counts. Use the search box to filter, then click a page to load it.
View the heatmap
The page screenshot loads with the click heatmap painted on top.
Viewing Heatmaps
Page List
The left panel is your page selector:
| Method | Description |
|---|---|
| Page list | Pick from pages that have collected data |
| Search | Filter the list by URL path |
| Counts | Each page shows its total interactions and click count |
You can collapse the panel with the toggle on its edge to give the heatmap more room.
Click and Scroll Modes
Above the heatmap, a Click / Scroll toggle switches between the click heatmap and the scroll depth view for the same page.
Time Range
A period selector lets you scope the heatmap to a recent window: 7 days, 30 days, 90 days, or 6 months. Longer windows are available on higher plans; locked options show a lock icon and the plan needed to unlock them.
Heatmap Display
Overlay View
The heatmap overlays a screenshot of your page:
- See the actual content beneath the overlay
- Zoom in and out with the on-screen controls, or pinch on touch devices
- Drag to pan once you're zoomed in
The header above the heatmap summarizes the data, showing the number of click points and total interactions in the selected window.
Full Page View
The Full Page button opens a full-screen inspector for the page:
- Zoom and pan across the entire heatmap
- Press Escape to exit
Screenshot Timeline
When a page has screenshots captured on more than one date, a date navigator appears below the heatmap. Step back and forward through the dates to see how the page looked over time.
Understanding the Data
The header shows two figures for the selected page and time range:
| Metric | Description |
|---|---|
| Click points | Distinct positions where clicks were recorded |
| Total interactions | All click events in the window |
Reading the overlay itself tells you the rest: dense, warm clusters are where attention concentrates, and dim or empty areas are where visitors aren't clicking.
Use Cases
CTA Optimization
Analyze your call-to-action buttons:
- Are they getting clicked?
- Where are visitors clicking instead?
- Above the fold vs below the fold
Navigation Analysis
Check navigation usage:
- Which menu items get used
- Hamburger menu engagement
- Footer navigation
Form Optimization
Understand form interaction:
- Which fields draw clicks
- Where visitors hesitate or drop off
Content Engagement
See content interaction:
- Image clicks
- Clicks on elements visitors expect to be interactive
When a cluster of clicks lands on something that isn't actually clickable, that's a strong signal of a mismatch between what visitors expect and what the page offers.
Managing Heatmap Data
Reset a Page
If you have editor access, the Reset button permanently deletes the collected heatmap data for the current page. This can't be undone, so you're asked to confirm first. Viewers without editor access see the button disabled.
Heatmap Accuracy
Data Collection
Heatmaps are built from real click events captured by the tracking script, mapped to coordinates on a screenshot of the page.
Limitations
Be aware that heatmaps can be affected by:
- Dynamic content that changes between visits
- Responsive breakpoints that shift layout
- A/B test variations of the same URL
Minimum Data
For a reliable heatmap, give a page time to collect a meaningful number of interactions. Low-traffic pages will look sparse until more data arrives.
Best Practices
Regular Review
Check heatmaps regularly:
- After design changes
- After new campaigns
- Before a redesign
Action Items
Use what you find to:
- Move CTAs toward the hot spots
- Add real links where visitors are already clicking
- Remove or rework elements that confuse
Combine with Sessions
Heatmaps tell you where and how much. To understand why, watch individual session recordings for the same page.