# Browser

Capture product events from a web frontend with @brizz/browser and correlate them with the same backend agent session.

`@brizz/browser` sends product-analytics events from a web app — `track('clicked_submit', { plan: 'pro' })` — to Brizz. Because the frontend reports the **same service name and session id** as your agent backend, those UI events land on the same session as the agent's traces.

It's a separate package from the Node SDK ([`@brizz/sdk`](/docs/sdks/typescript.md)): small, dependency-light, no framework lock-in.

## Install

:::tabs
:::tab[npm]
```bash
npm install @brizz/browser
```
:::tab[pnpm]
```bash
pnpm add @brizz/browser
```
:::tab[CDN]
```html
<script src="https://unpkg.com/@brizz/browser/dist/index.iife.js"></script>
```
:::

## Initialize

Initialize with a **client DSN**, a browser-safe credential you create in your Brizz settings. The service segment must match the service name your backend reports, so the two halves join into one session.

```ts
import { Brizz } from '@brizz/browser';

const brizz = Brizz.init({
  dsn: 'https://brizz-ing-c-XXXX@telemetry.brizz.dev/<service-name>',
});
```

From the CDN build there's no import — the script exposes `Brizz` as a global:

```html
<script src="https://unpkg.com/@brizz/browser/dist/index.iife.js"></script>
<script>
  const brizz = Brizz.init({ dsn: 'https://brizz-ing-c-XXXX@telemetry.brizz.dev/<service-name>' });
</script>
```

Initialized with `dsn`, the SDK accepts only client DSNs (`brizz-ing-c-`). Requests need a browser `Origin` header, which is why this is a browser credential.

## Track events

```ts
brizz.track('clicked_submit', { plan: 'pro', step: 'checkout' });
```

Page URL, referrer, browser, OS, locale, and screen size are attached automatically.

## Correlate with the backend session

The SDK never mints or persists a session id — mint it on your backend and hand it to both halves. Set it once and every later `track()` uses it:

```ts
brizz.setSessionId('session-from-your-backend');
brizz.track('clicked_submit', { plan: 'pro' });
brizz.setSessionId(null); // e.g. on logout
```

If one page hosts more than one logical session, use a session-bound emitter instead of swapping the default:

```ts
const supportChat = brizz.session('support-thread-7');
const copilot = brizz.session('copilot-session-42');

supportChat.track('typed', { length: 12 });
```

## Session-replay correlation

If your page runs FullStory, Mixpanel Session Replay, or LogRocket, Brizz correlates the recording with the session and shows a deep link on it.

| Provider | Setup | Opt out |
|---|---|---|
| FullStory | Auto-detected | `disableFullStory: true` |
| Mixpanel | Auto-detected | `disableMixpanel: true` |
| LogRocket | CDN: none. npm: add the import below | `disableLogRocket: true` |

```ts
import { Brizz } from '@brizz/browser';
import '@brizz/browser/integrations/logrocket';
```

## Availability

Create a client DSN under **Organization Settings → API Keys** by choosing **Client DSN** as the credential type — see [Server DSN](/docs/admin/server-dsn.md#client-dsn) for the credential classes side by side. If it isn't offered there, [contact us](mailto:support@brizz.ai).

## See also

- [Node.js / TypeScript SDK](/docs/sdks/typescript.md) — instrument your agent backend.
- [Sessions](/docs/platform/sessions.md) — where the correlated frontend and backend events show up.