This page documents
@whop/elements@1.0.0-beta.0 and @whop/elements-react@1.0.0-beta.0.Playground
Assemble the elements with example data. Drive the controls, add and arrange elements, and watch events fire live:Options
Pass these towhop.tracking.create({ … }), or as props on <Tracking> in React.
string
Account ID, prefixed
biz_, whose people and events this reads. Required. Defaults to "".string
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.CrossLinksConfig
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 {}."today" | "yesterday" | "last_7_days" | "last_14_days" | "last_30_days" | "last_90_days" | "all_time" | "custom"
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".{ from: string; to: string; } | null
The explicit window, as ISO 8601 instants, used when
period is custom. Ignored otherwise. Defaults to null."account" | "local"
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"."last_touch" | "first_touch"
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".Appearance
Visual customization for this group’s elements. Overrides the global
WhopElements({ appearance }). Change it live with update({ appearance }).WhopElementsLocale
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 fromwhop.tracking.create({ … }) or useTracking().
update
Merges new handle options into every mounted element. In React, change the namespace props instead.
Signature: (options: Partial<TrackingOptions>) => 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:PeopleElement
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.EventsElement
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.