Widgets

FYNXT Incentive widgets are drop-in React components — reward program pages, rebate dashboards, contest leaderboards, loyalty widgets — published as the @fynxt/incentive-widgets npm package. Install it into your React or Next.js app and import only the widgets you need.

One package, every widget. Each widget ships as its own bundle file inside the package, exporting a single named React component. There's no separate runtime script or custom element registration — you import a component and render it like any other.

What widgets are

A widget is a self-contained view onto a participant's incentive data. It renders its own layout and fetches its own data from the FYNXT Incentive backend once your host app has authenticated the user and passed the resulting tokens in as props — see Embedding & auth.

Widgets are designed for two audiences:

Brokers embedding participant-facing dashboards into an existing React/Next.js client portal.
Partners / IBs showing rebate and sub-network performance inside their own React app.

Widget catalog

Every widget the package ships is imported from its own numbered bundle file and exports one named component. A few examples:

Component	What it shows
`CreateRewardsProgramPage`	The full reward program page for a participant.
`CreateRebateProgramDashboard`	Rebate dashboard for a program.
`CreateReferralPrograms`	Referral program management view.
`CreateContestProgram`	Contest program view.
`CreateLoyaltyPointsWidget`	Loyalty points definition/balance widget.

See the widget reference for the full list of import paths and components.

How they work

The lifecycle of a widget on the page is:

Install the package. Add @fynxt/incentive-widgets to your React or Next.js app from FYNXT's private npm feed.
Authenticate. Your host app signs the user in against the FYNXT auth API and gets back an access token, refresh token and participant id.
Import & render. Import the component for the widget you want and render it, passing the tokens in as props.
Fetch & display. The widget uses those tokens to fetch exactly the data it needs from the FYNXT Incentive API and renders it.

Next steps

Embedding & auth

Install @fynxt/incentive-widgets, authenticate the user, and add your first widget.

Embedding guide →

Widget reference

Every widget's import path and the component it exports.

Widget reference →

← Back

All developer docs

Embedding & auth