# Bolt

Add ProductLense to an app built with Bolt by pasting one prompt, then check that the tags in index.html or the root layout are unchanged.

Bolt writes the code for you, so the install is a prompt. Most Bolt projects are Vite apps with an `index.html`; some are Next.js or Astro projects. The prompt below covers each, and asks for the exact tags, because an AI that "improves" the tag can break it.

Replace `SITE_ID` in the prompt with the id from Settings → Sites in the ProductLense dashboard before you send it.

## The prompt

```text title="Prompt for Bolt"
Add ProductLense analytics. Use plain script tags, exactly as written below, and do not install any package.

- If the project has an index.html (Vite), put both tags inside <head>, before any other script.
- If it is Next.js, add them to app/layout.tsx with next/script: the first as an inline Script with strategy="beforeInteractive", the second with strategy="afterInteractive".
- If it is Astro, put both tags in the <head> of the shared layout, with is:inline on each.

<script>window.productlense=window.productlense||function(){(window.productlense.q=window.productlense.q||[]).push(arguments)}</script>
<script defer data-site="SITE_ID" src="https://api.productlense.app/a.js"></script>

Do not convert them to a module, a component or an npm import, and do not change data-site or src. When a user signs in, call window.productlense?.('identify', user.id) once with the signed-in user's id.
```

## Check what the AI wrote

Open the file Bolt changed (`index.html`, `app/layout.tsx` or the Astro layout) and confirm:

- `data-site` holds your real site id, not `SITE_ID`.
- The `src` is exactly `https://api.productlense.app/a.js`.
- The tag has no `type="module"` and is not imported from a `.ts` or `.tsx` file. The script reads its settings from its own tag, which only works for a classic script.

The hand-written versions are in the [React (Vite)](/docs/install/react), [Next.js](/docs/install/nextjs) and [Astro](/docs/install/astro) guides.

Bolt previews your app on its own domain. Add the domain you deploy to (Netlify, or your own) to the site's hostnames in the ProductLense dashboard; visits from the preview domain are rejected unless you add it too.

## Verify your installation

1. Deploy the app, then open the published URL in a normal browser window.
2. Open the Live page in the ProductLense dashboard. Your visit appears within a few seconds.
3. In the browser's developer tools, the Network tab shows a `POST` to `https://api.productlense.app/api/e` with status `204`.

If the visit does not appear, follow [Verify your installation](/docs/install/verify).