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.
Prerequisites
- 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
Sign up for Hotjar or Microsoft Clarity
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.
Embed the tracking script in your Bubble app header
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.
Deploy your app and generate real user traffic
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.
View click heatmaps to see where users interact
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.
Analyze scroll heatmaps to understand content engagement
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.
Watch session recordings to see individual user journeys
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 working example
1HEATMAP INTEGRATION SETUP2==========================34Option A — Microsoft Clarity (free, unlimited):5 1. Sign up at clarity.microsoft.com6 2. Create project with your Bubble app URL7 3. Copy tracking script8 4. Paste in Bubble: Settings → SEO → Script in header9 10 Features:11 - Click heatmaps12 - Scroll heatmaps13 - Session recordings (unlimited)14 - Rage click detection15 - Dead click detection16 - JavaScript error tracking1718Option B — Hotjar (free tier: 35 sessions/day):19 1. Sign up at hotjar.com20 2. Add site with Bubble app URL21 3. Copy tracking script22 4. Paste in Bubble: Settings → SEO → Script in header23 24 Features:25 - Click, move, and scroll heatmaps26 - Session recordings27 - Feedback widgets28 - User surveys29 - Funnel analysis (paid)3031Placement in Bubble:32 Settings → SEO / metatags → Script/meta tags in the header33 (Loads on ALL pages automatically)3435Data Collection:36 - Starts automatically after script embed37 - First data visible: 2-4 hours38 - Meaningful heatmaps: 50-100+ views per page39 - No impact on app performance4041Key Metrics to Monitor:42 - Click hotspots on CTAs (are they being clicked?)43 - Scroll depth (do users see below-the-fold content?)44 - Rage clicks (frustration indicators)45 - Dead clicks (clicking non-interactive elements)46 - Form abandonment pointsCommon mistakes when creating heatmaps for user activity in Bubble.io: Step-by-Step Guide
Why it's a problem: Analyzing heatmaps with too little data
How to avoid: Wait until each page has at least 50-100 views before making design changes. Focus on your highest-traffic pages first.
Why it's a problem: Embedding the script in a single page instead of the header
How to avoid: Always paste the tracking script in Settings → SEO / metatags → Script in header so it loads globally across all pages.
Why it's a problem: Not considering dynamic content in heatmap analysis
How to avoid: 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
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
How do I add heatmap tracking to my Bubble.io app? I want to see where users click, how far they scroll, and watch session recordings. Walk me through embedding Hotjar or Microsoft Clarity and interpreting the data.
Add user behavior tracking to my app. Embed a heatmap tracking script (Microsoft Clarity or Hotjar) in the page header so it runs on all pages. I want to see click heatmaps, scroll depth, and session recordings.
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.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation