Widget reference
Every FYNXT Incentive widget and the attributes it accepts. All widgets share a set of
common attributes for identity and theming; each widget then adds a few
of its own. See Embedding & auth for how to obtain an
embed-token.
Common attributes
Every fynxt-* element accepts these. Identity is required — supply either an
embed-token (recommended) or the Attribute Auth fields.
| Attribute | Type | Description |
|---|---|---|
embed-token | string | Short-lived JWT from your backend. Access Key Embed. |
data-participant-id | string | Participant identity for Attribute Auth (no backend). |
program-id | string | The incentive program to scope data to. |
theme | string | "light" (default) or "dark". |
accent | string | Hex highlight color. Defaults to FYNXT brand blue. |
locale | string | BCP-47 locale for formatting, e.g. "en-AE". |
currency | string | 3-letter ISO code overriding the program's display currency. |
<fynxt-rebate-summary>
KPI cards showing total, pending and on-hold rebates earned by the participant.
| Attribute | Type | Description |
|---|---|---|
metrics | string | Comma-separated cards to show: total, pending, on-hold, settled. Defaults to all. |
period | string | "month", "quarter", "ytd" or "all". Defaults to "month". |
<fynxt-rebate-trend>
A bar chart of monthly rebate earnings, optionally split by commission type.
| Attribute | Type | Description |
|---|---|---|
months | number | How many months of history to plot. Defaults to 12. |
breakdown | string | "commission-type" to stack by type, or "none". Defaults to "none". |
<fynxt-ib-network>
A table of the participant's sub-IB network — downline volume, active clients and earnings.
| Attribute | Type | Description |
|---|---|---|
data-partner-id | string | The IB whose network to display. Defaults to the token's participant. |
depth | number | How many downline levels to include. Defaults to 1. |
page-size | number | Rows per page. Defaults to 10. |
<fynxt-referral-summary>
Referral performance: clicks, registrations, conversions and attributed value.
| Attribute | Type | Description |
|---|---|---|
data-partner-id | string | The partner to report on. Defaults to the token's participant. |
period | string | "month", "quarter", "ytd" or "all". |
<fynxt-leaderboard>
A live contest leaderboard with rank, participant and score. Updates in real time.
| Attribute | Type | Description |
|---|---|---|
contest-id | string | The contest to display. Required for this widget. |
limit | number | Number of ranks to show. Defaults to 10. |
highlight-self | boolean | Pin the signed-in participant's row even if outside limit. Defaults to true. |
<fynxt-loyalty-balance>
The participant's loyalty points balance and current tier.
| Attribute | Type | Description |
|---|---|---|
show-tier | boolean | Show the tier badge and progress to next tier. Defaults to true. |
compact | boolean | Render as a single inline badge instead of a card. Defaults to false. |
Events
Widgets emit standard DOM CustomEvents you can listen for on the element. They
bubble and are composed, so a single listener on a container works.
| Event | Fired when | detail |
|---|---|---|
fynxt:ready | Widget has authenticated and rendered its first data. | { widget } |
fynxt:error | Auth or data load failed. | { code, message } |
fynxt:token-expiring | The embed-token is about to expire. | { expiresAt } |
fynxt:select | The user clicks a row / bar / rank inside the widget. | { type, id, value } |