Embedded components let you ship referral and affiliate features in your product without building them from scratch. Your users sign in to your app as usual; you mint a short-lived embed token on the server; the React component renders the corresponding RevRoute UI inside your page — themed to match.
What you can embed
| Component | What it shows |
|---|---|
| Referral dashboard | A partner’s earnings, link, click/lead/sale stats, payout history. Used inside SaaS dashboards to expose a “Refer & earn” tab to logged-in users. |
More components (analytics widgets, partner directory, bounty inbox) are on the roadmap. This page is the entry point — see Referral dashboard for the only generally available embed today.
High-level architecture
User signs in to your app
Your existing auth — RevRoute is invisible at this point.
Your backend mints an embed token
Call POST https://api.revroute.ru/tokens/embed/referrals with your workspace API key and the partner identifier. The response is a short-lived JWT (dub_embed_...) scoped to that one partner.
Frontend mounts the component
Pass the token into <DubEmbed /> from @dub/embed-react. The component renders an <iframe> hosted by RevRoute and signs the user in automatically.
Component updates live
Click, lead, and sale counters update as new events arrive — your frontend doesn’t need to poll.
When to use embedded components vs. the API
| You want to… | Use |
|---|---|
| Show a partner their own dashboard inside your app | Embedded components |
| Build a fully custom UI on top of your own data model | The REST API |
| Send users to RevRoute’s hosted partner portal | A normal link to partners.revroute.ru |
The embed is the fastest path: zero UI work, theming via props, automatic updates.
Security model
- Embed tokens are per-partner and short-lived (~ 1 hour). They cannot read other partners’ data.
- Tokens are signed by RevRoute and verified inside the iframe — your frontend never receives a long-lived secret.
- The iframe communicates with the parent only through a narrow
postMessageprotocol (resize events, click telemetry). No cross-origin data access. - The minting endpoint requires your server-side API key — never expose it to the browser. The browser only ever sees the embed token.