Add FounderHQ to Bolt

Paste one prompt into Bolt and get working analytics on every page. About 3 minutes.

Before you start

You need a FounderHQ account and a publishable key. In the app, open Analytics → Settings → Events SDK, create a key for Browser or mobile, and copy it. The full key is shown only once.

Paste this prompt into Bolt

Replace fhq_pk_XXXX with your own key first. The key is publishable, so it is safe in the browser and safe in your repository.

Prompt for Bolt:

Add FounderHQ analytics to this project.

1. Detect the project shape first, then pick one placement:
   - If there is an index.html, add the two script tags to its <head>.
   - If the project is Next.js or renders a root layout component, install
     @founderhq/events instead, and call founderhq.init("fhq_pk_XXXX")
     from one client component rendered in the root layout.
   Pick one placement only. Never install it twice.

2. For the index.html placement, the tags are exactly:
   <script src="https://i.getfounderhq.com/events.js"></script>
   <script>
     founderhq.init("fhq_pk_XXXX");
   </script>

3. Use the key fhq_pk_XXXX exactly as written. It is a publishable key.
   Do not move it to a server secret.

4. Only if this app already has sign-in: after a successful sign-in, call
   founderhq.identify with the user's stable database id, and their email
   as a property. Call founderhq.reset() on sign-out. If the app has no
   sign-in, skip this step. Do not add authentication.

5. Consent. FounderHQ records everything from the first page view, so most
   apps need nothing here. Only if this app already has a cookie consent
   banner: pass { consent_default: "pending" } as the second argument to
   founderhq.init, and call founderhq.consent("granted") when the visitor
   accepts the banner. Do not add a consent banner.

6. Do not add any other analytics tool. Do not change analytics tools that
   are already installed.

End state: every page loads the SDK once, founderhq.init runs once with my
key, and pageviews are captured without any further code. Tell me which
placement you chose and which file you edited.

What the prompt does

It makes the agent look at the project before it writes code. Bolt starts Vite projects and Next.js projects, and each needs a different placement.
It gives the agent the exact snippet, so the agent invents nothing.
It asks the agent to report the file it edited, so you can check the work in one click.
It adds identify only when your app already knows who the person is.

After init runs, FounderHQ captures page views, page leaves, sessions, clicks, rage clicks, dead clicks, outbound clicks, scroll depth, and Core Web Vitals for you. On a site with a cookie banner that starts pending, it counts page views only until the visitor accepts. See Consent and privacy.

Do it by hand instead

Open index.html.
Paste the two script tags into the <head>.

<script src="https://i.getfounderhq.com/events.js"></script>
<script>
  founderhq.init("fhq_pk_XXXX");
</script>

Deploy the project.

Next.js App Router? Use Add FounderHQ to Next.js instead.

Let your agent read these docs

Connect the docs MCP server, then name it in your prompt. Your agent then reads these pages while it writes the code.

Verify

Open the deployed site and load a page.
In FounderHQ, open Analytics → Events & Visits.
You see a $pageview for that page, with its channel.
Signed in during the test, with consent granted? Open Analytics → People and find the person.

Events can take a few seconds to appear. The SDK batches them.

Paste this prompt into Bolt

What the prompt does

Do it by hand instead

Let your agent read these docs

Verify

Troubleshoot

Events work in the Bolt preview but not on the deployed site

Pageviews arrive twice

On this page