1. Jaki element osadzić

Umieść na stronie pusty kontener <div id="otc-widget"> w miejscu, gdzie ma się pojawić widget. To jedyny element HTML, który musisz dodać. Widget renderuje się wewnątrz Shadow DOM, więc nie przejmuje ani nie zanieczyszcza stylów strony hosta.

<div
  id="otc-widget"
  data-api-key="TWOJ_API_KEY"
  data-api-base="https://widget.imagine.usermd.net"
  data-lang="pl"
  data-default-crypto-symbol="ETH"
  data-default-fiat-symbol="PLN"
  data-default-type="ONRAMP"
  data-default-from-amount=""
></div>

2. Jaki kod doklejić

Wczytaj skrypt widgetu jako type="module" na końcu strony (przed </body>). Skrypt sam odnajduje kontener #otc-widget, odczytuje z niego atrybuty data-* i montuje komponent.

<script
  type="module"
  src="https://widget.imagine.usermd.net/otc-widget.js"
></script>

Opcjonalnie nasłuchuj zdarzenia otc-start na window, aby obsłużyć potwierdzenie zlecenia we własnym przepływie (np. SPA bez przeładowania strony):

window.addEventListener('otc-start', (e) => {
  const {
    offerRequestId, // ID utworzonego zlecenia
    redirectUrl,    // docelowy URL (widget i tak tam przekieruje)
    direction,      // 'ONRAMP' | 'OFFRAMP'
    crypto,         // { symbol, network }
    fiat,           // { symbol }
  } = e.detail;
  console.log('otc-start', offerRequestId, redirectUrl);
});

Atrybuty konfiguracyjne data-*

Wygląd widgetu sterowany jest zmiennymi CSS (CSS Custom Properties) w dwóch warstwach: prymitywów (bazowe kolory, zaokrąglenia, cienie) oraz komponentów (tokeny per element UI, domyślnie wskazujące na prymitywy przez var()). Tokeny pochodzą z tabeli theme_tokens i są dostarczane przez endpoint /api/widget-config. Widget aplikuje je jako właściwości :host { … } wewnątrz Shadow DOM — zmiana motywu nie wpływa na stronę hosta.

UPDATE theme_tokens SET value = '#FF6B00'
  WHERE tenant_id = 1 AND token = '--otc-color-accent';

INSERT INTO theme_tokens (tenant_id, token, value)
  VALUES (1, '--otc-btn-primary-radius', '999px');

Warstwa 1 — Prymitywy

Każdy kolor semantyczny ma także warianty -bg (tło alertu) oraz -text (tekst alertu), np. --otc-color-success-bg, --otc-color-success-text.

Warstwa 2 — Komponenty

Przykład — pełna personalizacja

-- Ciemny motyw
UPDATE theme_tokens SET value = '#0D0D0D' WHERE token = '--otc-color-primary';
UPDATE theme_tokens SET value = '#FF6B00' WHERE token = '--otc-color-accent';
UPDATE theme_tokens SET value = '#1A1A1A' WHERE token = '--otc-card-bg';
UPDATE theme_tokens SET value = '#2A2A2A' WHERE token = '--otc-input-bg';
UPDATE theme_tokens SET value = '#EEEEEE' WHERE token = '--otc-color-text-primary';

-- Zaokrąglone (pill) przyciski
UPDATE theme_tokens SET value = '999px' WHERE token = '--otc-btn-primary-radius';
UPDATE theme_tokens SET value = '999px' WHERE token = '--otc-btn-secondary-radius';