Buchungsseite auf der eigenen Website einbetten

🟢Beginner 5 min read

So integrieren Sie Ihre FlowDule-Buchungsseite per iframe oder Widget ganz einfach auf Ihrer eigenen Website.

Ihre Kunden können direkt auf Ihrer eigenen Website buchen - ohne sie zu verlassen. Sie können auch Ihre Events, Ihren Webshop oder den Gutscheinverkauf einbetten. FlowDule bietet zwei einfache Wege zur Integration.

Bevor Sie starten

Sie benötigen Ihren Buchungs-Slug - das ist der Teil Ihrer Buchungsadresse vor .flowdule.com. Ist Ihre Buchungsseite z. B. klinik-nord.flowdule.com, lautet Ihr Slug klinik-nord.

Sie finden Ihren Slug unter Einstellungen → Online-Buchung in der FlowDule-App.

---

Möglichkeit 1: Direktes iframe

Die einfachste Methode. Kopieren Sie den folgenden HTML-Code und fügen Sie ihn dort ein, wo das Buchungsformular auf Ihrer Website erscheinen soll.

<iframe
  src="https://klinik-nord.flowdule.com?embed=true"
  width="100%"
  height="700"
  frameborder="0"
  style="border: none; border-radius: 8px;"
  allow="payment"
  title="Termin buchen"
></iframe>

Vorteile:

• Funktioniert in allen CMS-Systemen (WordPress, Wix, Squarespace, Webflow u. a.)
• Kein JavaScript erforderlich
• Volle Kontrolle über Platzierung und Größe

Tipps:

• Erhöhen Sie den height-Wert, wenn Inhalte abgeschnitten werden. Wir empfehlen mindestens 700.
• Ein reines iframe hat eine feste Höhe. Möchten Sie automatische Höhenanpassung, nutzen Sie das Widget-Script (Möglichkeit 2) - oder hören Sie selbst auf das flowdule:resize-Event, wie unten unter “Fortgeschritten” beschrieben.

---

Möglichkeit 2: FlowDule Widget (empfohlen)

Unser Widget-Script erledigt alles automatisch - Erstellen des iframes, automatische Höhenanpassung und optional ein “Termin buchen”-Button mit Pop-up.

Das Script liegt auf Ihrer eigenen Buchungsadresse, src beginnt also immer mit Ihrem Slug: https://klinik-nord.flowdule.com/widget.js.

Inline-Ansicht

Das Buchungsformular wird direkt auf der Seite angezeigt:

<div id="flowdule-booking"></div>
<script
  src="https://klinik-nord.flowdule.com/widget.js"
  data-slug="klinik-nord"
  data-target="flowdule-booking"
></script>

Pop-up-Ansicht (Modal)

Ein Button, der das Buchungsformular in einem Overlay öffnet:

<script
  src="https://klinik-nord.flowdule.com/widget.js"
  data-slug="klinik-nord"
  data-mode="modal"
  data-button-text="Termin buchen"
  data-button-color="#4A7C59"
></script>

Der Button wird automatisch dort eingefügt, wo Sie das Script-Tag platzieren.

---

Wählen Sie, was das Widget anzeigt

Mit data-view bestimmen Sie, welcher Teil Ihrer FlowDule-Seite eingebettet wird. Das Widget bleibt im gewählten Bereich, sodass Besucher innerhalb des iframes nicht zu Ihren anderen Modulen weiternavigieren können.

data-view	Zeigt
booking (Standard)	Den Buchungsablauf: Standort, Leistung, Zeit und Bestätigung
events	Ihre Eventliste - oder ein bestimmtes Event mit data-event-id
shop	Ihren Webshop mit Produkten, Warenkorb und Kasse
giftcard	Den Gutscheinkauf

Lassen Sie data-view weg, verhält sich das Widget wie bisher: Es zeigt den Buchungsablauf.

Beispiel 1: Buchung, eingebettet auf der Seite

Die kleinstmögliche Einrichtung:

<script
  src="https://klinik-nord.flowdule.com/widget.js"
  data-slug="klinik-nord"
></script>

Beispiel 2: Webshop im dunklen Theme

<script
  src="https://klinik-nord.flowdule.com/widget.js"
  data-slug="klinik-nord"
  data-view="shop"
  data-theme="dark"
></script>

Beispiel 3: Ein bestimmtes Event als Button

Der Button öffnet das Event in einem Overlay - ideal für einen “Ticket kaufen”-Button neben Ihrer eigenen Ankündigung:

<script
  src="https://klinik-nord.flowdule.com/widget.js"
  data-slug="klinik-nord"
  data-view="events"
  data-event-id="3f9c1b8e-5d2a-4f7c-9a31-6b0e8c2d4a15"
  data-mode="modal"
  data-button-text="Ticket kaufen"
></script>

Beispiel 4: Gutscheine

<script
  src="https://klinik-nord.flowdule.com/widget.js"
  data-slug="klinik-nord"
  data-view="giftcard"
></script>

An einer bestimmten Stelle im Buchungsablauf starten

Haben Sie mehrere Standorte, können Sie die Standortwahl überspringen und eine bestimmte Leistung vorauswählen:

<script
  src="https://klinik-nord.flowdule.com/widget.js"
  data-slug="klinik-nord"
  data-view="booking"
  data-location-id="a41f0d92-77c5-4b1e-8f60-2c9e5a7d3b84"
  data-service-id="d7b3e610-9c48-42aa-b1f5-0e83c6d21947"
></script>

