Heatmaps

Heatmaps provide a visual overlay of where users click on your pages. Use them to identify interaction hotspots, detect usability issues, and determine the best placement for flows and tooltips.

Viewing Click Heatmaps

Navigate to Analytics > Heatmaps and enter a page URL to generate a heatmap. The heatmap aggregates click data for the selected URL and date range, rendering a color-coded overlay where warmer colors indicate higher click density.

Query the API directly with:

GET /api/analytics/heatmaps?url=https://app.example.com/dashboard&startDate=2025-01-01&endDate=2025-01-31

Heatmap Data

Each heatmap response includes:

Field	Description
url	The page URL for which data was collected
totalClicks	Total number of clicks recorded on the page
rageClicks	Count of rage click events detected
deadClicks	Count of dead click events detected
points	Array of individual click data points

Each point in the points array contains:

Field	Description
x	Horizontal coordinate of the click (pixels from left)
y	Vertical coordinate of the click (pixels from top)
elementSelector	CSS selector of the clicked element (null if unavailable)
isRageClick	Whether this click was part of a rage click sequence
isDeadClick	Whether this click targeted a non-interactive element

Rage Clicks

Rage clicks are rapid, repeated clicks on the same area -- typically a sign of user frustration. The SDK detects rage clicks automatically when a user clicks the same region multiple times in quick succession.

Common causes of rage clicks:

• Buttons that appear clickable but do not respond
• Slow-loading elements that have not yet become interactive
• Confusing UI where users expect an action but nothing happens

Review pages with high rage click counts to identify and resolve usability problems.

Dead Clicks

Dead clicks occur when users click on non-interactive elements such as static text, images, or decorative components. A high dead click count suggests that users expect interactivity where none exists.

Use dead click data to:

• Add missing links or buttons where users expect them
• Improve visual cues that distinguish interactive from non-interactive elements
• Position flows and tooltips near areas where users naturally click

Using Heatmaps to Improve Flows

Heatmap data directly informs flow placement and design:

• Place tooltips near hotspots. Anchor guidance content to elements users already interact with.
• Address rage click areas. Create flows that guide users through confusing interactions before frustration builds.
• Validate flow changes. Compare heatmap data before and after deploying a new flow to confirm it reduced confusion.