Rezervačný formulár na váš web

1. Základný snippet

Skopírujte HTML kód a vložte ho kdekoľvek na váš web. Nahraďte vase-meno identifikátorom vašej prevádzky — je to časť adresy za /embed/. Celý odkaz skopírujete v nástenke: Služby → vyberte službu → Zdieľať.

<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>

Ak služba vyžaduje zálohu, platí sa na stránke rezervácie Terminuj, ktorá sa z vloženého formulára otvorí v novej karte. loading="lazy" načíta formulár, až keď k nemu návštevník posunie stránku.

1b. Variant so skriptom (automatická výška v jednom bloku)

Ak chcete formulár bez pevnej výšky (prispôsobí sa obsahu — vybraný dátum, údaje zákazníka), použite tento jeden blok. Vytvorí iframe a výšku nastavuje sám cez postMessage. Kód z bodu 3 už nepotrebujete — je 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á pevnú výšku. Variant so skriptom = o niečo viac kódu, ale formulár rastie a zmenšuje sa podľa obsahu. Oba podporujú rovnaké parametre theme/primary/font.

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. Vzhľad (téma, farba, písmo)

Pridajte parametre do adresy v src:

• theme = light | dark | auto (podľa nastavenia zariadenia; predvolene light)
• primary = farba v hex bez # (napr. B4436C) — tlačidlá a zvýraznenia
• font = Inter | system (predvolene Inter)
• service = identifikátor služby — formulár ju rovno predvyberie (takýto odkaz dáva tlačidlo Zdieľať pri službe)
• locale = sk | en | cs | hu | de | es — jazyk formulára aj rezervácie (potvrdenie a pripomienky prídu zákazníkovi v tomto jazyku); predvolene jazyk prevádzky

<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>

Bez parametra primary sa použije farba z nástenky (Nastavenia → Vzhľad a logo firmy). Bez parametra locale sa jazyk formulára riadi nastavením prevádzky (Nastavenia → Jazyk a región). Farbu zadávajte bez #.

3. Automatická výška

Formulár posiela postMessage s aktuálnou výškou pri každej zmene veľkosti (vybraný dátum, služba, údaje zákazníka). Voliteľný skript k bodu 1:

<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>

Tvar správy

Obsah správy:

{
  type: 'rezervacia:resize',
  tenantSlug: 'vase-meno',   // ktorý formulár posiela (pri viacerých na stránke)
  height: 1240                // px (document.documentElement.scrollHeight)
}

Viac formulárov na jednej stránke

Rozlíšte ich podľa tenantSlug v správe a vyberte iframe 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 skriptu má formulár pevnú výšku 780 px (posúva sa vnútri iframe). Správu posiela pri načítaní a potom pri každej zmene veľkosti stránky formulára (ResizeObserver).

4. Vloženie do redakčného systému

WordPress

// 1. Administrácia WordPress → Stránky → upraviť stránku
// 2. Pridať blok „Vlastné HTML“ (Custom HTML)
// 3. Vložiť kód z bodu 1
// 4. Publikovať

Shopify

<!-- Online Store → Themes → Edit code → Sections → footer.liquid -->
<!-- Vložiť kód z bodu 1 kamkoľ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 na vlastný HTML kód („Embed HTML“ / „Custom Code“ / „Code“) a vložte kód z bodu 1. Či ho váš balík dovoľuje, overte u poskytovateľa webu.

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

Vložiť sa dajú len stránky /embed/* — majú Content-Security-Policy: frame-ancestors *, takže fungujú na akejkoľvek doméne. Ostatné stránky (nástenka, prihlásenie, správa rezervácie) posielajú X-Frame-Options: DENY a frame-ancestors 'none' — do iframe sa vložiť nedajú.

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