# Add FounderHQ to Replit (https://www.getfounderhq.com/docs/analytics/recipes/replit)
Paste one prompt into the Replit agent and get working analytics on every
page. About 5 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. Store the key in your project
Open your project's environment or secrets settings in Replit. Add the key
there, so it is not typed into several files.
```text
FOUNDERHQ_PUBLISHABLE_KEY = fhq_pk_XXXX
```
The build tool decides the name the browser can read. Vite needs a
`VITE_` prefix. Next.js needs a `NEXT_PUBLIC_` prefix. The prompt below
tells the agent to rename the variable for you.
This key is publishable. A visitor can read it in your page source, and
that is expected. Never put a secret key (`fhq_sk_...`) in a browser.
## 2. Paste this prompt into Replit
Prompt for Replit:
```text
Add FounderHQ analytics to this project.
1. Read FOUNDERHQ_PUBLISHABLE_KEY from my project environment. If my build
tool needs a prefix for the browser to read a variable, rename it to
that convention, tell me the new name, and use the new name in code. Do
not paste the key value into any file.
2. Look at how this project renders HTML, then pick one placement:
- If the project has an index.html, add the FounderHQ script tags to
its .
- If the project renders a root layout or a top-level App component
instead, add the SDK there, so it loads once on every page.
Pick one placement only. Never install it twice.
3. For an index.html placement, use exactly:
For a component placement, install @founderhq/events and call
founderhq.init(THE_KEY) once at the app's entry point.
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
the key from the environment, and pageviews are captured without any
further code.
```
## 3. What the prompt does
- It keeps the key in one place, and out of your source files.
- It makes the agent rename the variable to whatever your build tool
needs, and report the new name back to you.
- It tells the agent to find the one file that renders every page, so the
SDK loads once.
- 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.
## 4. Do it by hand instead
1. Add the key to your project's environment settings, with the prefix
your build tool needs.
2. Paste the snippet into the `` of `index.html`.
```html
```
3. Restart the project so the new environment value is read.
No `index.html`? Follow [Quickstart: Web (npm)](/analytics/getting-started/quickstart-web-npm),
or [Add FounderHQ to Next.js](/analytics/recipes/nextjs) for the App Router.
## 5. 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 Replit app on its published URL 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
### The page logs an error about an undefined key
The browser cannot read that variable name. Rename it with the prefix your
build tool requires, then restart the project so the build picks it up.
### Nothing appears in Events
Check the network tab. If requests to `/i/v2/e` fail with a 401 or 403,
the key is wrong, or the domain is not allowed. Add both your development
URL and your published URL to **Allowed origins** on the key, in
**Sequences → Settings → Event API keys**.