Quickstart Astro

1. Установка

В корне Astro-проекта:

npm install @recca/embed-components

2. Зарегистрировать домены

Откройте /org/<slug>/integration в вашем Recca-кабинете и добавьте HTTPS-домены вашего сайта в раздел «Разрешённые домены». Без этого браузер заблокирует обращения виджетов к Recca API (CORS 403).

3. Подключить SDK в layout

В src/layouts/BaseLayout.astro добавьте <script type="module">:

<script type="module">
  import "@recca/embed-components"
</script>

Альтернатива (без npm): один <script> с CDN Recca регистрирует все семь <recca-*> тегов:

<script type="module" src="https://api.recca.ru/cdn/embed-components/v1.js"></script>

4. Login через Recca OAuth

На странице, где партнёр входит в свой кабинет:

<recca-login-button
  tenant="agp"
  api-base="https://api.recca.ru"
  scope="profile:read">
</recca-login-button>

Клик открывает popup OAuth-консент Recca. После успеха SDK хранит JWT в localStorage["recca:session"] и эмитит событие recca:session-ready.

5. Виджет реферальной ссылки

Однострочный генератор: input предзаполняется target, клик по красной CTA-кнопке создаёт ссылку через POST /embed/v1/data/referral-link:

<recca-referral-input
  tenant="agp"
  target="https://example.ru/offer/sochi-2026"
  target-type="website"
  theme="visitka"
  api-base="https://api.recca.ru">
</recca-referral-input>

6. Кабинет партнёра (опционально)

Если у вас есть страница «личный кабинет», подключите KPI и историю сразу четырьмя тегами. user-id — surrogate из /federation/v1/users/upsert (см. Quickstart Express).

<recca-cabinet-kpi tenant="agp" user-id={tenantReccaId}></recca-cabinet-kpi>
<recca-bonus-balance tenant="agp" user-id={tenantReccaId}></recca-bonus-balance>
<recca-recent-leads tenant="agp" user-id={tenantReccaId}></recca-recent-leads>
<recca-referral-tree tenant="agp" user-id={tenantReccaId} max-depth="3"></recca-referral-tree>

7. Проверка

Откройте страницу в браузере с настоящим origin (например https://example.ru/cabinet) — виджеты должны срендериться. Если возникает 403 — проверьте Allowed origins ещё раз. Полный список диагностики: API Reference → Troubleshooting.

Далее: Quickstart Express (backend webhook + users.upsert) →