The visualization panel supports two display modes for recorded clicks:
- Dots Mode — Shows individual clicks as discrete points on the page. This view is best for analyzing the exact positions and density of interactions without aggregation.
- Heatmap Mode — Renders clicks as a continuous color field, blending nearby interactions into hotspots. The intensity of the colors corresponds to the number and weight of clicks, making it easier to identify high-activity areas at a glance.
How the Switch Works
- The current mode is determined in this order of priority:
- URL parameter (
?wpmc_std=heatmapor?wpmc_std=dots) - Saved preference in
localStorage(wpmc_render_mode) - Default:
dots
- URL parameter (
- Switching is handled dynamically without reloading the page.
- In Heatmap mode, dot overlays are hidden and the aggregated heatmap is displayed.
- In Dots mode, the heatmap overlay is cleared and dots become visible again.
- The system remembers the last chosen mode for the next session.
User Interface
A toggle switch (.wpmc-std-switch) is displayed in the panel. The active button is highlighted with a distinct color and styling. Clicking a button updates the mode instantly.
Mobile vs Desktop
Both desktop and mobile previews share the same switching mechanism. Default rendering parameters (such as radius, sigma, and scale) differ slightly between desktop and mobile to optimize for screen size.