# Install Hoot Lens
Add this one tag to every page, as high in the document as your platform allows:
```html
```
Find `PROJECT_ID` in the dashboard under Installation. It is public. Privacy, consent mode and sampling come from your project settings in the dashboard, not from the install.
## Fastest install
1. Sign up, add your site address in the dashboard, and copy the tag from Installation. This takes about a minute. The new project starts with balanced privacy, recording on load and your plan's retention, and none of it needs deciding now.
2. Put the tag where your platform says (table below), or give your coding agent the prompt from Installation ("Let your AI agent install it"). With the Hoot Lens connector an agent can call `get_install_snippet` for the exact code, and `check_install` to verify.
3. Publish, or run locally: to test on your own computer, choose "Allow localhost for testing" in Installation. It allows one exact `http://localhost:PORT` or `http://127.0.0.1:PORT` and nothing else.
4. Visit the site. Installation shows "First visit recorded" and links to the replay. In the browser console, `Hootlens.status()` should return `state: 'recording'`, and `?hootlens=debug` on the address shows a panel with the reason when it does not.
| Platform | Where the tag goes |
| --- | --- |
| Plain HTML | The `` of every page |
| Next.js | `app/layout.tsx` with `
```
## React with Vite (tested)
Put the tag in `index.html`. Client-side routes are detected automatically.
```html
```
## Vue with Vite (tested)
Same as above, in `index.html`. Vue Router changes are picked up automatically.
## Next.js
The App Router with `
```
## Angular (tested)
`src/index.html`, inside ``:
```html
```
## Astro (tested)
In your layout. Astro processes and bundles `
```
## Gatsby
`gatsby-ssr.js` in the project root:
```jsx
import React from 'react';
export const onRenderBody = ({setHeadComponents}) => {
setHeadComponents([
,
]);
};
```
## Remix and React Router
`app/root.tsx`, inside `` of the `Layout` component:
```tsx
```
## Google Tag Manager
Use a Custom HTML tag on All Pages (or download the [template](https://hootlens.com/downloads/hootlens-gtm-template.tpl)):
```html
```
Fire it once, on All Pages or Initialization. Firing it again on History Change loads the script a second time, which the tracker ignores, but it is wasted work. A strict Content Security Policy blocks a Custom HTML tag unless it allows inline scripts or carries a nonce; the template injects the script without inline code.
This is tested against a simulated Tag Manager injection: a Custom HTML tag fired at the first page view, on DOM Ready, on Window Loaded and three seconds after load, and the template's own code run with each Tag Manager API it uses and the permissions it declares, including Consent Mode `analytics_storage`. See [FRAMEWORKS.md](FRAMEWORKS.md).
## WordPress (tested)
Install the Hoot Lens plugin ([download](https://hootlens.com/downloads/hootlens-wordpress.zip), then Plugins, Add New, Upload Plugin), then enter the project ID under Settings, Hoot Lens. Or paste the tag into a header-injection plugin; the tag printed from `wp_head` is tested, which is what those plugins do. The plugin is tested in WordPress itself, including its WP Consent API option with the real WP Consent API plugin.
## Shopify
Enable the Hoot Lens app embed under Online Store, Themes, Customize, App embeds. Or paste the tag before `` in `layout/theme.liquid`. The app embed block can be downloaded as [hootlens-shopify-app-embed.zip](https://hootlens.com/downloads/hootlens-shopify-app-embed.zip). Do not add it to checkout.
The app embed block and the manual snippet are rendered with a Liquid engine inside a theme layout and run in a browser, with a stand-in for the Shopify Customer Privacy API. That checks the markup, the escaping, the settings and the consent wiring. It does not check a Shopify store, the theme editor or checkout. See [FRAMEWORKS.md](FRAMEWORKS.md).
## Webflow, Squarespace, Wix
Paste the tag into the site-wide head code area:
- Webflow: Site settings, Custom code, Head code.
- Squarespace: Settings, Advanced, Code Injection, Header.
- Wix: Settings, Custom code, Add code to the head, apply to all pages.
Some plans restrict custom code. Squarespace and Wix editors do not run it in preview, so check the published site.
## npm and ESM
The one-line tag is the supported install. The `@hootlens/tracker` package is not published.
## Consent recipes
Prefer `data-consent-source` (see Consent above). These recipes are only for a platform or banner it does not cover, and they only call the queue. With "required", nothing records until `['consent', true]`. Push when the visitor chooses; Hoot Lens remembers it.
Custom banner:
```js
acceptButton.addEventListener('click', function () {
(window.hootlens = window.hootlens || []).push(['consent', true]);
});
declineButton.addEventListener('click', function () {
(window.hootlens = window.hootlens || []).push(['consent', false]);
});
```
OneTrust, Cookiebot and Google Consent Mode:
```html
```
## Content Security Policy
Allow the script and the API origin:
```
script-src https://hootlens.com;
connect-src ;
```
Use your `data-endpoint` value as the API origin if you set one, otherwise the default API origin shown in the dashboard install panel.
Hoot Lens needs nothing else. The tested apps run under `script-src 'self' https://hootlens.com` with that `connect-src` and no console errors where the platform itself allows it (React, Vue, Angular and Astro). Next.js, Nuxt, SvelteKit, WordPress and Tag Manager write inline scripts of their own, so a site on them already needs `'unsafe-inline'` or a nonce policy for that code, with or without Hoot Lens.