Add FounderHQ to Lovable
Install the FounderHQ web SDK in a Lovable app with one prompt.
Paste one prompt into Lovable 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 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:
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 <head>.
- 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:
<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 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.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
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 the file that renders every page. In most Lovable projects that is
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>- Publish or preview the project.
Building a Next.js app instead? Use Add FounderHQ to Next.js.
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 your published Lovable app 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
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.