Integrating Crazy Egg with Bolt.new means adding their JavaScript tracking snippet to your deployed app — Crazy Egg collects heatmap and scroll data automatically once the script runs on real pages with real visitors. There is no Crazy Egg REST API for accessing heatmap data programmatically. Prompt Bolt to add the Crazy Egg script tag to your app layout, deploy to Netlify or Bolt Cloud, and view heatmaps in the Crazy Egg dashboard. Data collection requires a real deployed URL and real user traffic.
Add Crazy Egg Heatmaps to Your Bolt.new App in Minutes
Crazy Egg is one of the original heatmap tools for understanding user behavior on websites. Unlike analytics platforms with complex dashboards and event tracking setups, Crazy Egg's integration is intentionally minimal — add one JavaScript snippet to your page and it starts recording where users click, how far they scroll, and where they move their mouse. The resulting heatmaps make UX problems immediately visible: a call-to-action button that nobody clicks, a scroll depth that suggests most users never see your pricing section, or rage-clicks on an element that looks clickable but is not.
For Bolt.new developers, the integration is the simplest possible: Bolt adds the Crazy Egg script tag to your app's layout file, you deploy to Netlify or Bolt Cloud, and Crazy Egg starts collecting data from real visitors. There is no API key to manage, no server-side code to write, and no database to configure. The entire integration is a single HTML tag.
One critical limitation to understand: Crazy Egg does NOT have a REST API for accessing heatmap data programmatically. You cannot query heatmap data, session recordings, or click events from your Bolt app's code. All analysis happens in the Crazy Egg dashboard. This makes Crazy Egg fundamentally different from Mixpanel or Amplitude, which have APIs you can use to build custom reports. If you need programmatic access to user behavior data, use FullStory (which has a REST API) or Mixpanel instead. Crazy Egg is the right tool when you want visual insights without engineering overhead.
Integration method
Crazy Egg integration is purely script-based — there is no REST API for accessing heatmap data programmatically. Adding Crazy Egg to a Bolt.new app means embedding the JavaScript tracking snippet in your app's HTML head section. Bolt can add this script tag to your Next.js layout or Vite index.html in seconds from a simple prompt. Data collection begins automatically once the app is deployed to a public URL and real users visit the pages. The Crazy Egg dashboard provides all visualization and analysis tools.
Prerequisites
- A Crazy Egg account at crazyegg.com (free 30-day trial available)
- Your Crazy Egg account ID (visible in your dashboard URL or in the tracking script code)
- A Bolt.new project ready to deploy
- A deployed URL on Netlify or Bolt Cloud — Crazy Egg collects data only on real public URLs, not in Bolt's WebContainer preview
Step-by-step guide
Get Your Crazy Egg Tracking Script
Get Your Crazy Egg Tracking Script
Start by logging into your Crazy Egg account at app.crazyegg.com. After signing up or logging in, navigate to your dashboard. Crazy Egg needs to know your website URL to set up tracking. Add your website by entering the deployed URL of your Bolt.new app — use your Netlify URL, Bolt Cloud URL, or custom domain if you have one. Once your site is added, Crazy Egg provides a JavaScript tracking snippet. The script tag looks like: `<script type='text/javascript' src='https://script.crazyegg.com/pages/scripts/[YOUR_ACCOUNT_ID].js' async='async'></script>`. Your account ID is the number embedded in the script URL path. Copy this full script tag — you will paste it into your Bolt.new app in the next step. Note your account ID number separately (just the digits from the URL path) — you will need it if you want to use Crazy Egg's JavaScript API for advanced tracking like tagging logged-in user segments. The account ID is not sensitive — it appears in your page's HTML source and can be seen by anyone viewing your site's source code. This is by design: Crazy Egg tracking is client-side and does not require server-side secrets. Crazy Egg's 30-day free trial gives you full access to heatmaps, scroll maps, click reports, and A/B testing for up to 30,000 visits per month. After the trial, plans start at $29/month. You need to deploy your Bolt app and send real traffic before any data appears in the dashboard — there is no way to simulate heatmap data in Bolt's preview.
1<!-- Your Crazy Egg tracking snippet from dashboard -->2<!-- Replace XXXXXXXX with your actual account ID -->3<script4 type='text/javascript'5 src='https://script.crazyegg.com/pages/scripts/XXXXXXXX.js'6 async='async'7></script>Pro tip: Crazy Egg's tracking script is loaded asynchronously (async attribute) so it does not block page rendering. The script typically adds less than 50ms to page load time and only runs after the page is fully interactive.
Expected result: You have your Crazy Egg account ID and the full script tag. You understand which files in your Bolt project need to be edited to add the script to all pages.
Add the Crazy Egg Script to Your Bolt App
Add the Crazy Egg Script to Your Bolt App
For Next.js projects (the most common Bolt.new project type), add the Crazy Egg script to `app/layout.tsx` using Next.js's built-in `<Script>` component. This component provides optimized script loading strategies. For Crazy Egg, use `strategy='afterInteractive'` which loads the script after the page becomes interactive — this ensures Crazy Egg starts tracking after the page is fully rendered without blocking the initial load. The key difference from a plain `<script>` tag is that Next.js's Script component automatically handles deduplication (ensuring the script only loads once even in SPA navigation), provides the loading strategy optimization, and works correctly with React's server-side rendering without hydration errors. For Vite projects, add the script directly to the `index.html` file in the project root. Place it inside the `<head>` tag, just before the closing `</head>`. Vite does not have a Script component equivalent — the standard HTML approach works correctly. The `async` attribute on the script tag handles non-blocking loading for Vite projects. After adding the script, Bolt will show it in the preview, but no tracking data will be collected there. Crazy Egg's tracking script only activates on publicly accessible URLs where it can send data to Crazy Egg's servers. In Bolt's WebContainer preview, the script loads and runs, but Crazy Egg cannot associate the preview's dynamic URL with your registered website, so data collection does not occur until deployment.
Add the Crazy Egg tracking script to my Next.js app. In app/layout.tsx, import Script from 'next/script' and add <Script src='https://script.crazyegg.com/pages/scripts/XXXXXXXX.js' strategy='afterInteractive' /> inside the <head> section (or just before </body>). Replace XXXXXXXX with the actual account ID I'll provide. Make sure this loads on every page of the app.
Paste this in Bolt.new chat
1// app/layout.tsx — Next.js layout with Crazy Egg script2import type { Metadata } from 'next';3import Script from 'next/script';4import './globals.css';56export const metadata: Metadata = {7 title: 'My App',8 description: 'App description',9};1011export default function RootLayout({12 children,13}: {14 children: React.ReactNode;15}) {16 return (17 <html lang="en">18 <head />19 <body>20 {children}21 {/* Crazy Egg tracking — replace XXXXXXXX with your account ID */}22 <Script23 src="https://script.crazyegg.com/pages/scripts/XXXXXXXX.js"24 strategy="afterInteractive"25 />26 </body>27 </html>28 );29}Pro tip: For Vite apps, add the script tag to index.html, not to a React component. Adding tracking scripts in React components can cause them to load multiple times during client-side navigation. The index.html head section ensures the script loads exactly once.
Expected result: The Crazy Egg script is included in your app layout. After deployment, Crazy Egg will start tracking visitor interactions on all pages automatically.
Deploy Your App and Verify Tracking
Deploy Your App and Verify Tracking
Deploy your Bolt app to Netlify or Bolt Cloud by clicking the Publish button in Bolt's navigation. The deployment takes 30-60 seconds. After the deployment completes, you receive a public URL (something like `your-app.netlify.app` or `your-app.bolt.host`). Verify the Crazy Egg script is loading correctly on your deployed app: open your deployed URL in a browser, open DevTools (F12), go to the Network tab, and filter for 'crazyegg'. You should see the script file loading successfully with a 200 status. If it shows as blocked or failed, check that the script URL in your layout file matches exactly what the Crazy Egg dashboard provided. In Crazy Egg's dashboard, add your deployed URL as a 'Snapshot' — this tells Crazy Egg to start collecting data for that specific page or URL pattern. Navigate to New Snapshot, enter your URL, and configure the tracking options. Crazy Egg supports URL patterns with wildcards (`https://your-app.netlify.app/*` to track all pages) or specific URLs for individual page analysis. Once deployed and verified, send test traffic to your app by visiting the deployed URL yourself several times and clicking around different sections. Crazy Egg typically needs at least 25-100 visits before it generates a meaningful heatmap — with enough test clicks, you may see the first data within minutes in the dashboard. Note that Crazy Egg processes data and updates heatmaps in near-real-time for newer plans, but budget plans may have a delay.
My Crazy Egg script is added and the app is deployed. Help me add a Crazy Egg note feature: create a floating feedback button (fixed to the bottom-right corner of all pages) that says 'Share Feedback'. When clicked, show a small form asking 'What would make this page better?' with a text area and submit button. Save responses to a Supabase table called page_feedback (id, page_url, feedback_text, submitted_at). This gives me qualitative feedback alongside Crazy Egg's quantitative heatmap data.
Paste this in Bolt.new chat
Pro tip: Visit your deployed URL from different devices (mobile and desktop) and different browsers to generate diverse heatmap data. Crazy Egg segments heatmaps by device type, so you need mobile and desktop traffic to see separate mobile and desktop heatmaps.
Expected result: The deployed app shows the Crazy Egg script loading in DevTools. The Crazy Egg dashboard shows your URL as an active snapshot. After sending some test visits, the first data points appear in the heatmap.
Configure Snapshots and Analyze Results
Configure Snapshots and Analyze Results
Crazy Egg organizes heatmap data into 'Snapshots' — each Snapshot tracks a specific URL or page pattern. After setting up your initial snapshot in Step 3, configure additional snapshots for your most important pages: the homepage, pricing page, sign-up page, and any key landing pages. For each Snapshot, Crazy Egg offers four main views: Heatmap (click intensity across the page), Scroll Map (percentage of visitors who scroll to each section), Click Report (a list of every element clicked with click counts), and A/B Testing (serve two versions and compare metrics). Navigate between these views using the tabs in the Snapshot dashboard. The Scroll Map is particularly revealing for content-heavy pages built in Bolt.new. A common finding: the first meaningful content section (below the hero) is seen by only 40-60% of visitors because they bounce before scrolling. This data directly informs where to place your most important CTAs and value propositions. For A/B testing, Crazy Egg allows you to create variants by modifying elements through their visual editor without touching your code. This is ideal for testing headline text, button colors, and CTA placement. Create a test in the Crazy Egg dashboard, set the traffic split, and let it run until statistical significance is reached. Crazy Egg automatically declares a winner when the sample size is sufficient. Remember that Crazy Egg does not have an API for accessing this data programmatically from your Bolt app. All analysis and decisions based on heatmap data happen in the Crazy Egg dashboard. If you need to trigger actions in your Bolt app based on heatmap insights (like personalization based on scroll depth), you need a different tool — FullStory or Segment with Mixpanel provide event streaming APIs for this use case.
Add a progress tracking component to my landing page that triggers when users scroll past key sections. Create a useScrollDepth hook that tracks whether users have seen the hero, features, pricing, and CTA sections (using Intersection Observer). Log these milestones to a Supabase events table (user_id nullable, event_name, page_url, timestamp) so I have my own first-party scroll data alongside Crazy Egg's heatmaps. Show a small 'Reading progress' bar at the top of the page.
Paste this in Bolt.new chat
1// hooks/useScrollDepth.ts2import { useEffect } from 'react';3import { createClient } from '@supabase/supabase-js';45const supabase = createClient(6 process.env.NEXT_PUBLIC_SUPABASE_URL!,7 process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!8);910export function useScrollDepth(sections: Array<{ id: string; label: string }>) {11 useEffect(() => {12 const observed = new Set<string>();1314 const observer = new IntersectionObserver(15 (entries) => {16 entries.forEach(async (entry) => {17 if (entry.isIntersecting && !observed.has(entry.target.id)) {18 observed.add(entry.target.id);19 const section = sections.find(s => s.id === entry.target.id);20 if (section) {21 // Log scroll milestone to Supabase22 await supabase.from('scroll_events').insert({23 event_name: `scroll_${section.label}`,24 page_url: window.location.pathname,25 }).then(() => {}); // fire and forget26 }27 }28 });29 },30 { threshold: 0.5 }31 );3233 sections.forEach(({ id }) => {34 const el = document.getElementById(id);35 if (el) observer.observe(el);36 });3738 return () => observer.disconnect();39 }, [sections]);40}Pro tip: Use Crazy Egg's 'Confetti Report' (a variant of the click map) to segment clicks by traffic source — visitors from Google Ads, organic search, and email campaigns often click very different page elements. This segmentation often reveals more actionable insights than aggregate heatmaps.
Expected result: Crazy Egg snapshots are configured for key pages. Heatmap, scroll map, and click report data accumulates as real users visit the deployed app.
Common use cases
Landing Page Conversion Optimization
After deploying a landing page built in Bolt.new, use Crazy Egg heatmaps to see which sections users click most, how far they scroll, and where they lose interest. The heatmap data reveals whether your call-to-action button placement is optimal, whether users read past the hero section, and which content areas drive the most engagement.
Add the Crazy Egg tracking script to my Next.js app. My Crazy Egg account ID is [YOUR_ACCOUNT_ID]. Add the script tag in the Next.js app/layout.tsx file inside the <head> section using the Next.js Script component with strategy='afterInteractive'. The script URL format is https://script.crazyegg.com/pages/scripts/[ACCOUNT_ID].js. Make sure it loads on all pages.
Copy this prompt to try it in Bolt.new
SaaS Onboarding Flow Analysis
Track user interactions during a multi-step onboarding flow to identify where users get confused or abandon the process. Crazy Egg's click maps show which buttons users try to click in the wrong order, scroll maps reveal if users miss important instructions, and A/B testing lets you test two versions of a confusing step to see which converts better.
Add Crazy Egg tracking to my Bolt.new app with the script tag in the layout. Also add page-specific Crazy Egg annotations by including the CE2.set('customerId', userId) call in a useEffect on authenticated pages. This lets me segment heatmap data in Crazy Egg by logged-in users versus anonymous visitors. Use the Crazy Egg JavaScript API to track my account ID [YOUR_ACCOUNT_ID].
Copy this prompt to try it in Bolt.new
A/B Test Landing Page Variants
Use Crazy Egg's built-in A/B testing tool to test two versions of a landing page headline or CTA button. After adding the tracking script to the Bolt app and deploying, create the A/B test entirely in Crazy Egg's dashboard — no code changes needed. Crazy Egg shows which variant gets more clicks and higher scroll depth.
Add the Crazy Egg tracking script to my Bolt.new Vite app. In the index.html file, add the async script tag for my Crazy Egg account [ACCOUNT_ID] just before the closing </head> tag. Also add a data-crazy-egg-variant attribute to the main hero section element so Crazy Egg can track interactions on that specific component independently from the rest of the page.
Copy this prompt to try it in Bolt.new
Troubleshooting
Crazy Egg heatmap shows no data after several days of deployment
Cause: The tracking script is not loading on the deployed URL, the URL registered in Crazy Egg does not match the actual page URL, or the site has not received enough traffic (Crazy Egg requires approximately 25+ visits per URL to generate visible heatmap data).
Solution: Visit your deployed URL in a browser, open DevTools → Network tab, and filter for 'crazyegg'. Confirm the script loads with a 200 status. In the Crazy Egg dashboard, verify the registered URL matches your deployed URL exactly — check that the protocol (https vs http), subdomain, and trailing slash all match. If using URL patterns, confirm the wildcard format matches your URLs.
Crazy Egg script is loading but tracking data shows incorrectly in Crazy Egg dashboard
Cause: For Single Page Applications (SPAs) like React/Next.js apps, Crazy Egg may not automatically detect page navigation for client-side routing, showing all clicks attributed to the first URL.
Solution: Use Crazy Egg's JavaScript API to manually notify Crazy Egg when the page URL changes. Add a `window.CE2.set` call when routing changes occur. In Next.js, use the `usePathname` hook to detect route changes and trigger a Crazy Egg page view update.
1// In your Next.js layout or a dedicated analytics component2'use client';3import { useEffect } from 'react';4import { usePathname } from 'next/navigation';56export function CrazyEggTracker() {7 const pathname = usePathname();89 useEffect(() => {10 // Notify Crazy Egg of SPA page navigation11 if (typeof window !== 'undefined' && (window as any).CE2) {12 (window as any).CE2.set('path', pathname);13 }14 }, [pathname]);1516 return null;17}Next.js build fails after adding the Crazy Egg Script component
Cause: The Crazy Egg script URL contains non-standard characters or the Script component is used in a Server Component without the 'use client' directive or in the wrong position in the layout.
Solution: Ensure the Script component is imported from 'next/script' (not from 'react'). For Next.js 13+ App Router, the Script component with strategy='afterInteractive' can be placed in the root layout's body tag without 'use client'. If you see hydration errors, move the Script tag to just before the closing </body> tag in the layout file.
Best practices
- Deploy your app to a stable production URL before expecting Crazy Egg data — the WebContainer preview URL changes with each session and cannot accumulate heatmap data across visits
- Set up separate Crazy Egg snapshots for your most important pages (homepage, pricing, sign-up) rather than relying solely on wildcard URL patterns
- Wait for at least 100 visits per page before drawing conclusions from heatmap data — small sample sizes create misleading patterns
- Segment heatmaps by device type (desktop vs mobile) — user click behavior differs significantly between devices, and combined heatmaps can obscure mobile UX issues
- Use Crazy Egg's scroll map to determine where to place your primary CTA — if 50% of users never scroll past the hero, your CTA must be visible above that fold
- Combine Crazy Egg's aggregate heatmaps with FullStory session recordings for complete user behavior understanding — heatmaps show patterns, session replay shows individual user confusion
- For Crazy Egg A/B tests, calculate the required sample size for statistical significance before starting — running tests with insufficient traffic leads to false conclusions
Alternatives
FullStory provides individual session replay and has a REST API for programmatic access to user behavior data — a better choice if you need to query analytics data from your Bolt app code.
Google Analytics provides broader traffic analytics, funnel analysis, and goal tracking that complement Crazy Egg's visual heatmaps — most serious apps use both.
Mixpanel provides event-based analytics with a REST API for programmatic access, making it better for building custom in-app dashboards and automated actions based on user behavior data.
Frequently asked questions
Does Crazy Egg work in Bolt's WebContainer preview?
The Crazy Egg script loads in the WebContainer preview, but data collection does not occur in a meaningful way. Crazy Egg associates tracking data with specific registered URLs, and Bolt's preview uses a dynamic internal URL that is not registered in your Crazy Egg account. Deploy to Netlify or Bolt Cloud with a stable URL before expecting heatmap data to appear.
Can I access Crazy Egg heatmap data programmatically from my Bolt app?
No. Crazy Egg does not offer a REST API for accessing heatmap, scroll, or click data. All analysis happens in the Crazy Egg dashboard. If you need programmatic access to user behavior data to build in-app reports or trigger personalization, use FullStory (which has a session API) or Mixpanel (event tracking with a query API) instead.
How long does it take for heatmap data to appear in Crazy Egg?
Crazy Egg starts collecting data immediately after the script loads on your page, but the heatmap visualization requires enough data points to be meaningful — typically 25-100 page visits. On busy pages with significant traffic, heatmaps may populate within hours. On low-traffic pages, it may take several days. Crazy Egg on newer plans provides near-real-time data; older or lower-tier plans may have a processing delay.
Does Crazy Egg slow down my Bolt.new app?
The Crazy Egg script is loaded asynchronously and does not block page rendering. Using Next.js's Script component with strategy='afterInteractive' ensures it loads after the page is interactive. In real-world testing, Crazy Egg adds less than 50ms to Time to Interactive on typical pages. The script file itself is approximately 30-40KB.
Can Crazy Egg track authenticated user behavior separately from anonymous visitors?
Yes. Crazy Egg's JavaScript API lets you tag sessions with user attributes using CE2.set(). After the user logs in, call CE2.set('email', userEmail) or CE2.set('userType', 'paid') to segment heatmap data by user attributes in the dashboard. This lets you compare how free versus paid users interact with the same page.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation