Widget einbinden

Füge das Buchungs-Widget auf einer beliebigen Website ein

Das Widget passt sich automatisch in der Höhe an den Buchungsflow an (Auto-Resize via postMessage). Auf Mobile funktioniert es vollständig responsiv mit width: 100%.

embed.js Skript

Empfohlen

Empfohlene Methode. Das Skript erstellt automatisch das iFrame und aktiviert den Auto-Resize. Einfach beide Code-Blöcke in die Zielseite einfügen.

<!-- Schritt 1: Platzhalter einfügen -->
<div id="speckmann-booking"></div>

<!-- Schritt 2: Skript einbinden (am Ende von <body>) -->
<script
  src="https://booking.speckmann-webdesign.de/embed.js"
  data-target="#speckmann-booking"
  data-url="https://booking.speckmann-webdesign.de/booking"
  data-height="650">
</script>

Direktes iFrame

Einfache Alternative ohne Skript. Feste Höhe (700px) — kein Auto-Resize. Geeignet für Seiten die keine externen Skripte erlauben.

<iframe
  src="https://booking.speckmann-webdesign.de/booking"
  width="100%"
  height="700"
  frameborder="0"
  style="border: none; border-radius: 12px; display: block;">
</iframe>

Buchungs-Widget in neuem Tab öffnen ↗