Skip to main content
Upcoming — generated from the latest merged element source; documents unreleased development. Use the channel picker at the top of the sidebar for the docs of a published release.
In development — not yet part of a stable release.

​
Playground

Assemble the elements with sample data — drive the controls, add and arrange elements, and watch events fire live:

​
Usage

​
Options

Pass these to whop.ads.create({ … }) — or as props on <Ads> in React.
​
string
The company (biz_…) whose advertising this reads. Required. This is the Whop account, not an ad account. Defaults to "".
​
"today" | "yesterday" | "last_7_days" | "last_14_days" | "last_30_days" | "last_90_days" | "all_time" | "custom"
The window every surface reports on: today, yesterday, last_7_days, last_14_days, last_30_days, last_90_days, all_time, or custom (pair it with customRange). The chart carries the picker, and it moves this — so a host can drive the window and 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.
​
string
The IANA zone every figure is reported in — America/New_York, Europe/London. Unset, it defaults to the account’s preferences.ads_scheduling_timezone. Either way that zone stays available in the chart’s timezone picker. Defaults to "".
​
string
The ISO currency every amount is converted to and labelled in — usd, eur. Unset, it defaults to the account’s preferences.ads_reporting_currency. Defaults to "".
​
string[]
Narrow reporting to these ad campaigns (adcamp_…). Empty reports on the whole account. Overridden by adGroupIds or adIds when either is set. Pass one id for an exact figure: the reporting API scopes by a single source path, so where more than one is given the chart reports on the first alone. Defaults to [].
​
string[]
Narrow reporting to these ad groups (adgrp_…). Takes precedence over campaignIds. Same single-id caveat. Defaults to [].
​
string[]
Narrow reporting to these ads (ad_…). The narrowest filter — takes precedence over both others. Same single-id caveat. Defaults to [].
​
(() => Promise<string>)
Called on your page to supply the bearer every API call is made with. It must resolve a credential scoped to accountId.
​
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 — one of the app’s built locales, overriding the global config; any other value falls back to the default locale.

​
Events

Pass a callback in the create options / React props.

​
onLoadingChange

Fired when the grouped loading state changes — true while any mounted element is still loading. Signature: ((loading: boolean) => void)

​
Methods

Call these on the Ads handle — the return of whop.ads.create({ … }) (vanilla) or useAds() (React).

​
update

Update the handle live: any of its options (appearance and locale included), propagated to every mounted element. React consumers never call it — updating the namespace component’s props does the same. Signature: (options: Partial<AdsOptions>) => void

​
Elements

The elements this group mounts — each has its own page:

ReportChartElement

An advertising account’s performance charted over a window you choose, with a picker for which metric to plot — spend, impressions, clicks, or any conversion the account records. Read-only, and the chart only: headline figures belong to whatever surface composes this.