Встраиваемый реферальный дашборд

Встраиваемый дашборд — это готовый партнёрский кабинет RevRoute внутри вашего интерфейса. Пользователь видит свою реферальную ссылку, статистику переходов и начисленное вознаграждение, не покидая ваш продукт и не регистрируясь на стороннем сервисе.

💡

Функция доступна на тарифных планах Advanced и выше .

Как это устроено

Дашборд отдаётся в iframe. Доступ к нему открывает одноразовый публичный токен, который ваш сервер запрашивает у API RevRoute:

Сервер вызывает API RevRoute с ключом вашего воркспейса и получает publicToken для конкретного партнёра.
Страница вставляет iframe с этим токеном в адресе.
Внутри iframe открывается кабинет именно этого партнёра.

Секретный API-ключ остаётся на вашем сервере — в браузер уходит только короткоживущий публичный токен.

Получите API-ключ воркспейса

Кабинет → Settings → API Keys → создайте ключ с доступом к партнёрской программе. Ключ выглядит как dub_xxxxxxxx и хранится только на сервере.

Запросите токен на своём сервере

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

Партнёра можно указать тремя способами — достаточно одного:

partnerIdstring(body)

Идентификатор партнёра в RevRoute, если он у вас сохранён.

tenantIdstring(body)

Ваш собственный идентификатор пользователя. Удобнее всего: вы передаёте свой ID, а RevRoute сам сопоставляет его с партнёром.

partnerobject(body)

Данные партнёра (email, name, tenantId и др.). Если такого партнёра ещё нет, он будет создан и зачислен в программу автоматически — отдельная регистрация пользователю не нужна.


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"}'

В ответе приходит publicToken (префикс dub_embed_) и expires — время истечения. Токен живёт 3 часа, поэтому запрашивайте его при загрузке страницы, а не сохраняйте в базе.

Встройте дашборд

Проще всего — через SDK. Он берёт на себя создание iframe, подгонку высоты и обработку ошибок.


// 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" },
      }}
    />
  );
}

Требуется React 19 (react и react-dom — peer-зависимости пакета).

Или вставьте iframe вручную

Если не хотите тянуть зависимость, встройте iframe сами — SDK под капотом делает ровно это.


<iframe
  src="https://app.revroute.ru/embed/referrals?token=ПУБЛИЧНЫЙ_ТОКЕН"
  style="width: 100%; height: 800px; border: none;"
  allow="clipboard-write"
></iframe>

Тот же приём в React — токен получаете на сервере и передаёте в компонент:


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"
    />
  );
}

Параметры встраивания

Добавляются в адрес iframe:

tokenstringrequired(query)

Публичный токен из предыдущего шага.

themeOptionsstring(query)

JSON с настройками оформления. Поддерживается backgroundColor — цвет фона дашборда, чтобы он совпадал с вашим интерфейсом. Пример: themeOptions={"backgroundColor":"#f5f5f5"} (значение нужно закодировать через encodeURIComponent).

dynamicHeightboolean(query)

При true встроенная страница сообщает свою высоту родительскому окну через postMessage — так можно убрать внутреннюю прокрутку и подгонять высоту iframe под содержимое.

Пример с оформлением и авто-высотой:


https://app.revroute.ru/embed/referrals?token=ПУБЛИЧНЫЙ_ТОКЕН&dynamicHeight=true&themeOptions=%7B%22backgroundColor%22%3A%22%23f5f5f5%22%7D

Что стоит учитывать

Токен действует 3 часа и привязан к одному партнёру — выдавайте его только авторизованному пользователю и только на сервере.
Дашборд наследует настройки вашей партнёрской программы: награды, условия и тексты берутся из кабинета RevRoute.
Если партнёр создаётся через параметр partner, он сразу попадает в программу — отдельно приглашать его не нужно.
В React-пакете компонент экспортируется как RevRouteEmbed. Старое имя DubEmbed работает как алиас, но помечено устаревшим.