# Add whoisbrowsing to Next.js (App Router)

To add whoisbrowsing to a Next.js App Router site, put one `next/script` tag in your root layout, `app/layout.tsx`, with `strategy="afterInteractive"` and your site ID in a `data-site` attribute. It is one tag, it loads after your page, and it never changes how your pages look.

## Add the script to app/layout.tsx

Next.js documents `next/script` as the way to load third-party scripts, and `afterInteractive` (the default) loads the script after some hydration, which is the documented fit for analytics-style scripts. See the [Next.js Script component reference](https://nextjs.org/docs/app/api-reference/components/script). Put it in the root layout so it loads on every page:

```tsx
// app/layout.tsx
import Script from "next/script";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          src="https://live.whoisbrowsing.com/s.js"
          data-site="YOUR_SITE_ID"
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}
```

You can pass `data-site` straight to `<Script>`: the Next.js reference says extra attributes such as custom data attributes are forwarded to the final `<script>` element. If your root layout lives at `app/[locale]/layout.tsx`, put the tag there instead. The Next.js docs note that a script in a root layout runs once per document load, and a client-side navigation does not run it again, which is what you want here because the script keeps running as visitors move between pages.

Outside Next.js, the same script is this plain tag, which is what every other guide uses:

```html
<script src="https://live.whoisbrowsing.com/s.js" data-site="YOUR_SITE_ID" defer></script>
```

## Pages Router

If you still use the Pages Router, put the same `<Script>` in `pages/_app.tsx`. The rest of this guide is the same.

## Hosting on Vercel

Nothing special is needed on Vercel. Add the tag, deploy, and use the site ID you made for your production address. Keep a separate site for `localhost:3000` while you develop.

## Where to get your site ID

Open [/try](/try) to create a site with no sign-in (you can claim it later), or sign in with Google. You get a site ID to replace `YOUR_SITE_ID` in the code above. Each website is separate: localhost and production never mix, and `www.` is the same website as the bare domain.

## Navigation between pages

Next.js apps change pages in the browser without a full reload. You do not need extra code: the script follows client-side route changes on its own, so each page a visitor moves to shows up in your live view.

## Content-Security-Policy

If your site sends a Content-Security-Policy header, allow the script and its live connection:

```
script-src https://live.whoisbrowsing.com;
connect-src wss://live.whoisbrowsing.com;
```

Add these to your existing `script-src` and `connect-src` lists instead of replacing them. If you have no CSP, skip this step.

## Verify

1. Deploy, or run your site locally. Use the site ID made for that address, because localhost and production are separate websites.
2. Open the whoisbrowsing dashboard and click Watch.
3. Open your site in a Chrome Incognito window or a Safari private window. Your own normal browser is never counted, so a private window is how you test as a visitor.
4. You should appear as a coloured cursor on your real page, with a line for you in the side panel.

If nothing shows up, check that the tag is in the page source, that the site ID matches the address you opened, and that a CSP or ad blocker is not stopping `live.whoisbrowsing.com`. See [how it works](/how-it-works) for what is sent, and the [privacy page](/privacy) for what is never sent or stored.

## Let your AI agent do it

Paste this into Claude Code, Cursor or Codex:

```
Add whoisbrowsing (live visitor view) to this project. Follow https://whoisbrowsing.com/SKILL.md exactly.
```

The agent reads the instructions, creates a site, puts the tag in the right file for Next.js and gives you a watch link. The full walkthrough is in [Install with an AI agent](/install/ai-agent).

## More install guides

See every platform on the [install page](/install), or jump to [React](/install/react) and [Vue](/install/vue). Prefer to try first? Open [/try](/try). To see what the tag does, go to the [home page](/).