Foglalási űrlap az Ön weboldalán

1. Alapkód

Másolja ki a HTML-kódot, és illessze be bárhová a weboldalán. Cserélje ki ezt: vase-meno a vállalkozása azonosítójára — ez a cím /embed/ utáni része. A teljes hivatkozást az irányítópulton másolhatja ki: Szolgáltatások → válasszon szolgáltatást → Megosztás.

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

Ha a szolgáltatáshoz előleg szükséges, azt a Terminuj foglalási oldalán kell kifizetni, amely a beágyazott űrlapból új lapon nyílik meg. A loading="lazy" csak akkor tölti be az űrlapot, amikor a látogató odagörget.

1b. Szkriptes változat (automatikus magasság egyetlen blokkban)

Ha rögzített magasság nélküli űrlapot szeretne (a tartalomhoz igazodik — kiválasztott dátum, ügyféladatok), használja ezt az egy blokkot. Létrehozza az iframe-et, és a magasságot maga állítja be postMessage segítségével. A 3. pont kódjára már nincs szüksége — benne van.

<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 (1. pont) = a legegyszerűbb, JavaScript nélkül is működik, de rögzített a magassága. Szkriptes változat = valamivel több kód, de az űrlap a tartalomhoz igazodva nő és csökken. Mindkettő ugyanazokat a theme/primary/font paramétereket támogatja.

Tipp: az egyes témákhoz kész kódokat a /temy galériában talál — kiválasztja a témát, látja az előnézetet, és kimásolja a kódot.

2. Megjelenés (téma, szín, betűtípus)

Adja hozzá a paramétereket az src címéhez:

• theme = light | dark | auto (az eszköz beállítása szerint; alapértelmezés light)
• primary = szín hex formátumban # nélkül (pl. B4436C) — gombok és kiemelések
• font = Inter | system (alapértelmezés Inter)
• service = a szolgáltatás azonosítója — az űrlap rögtön előre kiválasztja (ilyen hivatkozást ad a szolgáltatásnál a Megosztás gomb)
• locale = sk | en | cs | hu | de | es — az űrlap és a foglalás nyelve (a visszaigazolás és az emlékeztetők ezen a nyelven érkeznek az ügyfélhez); alapértelmezés a vállalkozás nyelve

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

A primary paraméter nélkül az irányítópulton beállított szín érvényes (Beállítások → Megjelenés és logó). A locale paraméter nélkül az űrlap nyelve a vállalkozás beállítását követi (Beállítások → Nyelv és régió). A színt # nélkül adja meg.

3. Automatikus magasság

Az űrlap minden méretváltozáskor (kiválasztott dátum, szolgáltatás, ügyféladatok) postMessage üzenetet küld az aktuális magassággal. Opcionális szkript az 1. ponthoz:

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

Az üzenet felépítése

Az üzenet tartalma:

{
  type: 'rezervacia:resize',
  tenantSlug: 'vase-meno',   // melyik űrlap küldi (ha több van az oldalon)
  height: 1240                // px (document.documentElement.scrollHeight)
}

Több űrlap egy oldalon

Különböztesse meg őket az üzenetben lévő tenantSlug alapján, és válassza ki az iframe-et az src szerint:

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';
});

Szkript nélkül az űrlap magassága rögzített, 780 px (az iframe-en belül görgethető). Az üzenetet betöltéskor, majd az űrlapoldal minden méretváltozásakor küldi (ResizeObserver).

4. Beillesztés tartalomkezelő rendszerbe

WordPress

// 1. WordPress adminisztráció → Oldalak → oldal szerkesztése
// 2. „Egyéni HTML” (Custom HTML) blokk hozzáadása
// 3. Az 1. pont kódjának beillesztése
// 4. Közzététel

Shopify

<!-- Online Store → Themes → Edit code → Sections → footer.liquid -->
<!-- Az 1. pont kódját illessze be bárhová a <body>...</body> közé -->

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="Időpontfoglalás"
    />
  );
}

Webnode / Wix / Squarespace

Adjon hozzá egy saját HTML-kódhoz való blokkot („Embed HTML” / „Custom Code” / „Code”), és illessze be az 1. pont kódját. Hogy a csomagja ezt engedi-e, a weboldal szolgáltatójánál ellenőrizze.

5. Biztonság (CSP, X-Frame-Options)

Csak az /embed/* oldalak ágyazhatók be — ezek Content-Security-Policy: frame-ancestors * fejlécet küldenek, így bármely domainen működnek. A többi oldal (irányítópult, bejelentkezés, foglaláskezelés) X-Frame-Options: DENY és frame-ancestors 'none' fejlécet küld — ezek nem ágyazhatók be iframe-be.

Ha a weboldalán szigorú CSP van érvényben, engedélyezze ezt az origint:

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

6. Gyakori problémák