Add FounderHQ to Replit

Paste one prompt into the Replit agent and get working analytics on every page. About 5 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.

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.

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.

Paste this prompt into Replit

Prompt for Replit:

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 <head>.
   - 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:
   <script src="https://i.getfounderhq.com/events.js"></script>
   <script>
     founderhq.init(THE_KEY);
   </script>
   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.

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.

Do it by hand instead

Add the key to your project's environment settings, with the prefix your build tool needs.
Paste the snippet into the <head> of index.html.

<script src="https://i.getfounderhq.com/events.js"></script>
<script>
  founderhq.init("fhq_pk_XXXX");
</script>

Restart the project so the new environment value is read.

No index.html? Follow Quickstart: Web (npm), or Add FounderHQ to Next.js for the App Router.

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 Replit app on its published URL and load a page.
In FounderHQ, open Sequences → Events.
You see a $pageview for 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

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.

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.

AI agent or LLM? Read this page as markdown