Documentation

Getting started with HeatBloom

Install HeatBloom in under 5 minutes and start seeing how visitors interact with your website.

Quick start

1

Create your account

Sign up for StackBloom and purchase a HeatBloom plan. Go to your heatmap dashboard to add your first site.

2

Add your website

Click "Add Site" in your dashboard. Enter your website domain. HeatBloom generates a unique tracking ID and embed code for your site.

3

Install the tracking script

Copy the script tag and paste it into the <head> section of your website. The script captures clicks, scrolls, and movements without impacting page performance.

4

Start collecting data

Visit your website to trigger the first session. Within minutes, click data will appear on your heatmap dashboard. Session recordings start accumulating automatically.

Tracking script

Add this script to the <head> section of your website.

<script
  defer
  data-site="YOUR_SITE_ID"
  src="https://cdn.stackbloom.io/hb.js"
></script>
Under 5KB gzipped • Async loading • No page speed impact • GDPR compliant

Platform installation guides

WordPress

Go to Appearance → Theme File Editor → header.php. Paste the script before </head>. Or use a plugin like "Insert Headers and Footers" for a no-code option.

Shopify

Go to Online Store → Themes → Edit Code → theme.liquid. Add the script inside the <head> section.

Webflow

Go to Project Settings → Custom Code → Head Code. Paste the script and publish your site.

Next.js / React

Add the script to your root layout or use next/script with strategy="afterInteractive" for optimal loading.

Static HTML

Paste the script directly into the <head> section of your HTML pages.

Google Tag Manager

Create a Custom HTML tag with the script. Set the trigger to "All Pages" and publish your container.

Features guide

Click heatmaps

Click heatmaps aggregate all visitor clicks into a color-coded overlay on your pages. Hot areas (red) show high click density. Cool areas (blue) show low activity. Filter by device type, date range, or specific pages.

Tips

  • Check heatmaps after design changes to measure impact
  • Compare desktop vs mobile click patterns
  • Look for clicks on non-interactive elements (dead clicks)
  • Export heatmaps as PNG for stakeholder presentations

Scroll depth maps

Scroll maps show how far down the page visitors scroll. A gradient overlay indicates the percentage of visitors that reach each section. Use this to optimize content placement and ensure important content is above the fold.

Tips

  • Place CTAs where most visitors still have attention
  • Move high-value content higher if scroll depth is low
  • Compare scroll depth across different pages
  • Check if long-form content is being read to the end

Session recordings

Watch recordings of real visitor sessions including mouse movements, clicks, scrolls, and page transitions. Idle time is automatically skipped. Available on Pro and Business plans.

Tips

  • Filter recordings by page, device, or country
  • Look for recordings flagged with rage clicks
  • Tag interesting recordings for team review
  • Watch recordings of users who dropped off during checkout

Rage click detection

HeatBloom automatically detects rage clicks — rapid repeated clicks on the same element. These indicate broken links, non-responsive buttons, or confusing UI. Rage-click sessions are flagged in your dashboard.

Tips

  • Check rage click reports weekly to catch UX issues
  • Jump directly to rage-click moments in session recordings
  • Common causes: broken links, slow-loading elements, misleading design
  • Fix rage click issues to reduce bounce rate

Device & browser filtering

Filter all heatmap data by device type (desktop, tablet, mobile), browser, operating system, or country. This helps you understand how different audience segments interact with your site.

Tips

  • Always compare mobile vs desktop heatmaps separately
  • Check if buttons are too small on mobile devices
  • Filter by country if you serve international audiences
  • Use browser filtering to identify browser-specific bugs

Privacy & data handling

HeatBloom does not collect personally identifiable information. Form inputs, passwords, and sensitive fields are automatically masked in session recordings. IP addresses are anonymized.

Tips

  • Sensitive form fields are masked by default
  • Add data-hb-mask attribute to custom-mask any element
  • IP addresses are never stored in full
  • You can exclude specific pages from tracking with excludePaths

Configuration options

Customize HeatBloom behavior with data attributes on the script tag.

<!-- Exclude specific pages -->
<script
  defer
  data-site="YOUR_SITE_ID"
  data-exclude="/admin/*,/checkout/*"
  src="https://cdn.stackbloom.io/hb.js"
></script>

<!-- Mask sensitive elements -->
<div data-hb-mask>
  This content will be hidden in recordings
</div>

<!-- Set sample rate (record 50% of sessions) -->
<script
  defer
  data-site="YOUR_SITE_ID"
  data-sample="50"
  src="https://cdn.stackbloom.io/hb.js"
></script>

Need Help?

Can't find what you're looking for? Reach out to our support team.