Device & Display Options (Device, Fixed Clicks, Dot Colors)
Device & Display Options
This section explains the controls above the heatmap iframe: Select Device Type, Click / Heat mode, the Fixed clicks toggle, and Dot Colors (Non-nav / Navigation / Conversions).
Where it appears: Click Map Details → Heatmap & Navigation Clicks
UI source: /heatclick-BH/panel-above-iframe.php
Heatmap iframe tab: /extended/tabs/tab-heatmap.php
1) Select Device Type
Device selection changes which click dataset is loaded and how the site is rendered inside the iframe.
Allowed values:
mobile,
tablet,
desktop-s,
desktop-m,
desktop-l,
and a special summary mode (for some aggregated widgets).
What actually changes
- The iframe URL receives
&device=... - BH click queries filter by
devicewhen not in Summary. - Scroll Depth Distribution groups by device family (mobile/tablet/desktop) for views.
Note: The UI includes a hint: “Some metrics require a page reload to update”. This means some parts are updated by iframe refresh, while other counters may depend on full tab reload.
2) Click vs Heat mode
The Click / Heat switch controls how the overlay is rendered:
Click
Shows discrete dots (clusters) with the exact click count in each area. Best for precise UI debugging (which button, which link, which image).
Heat
Shows intensity (hotspots) for quick pattern recognition. Best for a “big picture” view of attention distribution.
3) Fixed clicks (Show / Hide)
“Fixed clicks” are clicks on elements that are detected as fixed-position UI (sticky header, fixed CTA bar, floating buttons). Because fixed UI overlays the entire page, these clicks can dominate the view.
How the toggle works
- The button starts in “Hide fixed clicks” state (fixed clicks are visible).
- Clicking it toggles between Hide fixed clicks and Show fixed clicks.
- The preference is broadcast to the iframe via
postMessageand a custom event.
When to hide fixed clicks: If your sticky header or floating CTA hides the interesting page content clicks.
4) Dot Colors (Non-nav / Navigation / Conversions)
You can customize colors used for different click categories. This is useful when you want clear visual separation between navigation hotspots and conversion hotspots.
Tip: After saving colors, refresh the heatmap tab to ensure the iframe overlay picks up the new palette everywhere.