# Add FounderHQ to Lovable (https://www.getfounderhq.com/docs/analytics/recipes/lovable) Paste one prompt into Lovable 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 Lovable 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 Lovable: ```text Add FounderHQ analytics to this project. 1. Look at how this project renders HTML, then pick one placement: - If the project has an index.html, add the two script tags to its . - If the project renders a root layout or a top-level App component instead, add the same tags there, so they load once on every page. Pick one placement only. Never add the tags twice. 2. 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 secret or an environment variable. 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 events.js once, founderhq.init runs once with my key, and pageviews are captured without any further code. ``` ## 2. What the prompt does - It tells the agent to find the one file that renders every page. - It gives the agent the exact snippet, so the agent invents nothing. - It blocks the two common mistakes: the snippet added twice, and the publishable key hidden in a secret it cannot read in the browser. - 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 the file that renders every page. In most Lovable projects that is `index.html`. 2. Paste the two script tags into the ``. ```html ``` 3. Publish or preview the project. Building a Next.js app instead? Use [Add FounderHQ to Next.js](/analytics/recipes/nextjs). ## 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 your published Lovable app 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 ### Nothing appears in Events Open your browser console. If requests to `/i/v2/e` fail with a 401 or 403, the key is wrong, or your published domain is not allowed. Check **Allowed origins** on the key in **Sequences → Settings → Event API keys**. Add both the preview domain and the live domain. ### Pageviews arrive twice The agent added the snippet in two places. Keep the one in the file that renders every page, and delete the other.