data-service-id erfordert data-location-id, weil Leistungen zu einem Standort gehören.

Sie können mehrere Widgets auf derselben Seite haben - z. B. Buchung oben und Webshop weiter unten. Geben Sie jedem Widget sein eigenes data-target-Element.

---

Widget-Einstellungen

Attribut	Erforderlich	Standard	Beschreibung
data-slug	Ja	-	Ihr Buchungs-Slug
data-view	Nein	booking	Was angezeigt wird: booking, events, shop oder giftcard
data-event-id	Nein	-	Öffnet ein bestimmtes Event (erfordert data-view="events")
data-location-id	Nein	-	Startet direkt bei einem Standort (erfordert data-view="booking")
data-service-id	Nein	-	Wählt eine Leistung vor (erfordert data-location-id)
data-theme	Nein	auto	light, dark oder auto (folgt der Systemeinstellung des Besuchers)
data-locale	Nein	Sprache der Kette	Sprache: da, en oder de. Ohne Angabe wird Ihre eigene Sprache in FlowDule verwendet
data-target	Nein	Automatisch	ID des HTML-Elements, in dem der Inhalt erscheinen soll
data-mode	Nein	inline	inline (direkt) oder modal (Pop-up)
data-button-text	Nein	”Book en tid”	Buttontext (nur Modal-Ansicht)
data-button-color	Nein	#2D5A5C	Buttonfarbe (nur Modal-Ansicht)
data-show-map	Nein	Ausgeblendet	true zeigt eine Karte der Standorte
data-show-contact	Nein	Ausgeblendet	true zeigt den Kontaktlink, der in der eingebetteten Ansicht sonst ausgeblendet ist
data-background	Nein	transparent	surface gibt dem Widget einen eigenen Hintergrund

---

So geht es in WordPress

Mit Elementor

1. Fügen Sie ein HTML-Widget dort ein, wo die Buchung erscheinen soll
2. Fügen Sie den iframe- oder Widget-Code ein
3. Speichern und Vorschau ansehen

Mit dem WordPress Block Editor (Gutenberg)

1. Fügen Sie einen Custom HTML-Block hinzu
2. Fügen Sie den Code ein
3. Wechseln Sie zur Vorschau, um das Ergebnis zu sehen

Mit einem WordPress-Theme

Fügen Sie den Code in Ihre Template-Datei ein (z. B. page-booking.php), dort wo das Formular erscheinen soll.

---

So geht es in anderen CMS-Systemen

Wix

1. Öffnen Sie Ihre Seite im Wix-Editor
2. Klicken Sie auf Hinzufügen → Embed Code → Custom Element oder HTML iframe
3. Fügen Sie den Code ein

Squarespace

1. Bearbeiten Sie die gewünschte Seite
2. Fügen Sie einen Code Block hinzu
3. Fügen Sie den Code ein und speichern Sie

Webflow

1. Ziehen Sie eine Embed-Komponente auf Ihre Seite
2. Fügen Sie den Code ein
3. Veröffentlichen Sie Ihre Seite

---

Fortgeschritten: Auf Buchungs-Events hören

Wenn Sie darauf reagieren möchten, dass ein Kunde eine Buchung abgeschlossen hat (z. B. für Tracking oder eine Dankesnachricht), können Sie auf postMessage-Events hören:

<script>
  window.addEventListener("message", function (event) {
    // Sicherstellen, dass die Nachricht von Ihrer Buchungsadresse kommt
    if (event.origin !== "https://klinik-nord.flowdule.com") return;

    if (event.data.type === "flowdule:booked") {
      // Der Kunde hat gebucht!
      console.log("Buchung abgeschlossen:", event.data.bookingId);
      console.log("Bestätigungscode:", event.data.confirmationCode);
    }
  });
</script>

Alle verfügbaren Events

Event	Daten	Wann
flowdule:ready	—	Das Buchungsformular ist geladen
flowdule:resize	{ height }	Der Inhalt hat seine Höhe geändert
flowdule:navigate	{ path, step }	Der Kunde wechselt den Schritt (1–4)
flowdule:booked	{ bookingId, confirmationCode }	Buchung abgeschlossen

---

Fehlerbehebung

Buchung wird nicht angezeigt?

• Prüfen Sie, ob Ihr Slug korrekt ist
• Prüfen Sie, ob die Online-Buchung unter Einstellungen → Online-Buchung aktiviert ist

Events, Webshop oder Gutscheine werden nicht angezeigt?

• Prüfen Sie, ob das Modul für Ihre Kette aktiviert ist - das Widget kann nur Module anzeigen, die Sie nutzen
• Prüfen Sie, ob data-view genau events, shop oder giftcard geschrieben ist
• Bei data-event-id muss das Event öffentlich und noch nicht vorbei sein

Das Widget hat das falsche Theme oder die falsche Sprache?

• data-theme="auto" folgt der Systemeinstellung des Besuchers. Setzen Sie light oder dark, um es festzulegen
• Lassen Sie data-locale weg, wenn das Widget die Sprache der Kette verwenden soll

Das iframe ist zu klein?

• Erhöhen Sie den height-Wert in Ihrem iframe-Code
• Nutzen Sie stattdessen das Widget-Script — es passt die Höhe automatisch an

Die Buchung funktioniert, sieht aber seltsam aus?

• Stellen Sie sicher, dass Ihre Seite das iframe-Styling nicht mit globalem CSS überschreibt
• Fügen Sie dem iframe style="border: none;" hinzu