Bolt.new AI and Crazy Egg integration: Step-by-Step Guide 2025

Book a call with an Expert

Starting a new venture? Need to upgrade your web app? RapidDev builds application with your growth in mind.

How to integrate Bolt.new AI with Crazy Egg?

The direct answer: You don’t “integrate Bolt.new AI with Crazy Egg” in a literal tool‑to‑tool way. Crazy Egg is a client-side analytics script that you embed into a website. Bolt.new is just the development workspace where you write, scaffold, and test that website. The only real integration point is: inside Bolt.new, you add the Crazy Egg tracking snippet to whatever frontend you are building. Bolt.new itself never talks directly to Crazy Egg’s API, because Crazy Egg does not offer the kind of server API that would make that meaningful. You simply embed their JavaScript snippet in your HTML or React/Vue/Next frontend and deploy. That’s the whole integration pattern.

How integration actually works

Bolt.new is not an analytics platform — it does not send events to third‑party systems. It’s just your coding environment. Crazy Egg is a client-side analytics tool that collects click maps, heatmaps, scroll tracking, and session recordings through a small JavaScript file you load on your pages.

So the real integration steps are: you add Crazy Egg’s script snippet to your frontend inside Bolt.new, you rebuild, and once deployed or previewed in Bolt.new’s sandbox, Crazy Egg begins collecting data.

That’s it. There is no API handshake, no OAuth, no server tokens, and no backend wiring because Crazy Egg’s entire model is “place this JS snippet on your site.”

Where to get the snippet

Log in to Crazy Egg.
Go to the “Install Crazy Egg” or “Tracking Snippet” section in the dashboard.
Copy the full JavaScript snippet they provide (it contains your site ID).

You never generate tokens or environment variables for Crazy Egg because it does not use them.

Where to put the snippet inside a Bolt.new project

If it’s a plain HTML site:

<!DOCTYPE html>
<html>
  <head>
    <title>My Bolt App</title>

    <!-- Crazy Egg Tracking Script -->
    <script type="text/javascript">
      // Paste the EXACT snippet Crazy Egg gives you
      (function() {
        var ce = document.createElement("script");
        ce.type = "text/javascript";
        ce.async = true;
        ce.src = "https://script.crazyegg.com/pages/scripts/XXXX/XXXX.js"; // Example only!
        document.head.appendChild(ce);
      })();
    </script>
  </head>

  <body>
    <h1>Hello World</h1>
  </body>
</html>

If you’re using React (Create React App or similar) inside Bolt.new, add Crazy Egg in public/index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />

    <!-- Crazy Egg snippet -->
    <script type="text/javascript">
      (function() {
        var ce = document.createElement("script");
        ce.type = "text/javascript";
        ce.async = true;
        ce.src = "https://script.crazyegg.com/pages/scripts/XXXX/XXXX.js";
        document.head.appendChild(ce);
      })();
    </script>

  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

Using Crazy Egg with Next.js inside Bolt.new

You add it to \_document.js so it loads on every page. Next.js allows inserting raw script blocks through dangerouslySetInnerHTML:

// pages/_document.js

import { Html, Head, Main, NextScript } from "next/document";

export default function Document() {
  return (
    <Html>
      <Head>
        <script
          dangerouslySetInnerHTML={{
            __html: `
              (function() {
                var ce = document.createElement("script");
                ce.type = "text/javascript";
                ce.async = true;
                ce.src = "https://script.crazyegg.com/pages/scripts/XXXX/XXXX.js";
                document.head.appendChild(ce);
              })();
            `
          }}
        />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}

What you cannot do

You cannot call Crazy Egg APIs from Bolt.new’s backend because Crazy Egg does not expose public data APIs for heatmaps, click data, or session recordings.
You cannot “send events” manually — Crazy Egg collects automatically via the script.
You cannot authenticate to Crazy Egg programmatically — there is no OAuth or API key for analytics ingestion.

How to verify it works inside Bolt.new

Open the preview URL (Bolt.new provides a preview server).
Open the browser devtools → Network → filter for “crazyegg”.
If the script loads, Crazy Egg is collecting.
Go back to Crazy Egg’s dashboard and wait a few minutes — data appears only after live user interactions.

Summary

The only real integration between Bolt.new and Crazy Egg is embedding Crazy Egg’s client-side tracking snippet into your frontend code. Bolt.new plays no special role — it’s simply where you edit the code. Crazy Egg runs entirely on the client side and does not require API access, tokens, or backend integration. Once the snippet is placed and the site loads in Bolt.new’s preview or production deployment, Crazy Egg starts collecting behavioral analytics automatically.

Rapid Dev was an exceptional project management organization and the best development collaborators I've had the pleasure of working with. They do complex work on extremely fast timelines and effectively manage the testing and pre-launch process to deliver the best possible product. I'm extremely impressed with their execution ability.

CPO, Praction - Arkady Sokolov

May 2, 2023

Working with Matt was comparable to having another co-founder on the team, but without the commitment or cost. He has a strategic mindset and willing to change the scope of the project in real time based on the needs of the client. A true strategic thought partner!

Co-Founder, Arc - Donald Muir

Dec 27, 2022

Rapid Dev are 10/10, excellent communicators - the best I've ever encountered in the tech dev space. They always go the extra mile, they genuinely care, they respond quickly, they're flexible, adaptable and their enthusiasm is amazing.

Co-CEO, Grantify - Mat Westergreen-Thorne

Oct 15, 2022

Rapid Dev is an excellent developer for no-code and low-code solutions.
We’ve had great success since launching the platform in November 2023. In a few months, we’ve gained over 1,000 new active users. We’ve also secured several dozen bookings on the platform and seen about 70% new user month-over-month growth since the launch.

Co-Founder, Church Real Estate Marketplace - Emmanuel Brown

May 1, 2024

Matt’s dedication to executing our vision and his commitment to the project deadline were impressive.
This was such a specific project, and Matt really delivered. We worked with a really fast turnaround, and he always delivered. The site was a perfect prop for us!

Production Manager, Media Production Company - Samantha Fekete

Sep 23, 2022