Buchungsseite auf der eigenen Website einbetten

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.

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

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

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