# How to create heatmaps for user activity in Bubble.io: Step-by-Step Guide

- Tool: Bubble
- Difficulty: Beginner
- Time required: 10-15 min
- Compatibility: All Bubble plans
- Last updated: March 2026

## TL;DR

Integrate heatmap tools like Hotjar or Microsoft Clarity into your Bubble app by embedding their tracking scripts in the page header. These tools record user clicks, scrolls, and mouse movements, then generate visual heatmaps showing where users interact most on each page. Use these insights to improve your app's UX, button placement, and content hierarchy without building anything custom.

## Creating Heatmaps for User Activity in Your Bubble App

Heatmaps show you exactly where users click, how far they scroll, and where they move their cursor on your pages. This visual data reveals which elements get attention and which are ignored. This tutorial walks you through integrating popular heatmap tools (Hotjar and Microsoft Clarity) into your Bubble app — both can be set up in under 10 minutes with just a script tag, no code required.

## Before you start

- A Bubble account with an app open in the editor
- A Hotjar account (free tier available) or Microsoft Clarity account (completely free)
- Your app deployed to a live or preview URL (heatmaps need real traffic)

## Step-by-step guide

### 1. Sign up for Hotjar or Microsoft Clarity

For Hotjar: go to hotjar.com and create a free account. Add a new site with your Bubble app's URL. Hotjar will give you a tracking script. For Microsoft Clarity: go to clarity.microsoft.com, sign in with a Microsoft account, create a new project, and enter your Bubble app URL. Both services provide a JavaScript tracking snippet that you will embed in your Bubble app.

> Pro tip: Microsoft Clarity is completely free with unlimited heatmaps and recordings. Hotjar's free tier includes 35 daily sessions. For most Bubble apps, Clarity is the better starting point.

**Expected result:** You have a tracking script snippet from either Hotjar or Clarity ready to embed.

### 2. Embed the tracking script in your Bubble app header

In Bubble, go to Settings → SEO / metatags → Script/meta tags in the header. Paste the entire tracking script from Hotjar or Clarity into this field. This ensures the script loads on every page of your app. Click 'Save.' The script runs automatically in the background, tracking user interactions without affecting app performance. No visual elements or plugins are needed.

**Expected result:** The heatmap tracking script is embedded in your app's header and loads on all pages.

### 3. Deploy your app and generate real user traffic

Heatmaps need real user interactions to generate data. Click the Preview button to test the integration, or deploy to Live using the Publish button. Navigate through your app to generate initial data. Both Hotjar and Clarity typically start showing data within a few hours of receiving traffic. For meaningful heatmaps, you need at least 50-100 pageviews per page.

**Expected result:** Your app is live and collecting user interaction data through the embedded tracking script.

### 4. View click heatmaps to see where users interact

In your Hotjar or Clarity dashboard, navigate to the Heatmaps section. Select a page from your app. The click heatmap shows colored spots where users click — red/orange for high activity, blue for low activity. Look for patterns: are users clicking your call-to-action buttons? Are they clicking non-clickable elements (indicating confusion)? Are important elements getting ignored? Use these insights to reposition elements in your Bubble Design tab.

**Expected result:** You can see a visual overlay showing exactly where users click on each page of your app.

### 5. Analyze scroll heatmaps to understand content engagement

Switch to the scroll heatmap view. This shows what percentage of users scroll to each section of the page. A gradient from red (top, everyone sees) to blue (bottom, few reach) reveals the effective fold line. If important content or CTAs are below the point where most users stop scrolling, move them higher in your Bubble page layout. Aim to place your most important elements in the top 50% of the page.

**Expected result:** You understand how far users scroll on each page and can optimize content placement accordingly.

### 6. Watch session recordings to see individual user journeys

Both Hotjar and Clarity offer session recordings — video playback of real user sessions showing their cursor movements, clicks, scrolls, and page navigation. In the Recordings section, watch 10-20 recordings to identify common patterns. Look for rage clicks (rapid repeated clicks indicating frustration), u-turns (users navigating back immediately), and dead clicks (clicks on non-interactive elements). These recordings reveal usability problems that heatmaps alone might miss.

**Expected result:** You can watch real users interact with your app and identify specific UX problems to fix.

