Rezervační formulář na váš web

1. Základní kód

Zkopírujte HTML kód a vložte ho kamkoli na svůj web. Nahraďte vase-meno identifikátorem vaší provozovny — je to část adresy za /embed/. Celý odkaz zkopírujete na nástěnce: Služby → vyberte službu → Sdílet.

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

Pokud služba vyžaduje zálohu, platí se na stránce rezervace Terminuj, která se z vloženého formuláře otevře v nové kartě. loading="lazy" načte formulář, až když k němu návštěvník posune stránku.

1b. Varianta se skriptem (automatická výška v jednom bloku)

Pokud chcete formulář bez pevné výšky (přizpůsobí se obsahu — vybrané datum, údaje zákazníka), použijte tento jeden blok. Vytvoří iframe a výšku nastavuje sám přes postMessage. Kód z bodu 3 už nepotřebujete — je v něm obsažen.

<div id="rezervacia-widget"></div>
<script>
(function () {
  var mount = document.getElementById('rezervacia-widget');
  var f = document.createElement('iframe');
  f.src = "https://app.terminuj.com/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.com' || e.source !== f.contentWindow) return;
    if (e.data && e.data.type === 'rezervacia:resize') {
      var h = Number(e.data.height);
      if (h > 0 && h < 10000) f.style.height = Math.round(h) + 'px';
    }
  });
})();
</script>

iframe (bod 1) = nejjednodušší, funguje i bez JavaScriptu, ale má pevnou výšku. Varianta se skriptem = o něco více kódu, ale formulář roste a zmenšuje se podle obsahu. Obě podporují stejné parametry theme/primary/font.

Tip: hotové kódy pro konkrétní motivy najdete v galerii /temy — vyberete motiv, uvidíte náhled a zkopírujete kód.

2. Vzhled (motiv, barva, písmo)

Přidejte parametry do adresy v src:

• theme = light | dark | auto (podle nastavení zařízení; výchozí light)
• primary = barva v hex bez # (např. B4436C) — tlačítka a zvýraznění
• font = Inter | system (výchozí Inter)
• service = identifikátor služby — formulář ji rovnou předvybere (takový odkaz dává tlačítko Sdílet u služby)
• locale = sk | en | cs | hu | de | es — jazyk formuláře i rezervace (potvrzení a připomínky přijdou zákazníkovi v tomto jazyce); výchozí je jazyk provozovny

<iframe
  src="https://app.terminuj.com/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 parametru primary se použije barva z nástěnky (Nastavení → Vzhled a logo firmy). Bez parametru locale se jazyk formuláře řídí nastavením provozovny (Nastavení → Jazyk a region). Barvu zadávejte bez #.

3. Automatická výška

Formulář posílá postMessage s aktuální výškou při každé změně velikosti (vybrané datum, služba, údaje zákazníka). Volitelný skript k bodu 1:

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

Tvar zprávy

Obsah zprávy:

{
  type: 'rezervacia:resize',
  tenantSlug: 'vase-meno',   // který formulář posílá (při více formulářích na stránce)
  height: 1240                // px (document.documentElement.scrollHeight)
}

Více formulářů na jedné stránce

Rozlište je podle tenantSlug ve zprávě a vyberte iframe podle src:

window.addEventListener('message', (event) => {
  if (event.origin !== 'https://app.terminuj.com') 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ář pevnou výšku 780 px (posouvá se uvnitř iframe). Zprávu posílá při načtení a potom při každé změně velikosti stránky formuláře (ResizeObserver).

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

WordPress

// 1. Administrace WordPress → Stránky → upravit stránku
// 2. Přidat blok „Vlastní HTML“ (Custom HTML)
// 3. Vložit kód z bodu 1
// 4. Publikovat

Shopify

<!-- Online Store → Themes → Edit code → Sections → footer.liquid -->
<!-- Vložit kód z bodu 1 kamkoli mezi <body>...</body> -->

React / Next.js

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

Webnode / Wix / Squarespace

Přidejte blok pro vlastní HTML kód („Embed HTML“ / „Custom Code“ / „Code“) a vložte kód z bodu 1. Zda to váš tarif umožňuje, ověřte u poskytovatele webu.

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

Vložit lze jen stránky /embed/* — mají Content-Security-Policy: frame-ancestors *, takže fungují na jakékoli doméně. Ostatní stránky (nástěnka, přihlášení, správa rezervace) posílají X-Frame-Options: DENY a frame-ancestors 'none' — do iframe je vložit nelze.

Pokud máte na webu striktní CSP, povolte tento origin:

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

6. Časté problémy