Embedded referral dashboard

The embedded dashboard is a ready-made RevRoute partner portal rendered inside your own interface. Users see their referral link, click stats and earned commissions without leaving your product or signing up on a third-party site.

💡

Available on Advanced plans and above .

How it works

The dashboard is served in an iframe. Access is granted by a short-lived public token that your server requests from the RevRoute API:

Your server calls the RevRoute API with your workspace key and receives a publicToken for a specific partner.
Your page embeds an iframe with that token in the URL.
The iframe renders the dashboard for that partner.

The secret API key never leaves your server — only the short-lived public token reaches the browser.

Create a workspace API key

Dashboard → Settings → API Keys → create a key with access to the partner program. The key looks like rr_xxxxxxxx and must stay server-side.

Request a token from your server

POST https://app.revroute.ru/api/tokens/embed/referrals

Identify the partner in one of three ways — one is enough:

partnerIdstring(body)

The partner’s RevRoute ID, if you already store it.

tenantIdstring(body)

Your own user identifier. Usually the most convenient option: you pass your ID and RevRoute maps it to the partner.

partnerobject(body)

Partner details (email, name, tenantId, etc.). If no such partner exists yet, they are created and enrolled in the program automatically — no separate sign-up needed.


curl -X POST https://app.revroute.ru/api/tokens/embed/referrals \
  -H "Authorization: Bearer $REVROUTE_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{"tenantId": "user_123"}'

The response contains publicToken (prefixed rr_embed_) and expires. Tokens live for 3 hours, so request one on page load rather than storing it.

Embed the dashboard

The simplest way is the SDK — it creates the iframe, handles sizing and surfaces errors for you.


// npm install @revroute/embed-react
import { RevRouteEmbed } from "@revroute/embed-react";
 
export function ReferralsDashboard({ publicToken }) {
  return (
    <RevRouteEmbed
      data="referrals"
      token={publicToken}
      options={{
        theme: "system",
        themeOptions: { backgroundColor: "#f5f5f5" },
      }}
    />
  );
}

Requires React 19 (react and react-dom are peer dependencies).

Or embed the iframe yourself

If you’d rather not add a dependency, embed the iframe directly — that’s exactly what the SDK does under the hood.


<iframe
  src="https://app.revroute.ru/embed/referrals?token=PUBLIC_TOKEN"
  style="width: 100%; height: 800px; border: none;"
  allow="clipboard-write"
></iframe>

The same thing in React — fetch the token server-side and pass it in:


export function ReferralsDashboard({ publicToken }) {
  return (
    <iframe
      src={`https://app.revroute.ru/embed/referrals?token=${publicToken}`}
      style={{ width: "100%", height: 800, border: "none" }}
      allow="clipboard-write"
    />
  );
}

Embed parameters

Appended to the iframe URL:

tokenstringrequired(query)

The public token from the previous step.

themeOptionsstring(query)

JSON with appearance settings. backgroundColor is supported — set it to match your own UI. Example: themeOptions={"backgroundColor":"#f5f5f5"} (URL-encode the value).

dynamicHeightboolean(query)

When true, the embedded page reports its height to the parent window via postMessage, so you can drop the inner scrollbar and size the iframe to its content.

Example with theming and auto-height:


https://app.revroute.ru/embed/referrals?token=PUBLIC_TOKEN&dynamicHeight=true&themeOptions=%7B%22backgroundColor%22%3A%22%23f5f5f5%22%7D

Things to keep in mind

Tokens last 3 hours and are bound to a single partner — issue them server-side and only for an authenticated user.
The dashboard inherits your program settings: rewards, terms and copy all come from your RevRoute workspace.
Partners created through the partner parameter are enrolled immediately — no separate invitation is required.
The React package exports the component as RevRouteEmbed. The previous component name still works as a deprecated alias.