Referencja widgetu embed

Przewodnik dla właściciela firmy: Osadzanie rezerwacji na stronie WWW.

Bazowy adres

Zamień {origin} na adres Twojej instalacji BUKMI (np. https://app.bukmi.pl).

Tryb	Wzorzec URL
Hub	{origin}/embed/b/{slug-firmy}
Usługa	{origin}/embed/b/{slug-firmy}/{slug-uslugi}
Płatność (breakout)	{origin}/embed/b/{slug-firmy}/pay/{token-potwierdzenia}
Podziękowanie	{origin}/embed/b/{slug-firmy}/confirmed/{token-potwierdzenia}

Parametry zapytania: ?accent=%237c6cf2&lang=pl (opcjonalnie).

Skrypt loadera

<script
  src="https://app.bukmi.pl/embed.js"
  data-business="twoj-slug-firmy"
  data-mode="inline"
  data-target="#bukmi-embed"
  async
></script>
<div id="bukmi-embed"></div>

Atrybuty data-*

Atrybut	Wymagany	Opis
data-business	tak	Slug firmy (/b/{slug}).
data-mode	nie	inline (domyślnie), popup lub sam iframe bez skryptu.
data-target	inline	Selektor CSS kontenera (domyślnie #bukmi-embed).
data-service	nie	Slug usługi - od razu otwiera tę usługę.
data-accent	nie	Kolor akcentu hex (np. #7c6cf2).
data-lang	nie	pl lub en interfejsu gościa.
data-button-label	popup	Etykieta przycisku (domyślnie „Zarezerwuj”).
data-button-class	popup	Dodatkowa klasa CSS przycisku.
data-button-style	popup	Style inline przycisku.
data-title	nie	Tytuł iframe (dostępność).

Tryb popup wstawia przycisk tuż za tagiem <script>.

Dozwolone domeny

Właściciel firmy musi wpisać origin strony rodzica w Moja oferta → Embed (np. https://www.twoj-salon.pl). Bez dopasowania odpowiedzi /embed/... zwracają 403.

Podgląd właściciela: ?preview=1 po zalogowaniu jako edytor (pomija allowlist do testów).

Zdarzenia postMessage

Iframe wysyła komunikaty JSON do strony rodzica:

window.addEventListener('message', (event) => {
  if (event.origin !== 'https://app.bukmi.pl') return;
  const { type, ...detail } = event.data || {};
  switch (type) {
    case 'bukmi:ready':
      // iframe załadowany; detail.height
      break;
    case 'bukmi:resize':
      // detail.height - auto-wysokość inline
      break;
    case 'bukmi:step':
      // detail.step - krok kreatora ("1" | "2")
      break;
    case 'bukmi:booking-created':
      // detail.bookingId, confirmationToken, awaitingPayment, series?
      break;
    case 'bukmi:booking-confirmed':
      // detail.bookingId lub bookingSeriesId - popup zamyka się sam
      break;
    case 'bukmi:payment-breakout':
      // detail.stripeUrl - rodzic może przejść na Stripe
      window.location = detail.stripeUrl;
      break;
  }
});

Bundlowany embed.js obsługuje automatycznie bukmi:resize, bukmi:payment-breakout i bukmi:booking-confirmed.

CSP na stronie rodzica

Strona klienta musi zezwalać na:

• script-src - origin skryptu embed.js
• frame-src (lub child-src) - origin aplikacji BUKMI dla iframe

BUKMI ustawia Content-Security-Policy: frame-ancestors 'self' https://twoja-strona.pl na odpowiedziach embed.

Płatności

Stripe Checkout nie działa w iframe. Trasa płatności zwraca krótką stronę HTML z window.top.location na Stripe i zdarzeniem bukmi:payment-breakout. Po opłaceniu Stripe wraca na embed thank-you na domenie BUKMI.

Zobacz też

• Rezerwacje gości i płatności
• Osadzanie rezerwacji na stronie WWW - konfiguracja w panelu