Buchungsseite in Website einbetten

Deine Buchungsseite funktioniert in Univents als eigenständige öffentliche Seite. Du kannst sie aber auch direkt in deine bestehende Website einbetten, zum Beispiel auf einer Unterseite für Catering, Events oder Tastings. Den dafür nötigen iFrame-Code erzeugt Univents fertig für dich, du musst nichts selbst schreiben.

Was du vorher brauchst

Bevor du einbetten kannst, brauchst du eine fertige Buchungsseite. Falls du noch keine hast, leg sie zuerst an. Öffne dazu deine Buchungsseiten-Übersicht und klick oben rechts auf Neue Buchungsseite. Dort vergibst du einen Namen, wählst ein Design (Webshop, Anfrage oder Stepper) sowie die buchbaren Produkte und Locations und legst fest, welche Fragen deine Kunden beantworten sollen.

Damit die eingebettete Seite für deine Kunden sichtbar ist, muss sie aktiv sein. In der Übersicht erkennst du das am Status-Badge neben dem Namen: live bedeutet veröffentlicht, entwurf bedeutet noch nicht sichtbar. Klick auf das Badge, um zwischen beiden Zuständen zu wechseln. Eine Seite im Entwurfsmodus wird im iFrame nicht angezeigt.

Embed-Code abrufen

Den Einbettungscode findest du direkt in der Buchungsseiten-Übersicht. Jede Seite hat dort am rechten Rand eine Reihe von Aktions-Symbolen.

1. Öffne deine Buchungsseiten-Übersicht.
2. Such die Zeile der gewünschten Buchungsseite.
3. Klick rechts auf das Code-Symbol mit dem Tooltip Embed-Snippet kopieren.
4. Univents kopiert den fertigen iFrame-Code in deine Zwischenablage und bestätigt mit der Meldung Embed-Code kopiert.

Der kopierte Code sieht ungefähr so aus:

<iframe
  src="https://buchen.univents.app/embed/dein-workspace/deine-seite"
  width="100%"
  style="border:none;min-height:700px"
  loading="lazy"
></iframe>

Falls du nur den direkten Link statt des iFrame-Codes brauchst, nutze stattdessen das Symbol mit dem Tooltip Buchungslink kopieren.

Code in deine Website einsetzen

Jetzt fügst du den kopierten Code an der Stelle deiner Website ein, an der die Buchungsseite erscheinen soll.

1. Öffne in deinem Website-Baukasten die Seite, auf der die Buchung erscheinen soll.
2. Füge ein Element für eigenen HTML-Code ein. In WordPress heißt dieser Block oft "Individuelles HTML", in anderen Systemen "Code", "Einbetten" oder "HTML".
3. Füge den kopierten iFrame-Code in dieses Element ein.
4. Speichere und veröffentliche die Seite.

Die Breite steht im Code auf width="100%", die Buchungsseite passt sich also automatisch an deinen Inhaltsbereich an. Die min-height:700px legt die Mindesthöhe fest. Wenn deine Buchungsseite lang ist und unten abgeschnitten wirkt, erhöhe diesen Wert.

Testen und kontrollieren

Bevor du die eingebettete Seite an Kunden gibst, prüf einmal das Ergebnis.

1. Öffne die Seite deiner Website, auf der du den Code eingebaut hast.
2. Kontrollier, ob die Buchungsseite vollständig und ohne Abschneiden angezeigt wird.
3. Wenn du das Verhalten vorab in Univents prüfen willst, klick in der Übersicht auf das Symbol mit dem Tooltip Live-Vorschau öffnen, um die Seite in einem neuen Tab zu sehen.
4. Führe testweise eine Beispielanfrage durch, damit du sicher bist, dass die Buchung sauber bei dir ankommt.

Möchtest du danach noch etwas an Inhalt, Design oder Fragen ändern, klick in der Zeile der Buchungsseite auf Konfigurieren. Änderungen erscheinen automatisch auch in der bereits eingebetteten Version, du musst den iFrame-Code nicht erneut kopieren.

Häufige Fragen

Muss ich den Code nach jeder Änderung neu kopieren? Nein. Der iFrame zeigt immer den aktuellen Stand deiner Buchungsseite. Inhaltliche Änderungen über Konfigurieren sind sofort auch in der eingebetteten Version sichtbar.

Die Seite wird unten abgeschnitten, was tun? Erhöhe im eingefügten Code den Wert bei min-height:700px, zum Beispiel auf 1000px. So bekommt die Buchungsseite mehr Platz.

Bei meinen Kunden erscheint nichts im iFrame. Prüf, ob die Buchungsseite den Status live hat. Steht sie auf entwurf, wird sie nicht öffentlich angezeigt. Klick auf das Status-Badge, um sie zu aktivieren.

Wo finde ich nochmal die Anleitung? In der Übersicht gibt es pro Seite ein Buch-Symbol mit dem Tooltip Embed-Anleitung öffnen, das dich direkt hierher führt.