MenuBolt

Installation guides

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

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), Next.js and 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.

    ↑ ↓ to move, Enter to open