```tsx React theme={null} import { WhopElements, Tracking } from "@whop/elements-react"; import { loadWhop } from "@whop/elements"; function Example() { return ( {/* mount elements here */} ); } ``` ```html Vanilla theme={null} ```

## Options Pass these to `whop.tracking.create({ … })`, or as props on `` in React. Account ID, prefixed `biz_`, whose people and events this reads. Required. Defaults to `""`. A scoped token both surfaces read with. Mint one token for the whole handle on your server with `POST /api/v1/access_tokens`, and set a fresh one with `update({ accessToken })` before it expires. Reading the lists needs `member:basic:read` or `company:basic:read`; the filter menus' option counts additionally use `stats:read`, and the People table's saved-audience filter uses `audience:basic:read` — without those the menus simply show fewer options. Omitted, the calls carry the viewer's own session, which only answers same-origin. Where person links lead on your site. `person` is an absolute-URL template with two placeholders, each replaced URL-encoded per row: `{personId}` is the stable `prsn_…` ID, identical for the same person on every surface — key your page on it; `{identifier}` is the most human-meaningful identifier the surface has (a user ID or email where known), so it can differ across surfaces. It must be absolute (`https://…`) — inside an element frame a relative URL would resolve against the frame, so one is treated as unset. Unset, a person click raises `personOpened` on its element instead. `people` and `events` base URLs are accepted for symmetry with the ads handle but nothing under this handle renders them. Defaults to `{}`. The window both surfaces cover: `today`, `yesterday`, `last_7_days`, `last_14_days`, `last_30_days`, `last_90_days`, `all_time`, or `custom` (pair it with `customRange`). The elements carry the picker and move this; read it back off `periodChanged`. Defaults to `"last_14_days"`. The explicit window, as ISO 8601 instants, used when `period` is `custom`. Ignored otherwise. Defaults to `null`. Which of two zones the window resolves in: `account`, the account's own scheduling zone, or `local`, whichever zone the viewer's browser is in. `account` falls back to the viewer's own when the account has set none. Defaults to `"account"`. Which touch in a person’s journey gets the credit when filtering by source: `last_touch`, the default, or `first_touch`. The elements carry the picker and move this, so a host can drive it and read it back off `attributionModelChanged`. Defaults to `"last_touch"`. Visual customization for this group's elements. Overrides the global `WhopElements({ appearance })`. Change it live with `update({ appearance })`. Locale for this group's element UI text. Set it to one of the app's built locales to override the global configuration. Any other value falls back to the default locale. ## Events Pass callbacks in the create options or React props. ### `onLoadingChange` Runs when the grouped loading state changes. The value is `true` while any mounted element is still loading. **Signature:** `((loading: boolean) => void)` ## Methods Call these on the Tracking handle from `whop.tracking.create({ … })` or `useTracking()`. ### `update` Merges new handle options into every mounted element. In React, change the namespace props instead. **Signature:** `(options: Partial) => void` ## Types Named types used throughout this page. ## `CrossLinksConfig` The consumer-facing shape of an element's `links` prop. `people`/`events` are base URLs the canonical query params are appended to; `person` is a template whose `{personId}` and `{identifier}` placeholders are replaced with the row's URL-encoded values. ### `people` **Signature:** `string | undefined` ### `events` **Signature:** `string | undefined` ### `person` **Signature:** `string | undefined` ## `PeopleFilterBag` Consumer-facing filters for the People element. The element maps these camelCase options to `/api/v1/people` query parameters. ### `source` **Signature:** `string` ### `eventName` **Signature:** `string` ### `customEvent` **Signature:** `string` ### `utmSource` **Signature:** `string` ### `country` **Signature:** `string` ### `device` **Signature:** `string` ### `browser` **Signature:** `string` ### `os` **Signature:** `string` ### `hasPurchased` **Signature:** `string` ### `query` **Signature:** `string` ### `audienceId` **Signature:** `string` ### `eventFrom` **Signature:** `string` ### `eventTo` **Signature:** `string` ## `EventsFilterBag` Consumer-facing filters for the Events element. The element maps these camelCase options to `/api/v1/events` query parameters. ### `identifier` **Signature:** `string` ### `event` **Signature:** `string` ### `source` **Signature:** `string` ### `country` **Signature:** `string` ### `utmSource` **Signature:** `string` ### `device` **Signature:** `string` ### `browser` **Signature:** `string` ### `os` **Signature:** `string` ### `from` **Signature:** `string` ### `to` **Signature:** `string` ## Elements The elements this group mounts. Each has its own page: Everyone the account has seen — visitors and customers resolved from pixel activity, with their source, spend, and activity counters. Search, filter by source, event, geography, or device, sort any column, and page through. A row click follows `links.person` when the handle configures it, and otherwise comes back to you as `personOpened`. Every event the account measured — page views, leads, purchases, and custom pixel events — as a raw, filterable stream. The rows behind any metric: filter by event, source, geography, or device over the handle’s window, or search one person’s identifier to read their whole journey. A person cell follows `links.person` when the handle configures it, and otherwise comes back to you as `personOpened`.