Embed widget

1. Základný snippet

Skopírujte HTML kód a vložte ho kdekoľvek na váš web. Nahraďte vase-meno vašim slug-om (zistíte v onboarding-u alebo v dashboard-e).

<iframe
  src="https://app.terminuj.sk/embed/vase-meno"
  style="width:100%; max-width:680px; height:780px; border:0;"
  allow="payment"
  loading="lazy"
  title="Rezervácia termínu"></iframe>

Atribút allow="payment" je potrebný pre Apple Pay / Google Pay v iframe. loading="lazy" ušetrí načítanie ak je widget pod fold-om.

1b. Script variant (auto-výška v jednom bloku)

Ak chcete widget bez fixnej výšky (prispôsobuje sa obsahu — vybraný dátum, formulár), použite tento jeden blok. Vytvorí iframe a sám rieši výšku cez postMessage. Nepotrebujete druhý snippet (auto-resize z bodu 3 je už v ňom).

<div id="rezervacia-widget"></div>
<script>
(function () {
  var mount = document.getElementById('rezervacia-widget');
  var f = document.createElement('iframe');
  f.src = "https://app.terminuj.sk/embed/vase-meno";
  f.style.cssText = 'width:100%;max-width:680px;height:780px;border:0';
  f.allow = 'payment';
  f.loading = 'lazy';
  f.title = 'Rezervácia termínu';
  mount.appendChild(f);
  window.addEventListener('message', function (e) {
    if (e.origin !== 'https://app.terminuj.sk') return;
    if (e.data && e.data.type === 'rezervacia:resize') {
      f.style.height = e.data.height + 'px';
    }
  });
})();
</script>

iframe (bod 1) = najjednoduchšie, funguje aj bez JavaScriptu, ale má fixnú výšku. Script variant = o niečo viac kódu, ale widget rastie/zmenšuje sa podľa obsahu. Oba podporujú rovnaké theme/primary/font parametre.

Tip: hotové snippety pre konkrétne témy nájdete v galérii /temy — vyberiete tému, vidíte náhľad a skopírujete kód.

2. Customization (theme + farby + font)

Pridajte query parametre do src URL — prepíšu CSS variables vo widget-e:

• theme = light | dark | auto (default light)
• primary = hex farba bez # (napr. B4436C) — používa sa pre tlačidlá a accent
• font = Inter | system (default Inter)
• locale = sk | en (default sk)

<iframe
  src="https://app.terminuj.sk/embed/vase-meno?theme=light&primary=B4436C&font=Inter"
  style="width:100%; max-width:680px; height:780px; border:0;"
  allow="payment"
  loading="lazy"
  title="Rezervácia termínu"></iframe>

✓ Theme/colors/font customization je LIVE od Day 17. Query parametre prepíšu tenant brand colors (z /dashboard/settings/brand) ktoré sú default fallback. Hex farby zadávajte bez # (URL-safe).

3. Responsive výška (auto-resize)

Widget posiela postMessage s aktuálnou výškou pri každej zmene stavu (vybraný dátum, vybraná služba, formulár). Voliteľný JS snippet pre auto-resize:

<script>
window.addEventListener('message', (event) => {
  if (event.origin !== 'https://app.terminuj.sk') return;
  if (event.data?.type !== 'rezervacia:resize') return;
  const iframe = document.querySelector('iframe[src*="app.terminuj.sk/embed"]');
  if (iframe) iframe.style.height = event.data.height + 'px';
});
</script>

Protocol spec

Message payload:

{
  type: 'rezervacia:resize',
  tenantSlug: 'vase-meno',   // ktorý widget posiela (filter pri viacerých)
  height: 1240                // px (document.scrollHeight)
}

Viac widgetov na jednej stránke

Filtrujte podľa tenantSlug v payloade — selektor podľa src:

window.addEventListener('message', (event) => {
  if (event.origin !== 'https://app.terminuj.sk') return;
  if (event.data?.type !== 'rezervacia:resize') return;
  const iframe = document.querySelector(
    `iframe[src*="/embed/${event.data.tenantSlug}"]`
  );
  if (iframe) iframe.style.height = event.data.height + 'px';
});

Bez listener-u widget použije fixnú výšku 780 px (scroll vnútri iframe). ResizeObserver API: postMessage sa fire-ne pri každej zmene document.documentElement.scrollHeight (debounced).

4. CMS integrácia

WordPress

// 1. WP Admin → Pages → upraviť stránku
// 2. Pridať blok "Custom HTML"
// 3. Vložiť snippet vyššie
// 4. Publikovať

Shopify

<!-- Online Store → Themes → Edit code → Sections → footer.liquid -->
<!-- Pridať snippet vyššie kdekoľvek medzi <body>...</body> -->

React / Next.js

// React / Next.js
export function BookingWidget() {
  return (
    <iframe
      src="https://app.terminuj.sk/embed/vase-meno"
      style={{ width: '100%', maxWidth: 680, height: 780, border: 0 }}
      allow="payment"
      loading="lazy"
      title="Rezervácia termínu"
    />
  );
}

Webnode / Wix / Squarespace

Pridajte blok „Embed HTML" / „Custom Code" / „Code injection" a vložte základný snippet z bodu 1. Squarespace vyžaduje Business plán pre custom HTML.

5. Bezpečnosť (CSP, X-Frame-Options)

Náš widget odosiela X-Frame-Options: SAMEORIGIN na všetkých routes okrem /embed/*. Tieto stránky majú Content-Security-Policy: frame-ancestors * — môžete ich vložiť na akúkoľvek doménu.

Ak máte na webe striktnú CSP, povoľte tento origin:

Content-Security-Policy:
  frame-src https://app.terminuj.sk;
  child-src https://app.terminuj.sk;

6. Časté problémy