Add FounderHQ to Bolt
Install the FounderHQ web SDK in a Bolt project with one prompt.
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 Sequences → Settings → Event API keys, create a key for Browser/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. 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
identifyonly when your app already knows who the person is.
After init runs, FounderHQ captures pageviews, page leaves, sessions,
clicks, rage clicks, dead clicks, outbound clicks, scroll depth, and Core
Web Vitals for you.
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 Sequences → Events.
- You see a
$pageviewfor that page, with its channel. - Signed in during the test? Open Sequences → Contacts and find the person.
Events can take a few seconds to appear. The SDK batches them.
Troubleshoot
Events work in the Bolt preview but not on the deployed site
The deployed domain is not on the key. Add it to Allowed origins in Sequences → Settings → Event API keys.
Pageviews arrive twice
The agent added the snippet to index.html and to a component. Keep one.