Skip to content
whoisbrowsing
Try it free
Menu

Add whoisbrowsing to Angular

Updated

TL;DR

To add whoisbrowsing to Angular, paste one script tag into the <head> of src/index.html. That file is the base HTML document that loads your application, so the tag is present on every route.

Using an AI coding agent? Give it this prompt:

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

Add the tag to src/index.html

The Angular workspace configuration describes the index option as the base HTML document which loads the application (Angular workspace config). In a default project that file is src/index.html; check the index setting in angular.json if yours lives elsewhere.

<!-- src/index.html -->
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>MyApp</title>
    <base href="/" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="icon" type="image/x-icon" href="favicon.ico" />
    <script src="https://live.whoisbrowsing.com/s.js" data-site="YOUR_SITE_ID" defer></script>
  </head>
  <body>
    <app-root></app-root>
  </body>
</html>

You do not need to add the script to the scripts array in angular.json. That array bundles local files into your build, and this script is loaded from live.whoisbrowsing.com at run time. The Angular router changes pages without a reload, and the script follows them.

Server-side rendering

If you render on the server, index.html is still the template, so the tag is in the HTML your server sends.

Where to get your site ID

Open /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.

Angular 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 for what is sent, and the privacy page 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 Angular and gives you a watch link. The full walkthrough is in Install with an AI agent.

More install guides

See every platform on the install page, or jump to Next.js and React. Prefer to try first? Open /try. To see what the tag does, go to the home page.