Buchungsformular auf Ihrer Website

1. Grundlegender Code

Kopieren Sie den HTML-Code und fügen Sie ihn an beliebiger Stelle Ihrer Website ein. Ersetzen Sie vase-meno durch die Kennung Ihres Betriebs — das ist der Teil der Adresse nach /embed/. Den vollständigen Link kopieren Sie in der Übersicht: Leistungen → Leistung auswählen → Teilen.

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

Erfordert die Leistung eine Anzahlung, wird sie auf der Buchungsseite von Terminuj bezahlt, die sich aus dem eingebetteten Formular in einem neuen Tab öffnet. loading="lazy" lädt das Formular erst, wenn der Besucher dorthin scrollt.

1b. Skript-Variante (automatische Höhe in einem Block)

Wenn Sie das Formular ohne feste Höhe möchten (es passt sich dem Inhalt an — gewähltes Datum, Kundendaten), verwenden Sie diesen einen Block. Er erzeugt das iframe und setzt die Höhe selbst per postMessage. Den Code aus Schritt 3 brauchen Sie dann nicht mehr — er ist enthalten.

<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 (Schritt 1) = am einfachsten, funktioniert auch ohne JavaScript, hat aber eine feste Höhe. Skript-Variante = etwas mehr Code, dafür wächst und schrumpft das Formular mit dem Inhalt. Beide unterstützen dieselben Parameter theme/primary/font.

Tipp: Fertige Codes für einzelne Designs finden Sie in der Galerie /temy — Design wählen, Vorschau ansehen und Code kopieren.

2. Aussehen (Design, Farbe, Schrift)

Fügen Sie die Parameter der Adresse in src hinzu:

• theme = light | dark | auto (gemäß Geräteeinstellung; Standard light)
• primary = Farbe als Hexwert ohne # (z. B. B4436C) — Schaltflächen und Hervorhebungen
• font = Inter | system (Standard Inter)
• service = Kennung der Leistung — das Formular wählt sie direkt vor (einen solchen Link liefert die Schaltfläche Teilen bei der Leistung)
• locale = sk | en | cs | hu | de | es — Sprache des Formulars und der Buchung (Bestätigung und Erinnerungen erhält der Kunde in dieser Sprache); Standard ist die Sprache des Betriebs

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

Ohne den Parameter primary wird die Farbe aus der Übersicht verwendet (Einstellungen → Erscheinungsbild und Logo). Ohne den Parameter locale richtet sich die Sprache des Formulars nach der Einstellung des Betriebs (Einstellungen → Sprache und Region). Geben Sie die Farbe ohne # an.

3. Automatische Höhe

Das Formular sendet bei jeder Größenänderung (gewähltes Datum, Leistung, Kundendaten) eine postMessage mit der aktuellen Höhe. Optionales Skript zu Schritt 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>

Aufbau der Nachricht

Inhalt der Nachricht:

{
  type: 'rezervacia:resize',
  tenantSlug: 'vase-meno',   // welches Formular sendet (bei mehreren auf der Seite)
  height: 1240                // px (document.documentElement.scrollHeight)
}

Mehrere Formulare auf einer Seite

Unterscheiden Sie sie anhand von tenantSlug in der Nachricht und wählen Sie das iframe anhand von 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';
});

Ohne Skript hat das Formular eine feste Höhe von 780 px (es scrollt innerhalb des iframe). Die Nachricht wird beim Laden und danach bei jeder Größenänderung der Formularseite gesendet (ResizeObserver).

4. Einbindung in ein Redaktionssystem

WordPress

// 1. WordPress-Verwaltung → Seiten → Seite bearbeiten
// 2. Block „Individuelles HTML“ (Custom HTML) hinzufügen
// 3. Code aus Schritt 1 einfügen
// 4. Veröffentlichen

Shopify

<!-- Online Store → Themes → Edit code → Sections → footer.liquid -->
<!-- Code aus Schritt 1 an beliebiger Stelle zwischen <body>...</body> einfügen -->

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="Termin buchen"
    />
  );
}

Webnode / Wix / Squarespace

Fügen Sie einen Block für eigenen HTML-Code hinzu („Embed HTML“ / „Custom Code“ / „Code“) und fügen Sie den Code aus Schritt 1 ein. Ob Ihr Paket das erlaubt, klären Sie bitte mit Ihrem Website-Anbieter.

5. Sicherheit (CSP, X-Frame-Options)

Einbetten lassen sich nur die Seiten /embed/* — sie senden Content-Security-Policy: frame-ancestors * und funktionieren daher auf jeder Domain. Alle anderen Seiten (Übersicht, Anmeldung, Buchungsverwaltung) senden X-Frame-Options: DENY und frame-ancestors 'none' — sie lassen sich nicht in ein iframe einbetten.

Wenn Ihre Website eine strikte CSP hat, erlauben Sie diesen Origin:

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

6. Häufige Probleme