# Add FounderHQ to Bolt (https://www.getfounderhq.com/docs/analytics/recipes/bolt) Paste one prompt into Bolt and get working analytics on every page. About 3 minutes. 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. ## 1. 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: ```text 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 . - 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: 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. ``` ## 2. 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 pageviews, page leaves, sessions, clicks, rage clicks, dead clicks, outbound clicks, scroll depth, and Core Web Vitals for you. ## 3. Do it by hand instead 1. Open `index.html`. 2. Paste the two script tags into the ``. ```html ``` 3. Deploy the project. Next.js App Router? Use [Add FounderHQ to Next.js](/analytics/recipes/nextjs) instead. ## 4. Let your agent read these docs Connect the [docs MCP server](/analytics/ai-resources/mcp-server), then name it in your prompt. Your agent then reads these pages while it writes the code. ## Verify 1. Open the deployed site and load a page. 2. In FounderHQ, open **Sequences → Events**. 3. You see a `$pageview` for that page, with its channel. 4. 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.