## Complete code example

File: `Workflow summary`

```text
HEATMAP INTEGRATION SETUP
==========================

Option A — Microsoft Clarity (free, unlimited):
  1. Sign up at clarity.microsoft.com
  2. Create project with your Bubble app URL
  3. Copy tracking script
  4. Paste in Bubble: Settings → SEO → Script in header
  
  Features:
    - Click heatmaps
    - Scroll heatmaps
    - Session recordings (unlimited)
    - Rage click detection
    - Dead click detection
    - JavaScript error tracking

Option B — Hotjar (free tier: 35 sessions/day):
  1. Sign up at hotjar.com
  2. Add site with Bubble app URL
  3. Copy tracking script
  4. Paste in Bubble: Settings → SEO → Script in header
  
  Features:
    - Click, move, and scroll heatmaps
    - Session recordings
    - Feedback widgets
    - User surveys
    - Funnel analysis (paid)

Placement in Bubble:
  Settings → SEO / metatags → Script/meta tags in the header
  (Loads on ALL pages automatically)

Data Collection:
  - Starts automatically after script embed
  - First data visible: 2-4 hours
  - Meaningful heatmaps: 50-100+ views per page
  - No impact on app performance

Key Metrics to Monitor:
  - Click hotspots on CTAs (are they being clicked?)
  - Scroll depth (do users see below-the-fold content?)
  - Rage clicks (frustration indicators)
  - Dead clicks (clicking non-interactive elements)
  - Form abandonment points
```

## Common mistakes

- **Analyzing heatmaps with too little data** — With fewer than 50 pageviews, heatmaps show individual user patterns rather than aggregate trends. Decisions based on insufficient data can be misleading. Fix: Wait until each page has at least 50-100 views before making design changes. Focus on your highest-traffic pages first.
- **Embedding the script in a single page instead of the header** — Placing the script in an HTML element on one page only tracks that specific page. You miss all other pages. Fix: Always paste the tracking script in Settings → SEO / metatags → Script in header so it loads globally across all pages.
- **Not considering dynamic content in heatmap analysis** — Bubble pages often show different content based on user roles, states, or data. A heatmap aggregates all users, so clicks on elements that only some users see can be misleading. Fix: Use Hotjar or Clarity's filtering to segment heatmaps by URL parameters or user properties. Analyze specific user segments separately.

## Best practices

- Use Microsoft Clarity for free unlimited tracking or Hotjar for additional survey features
- Embed the tracking script in the page header (not individual HTML elements) for global coverage
- Wait for at least 50-100 pageviews before analyzing heatmaps for reliable patterns
- Watch at least 10-20 session recordings to understand qualitative user behavior
- Focus on high-traffic pages first — they provide the most actionable data
- Look for rage clicks and dead clicks as indicators of UX problems to fix
- Re-check heatmaps after making design changes to verify improvements

## Frequently asked questions

### Do heatmaps slow down my Bubble app?

No. Both Hotjar and Clarity load asynchronously and have minimal impact on page load time. They are designed to run in the background without affecting user experience.

### Is Microsoft Clarity really completely free?

Yes. Clarity offers unlimited heatmaps, session recordings, and data retention at no cost. It is funded by Microsoft as part of their web tools ecosystem.

### Can I see heatmaps for popup elements in Bubble?

Yes, with caveats. Hotjar and Clarity capture clicks on popups, but since popups overlay the page, clicks may be aggregated with the underlying page. Filter recordings to sessions where the popup was shown for the clearest data.

### Do heatmaps work with single-page apps using group toggling?

Partially. Since the URL does not change when toggling groups, all interactions may appear on one heatmap. Use URL parameters to differentiate states, which helps both heatmap tools and Bubble routing.

### How long should I collect data before making changes?

At least 1-2 weeks for pages with moderate traffic. The goal is 100+ sessions per page for reliable click heatmaps and 50+ for scroll heatmaps.

---

Source: https://www.rapidevelopers.com/bubble-tutorial/create-heatmaps-for-user-activity-in-bubble
© RapidDev — https://www.rapidevelopers.com/bubble-tutorial/create-heatmaps-for-user-activity-in-bubble