Ein Webflow Buchungssystem richtest du ein, indem du eine Buchungsplattform wie mivo booking über das Code-Embed-Element in deine Website einbindest. Du erstellst dein Angebot, kopierst den Einbettungscode und fügst ihn an der gewünschten Stelle ein. Besucher können anschließend einen Termin oder Kursplatz auswählen und buchen.
Diese Anleitung richtet sich an Webdesigner, die Kundenwebsites um eine Terminbuchung erweitern, und an Dienstleister mit einer eigenen Webflow-Website. Als Beispiel verwenden wir ein kostenloses 30-minütiges Erstgespräch. Danach zeigen wir, worauf es bei Kursen und Workshops ankommt.
mivo booking ist eine eigenständige Buchungsplattform. Die Buchungsverwaltung findet in mivo booking statt; Webflow übernimmt die Darstellung deiner Website und des eingebetteten Buchungsbereichs.
Neben Embed-Lösungen gibt es auch Webflow-native Buchungs-Apps, die mit Formularen im Designer arbeiten. Ein externes Webflow Buchungssystem per Embed ist besonders dann sinnvoll, wenn Konto und Buchungsalltag beim Kunden liegen sollen, du Termine und Kurse in einem Tool abbildest und die Lösung nicht an einen einzelnen Website-Builder gebunden sein darf. Wenn du die Buchungsoberfläche pixelgenau wie die restliche Webflow-Seite stylen musst, kann ein natives Formular-Setup die bessere Wahl sein.
Was du brauchst, um ein Webflow Buchungssystem einzurichten
Für die Einrichtung benötigst du:
- Zugriff auf die betreffende Webflow-Website.
- Einen Webflow-Tarif, der das Code-Embed-Element freischaltet.
- Ein Konto bei mivo booking und ein buchbares Angebot.
- Optional einen Google-Kalender, den du verbinden möchtest.
- Optional Stripe und mivo booking Pro für Zahlungen während der Buchung.
Welchen Webflow-Tarif brauchst du?
Laut Webflows Dokumentation zum Code-Embed-Element ist die Funktion mit einem aktiven Site-Plan oder einem Core-, Growth-, Agency- beziehungsweise Freelancer-Workspace verfügbar.
Prüfe deshalb zuerst, ob Code Embed in deinem Projekt freigeschaltet ist. Ein kostenloses Konto bei mivo booking allein bedeutet nicht, dass auch sämtliche Webflow-Voraussetzungen kostenlos sind.
Welche Funktionen von mivo booking sind kostenlos?
Website-Einbettung, Google-Kalender-Anbindung und Buchungsbestätigungen sind bereits im kostenlosen Plan enthalten. Unbegrenzte Buchungen und Event-Typen gelten im Rahmen der Fair-Use-Richtlinie. Für Stripe-Zahlungen und das Entfernen des Brandings benötigst du Pro.
Für unser kostenloses Erstgespräch kannst du mit dem Gratisplan beginnen. Die aktuellen Tarifdetails findest du auf der Preisseite.
Webflow Buchungssystem einbinden: Schritt für Schritt
1. Deinen Termin in mivo booking erstellen
Lege zunächst fest, was Besucher buchen sollen. Für unser Beispiel erstellst du ein Angebot mit folgenden Angaben:
| Einstellung | Beispiel |
|---|---|
| Angebot | Kostenloses Erstgespräch |
| Dauer | 30 Minuten |
| Preis | Kostenlos |
| Verfügbarkeit | Deine vorgesehenen Gesprächszeiten |
| Beschreibung | Kurze Erklärung, für wen das Gespräch gedacht ist |
| Buchungsfrage | „Wobei kann ich dir helfen?“ |
Kontrolliere vor der Einbettung die öffentliche Buchungsansicht. Werden die richtigen Zeiten angezeigt? Ist verständlich, was der Termin beinhaltet? Sind nur die tatsächlich benötigten Angaben verpflichtend?
Damit prüfst du den Buchungsablauf unabhängig vom Website-Layout.
2. Den passenden Einbettungscode kopieren
Öffne die Einbettungsfunktion für das gewünschte Angebot in mivo booking und kopiere den bereitgestellten Code vollständig.
Überlege dabei, ob Besucher ein einzelnes Angebot oder deine gesamte Buchungsübersicht sehen sollen:
- Einzelnes Angebot: passend für eine Leistungsseite zum Erstgespräch.
- Buchungsübersicht: sinnvoll für eine zentrale Seite mit mehreren Angeboten.
Für unser Beispiel verwenden wir das Erstgespräch direkt auf der zugehörigen Leistungsseite. So müssen Besucher das Angebot nicht noch einmal in einer Übersicht suchen.
Nutze den von mivo booking erzeugten Code. Erfinde keine eigene Embed-Adresse und entferne keine Bestandteile, deren Funktion du nicht kennst.
3. Das Code-Embed-Element in Webflow einsetzen
Öffne die gewünschte Seite im Webflow Designer. So lässt sich ein Buchungssystem in Webflow einbinden: Wähle den Bereich aus, in dem die Webflow Terminbuchung erscheinen soll, und füge über das Add-Panel ein Code Embed ein.
Platziere es beispielsweise in einem Container unter der Leistungsbeschreibung. Öffne den Code-Editor des Elements, füge den kopierten Code ein und speichere ihn.
Verwende das ausführbare Code-Embed-Element. Ein Codeblock, der Quelltext lediglich als Beispiel anzeigt, ist dafür nicht geeignet.
Eine klare Seitenfolge für das Erstgespräch ist:
Angebot erklären → Ablauf und Dauer nennen → Termin auswählen lassen.
4. Breite, Abstände und Hintergrund einstellen
Gestalte jetzt den Bereich um die Buchung. In Webflow legst du beispielsweise die Containerbreite, Innenabstände, Überschrift und den Hintergrund der Sektion fest.
Achte auf ausreichend Platz für den Webflow Buchungskalender und das Formular. Ein enger Seitenbereich kann die Bedienung unnötig erschweren.
Die Gestaltung innerhalb der eingebetteten Buchungsoberfläche ist davon getrennt. Schriftarten oder Button-Stile deiner Webflow-Seite werden bei einer externen iframe-Einbettung nicht automatisch auf deren Inhalt übertragen. Nutze dafür die verfügbaren Einstellungen in mivo booking.
Für das Layout empfiehlt sich:
- Ein Buchungsbereich, der die verfügbare Containerbreite nutzt.
- Ausreichend Abstand zwischen Einleitung und Kalender.
- Keine unnötig niedrige feste Höhe des umgebenden Containers.
- Eine Embed-Höhe, die auch spätere Schritte im Buchungsablauf berücksichtigt.
Wenn dein Einbettungscode eine dynamische Höhe unterstützt, prüfe diese Option. Kontrolliere trotzdem jeden Buchungsschritt auf abgeschnittene Inhalte.
5. Die mobile Terminbuchung prüfen
Wechsle im Webflow Designer zu den schmaleren Ansichten und kontrolliere den Buchungsbereich zusätzlich auf einem Smartphone.
Prüfe dabei nicht nur den ersten Kalenderbildschirm:
- Sind Datum und Uhrzeit gut auswählbar?
- Bleiben Formularfelder und Schaltflächen vollständig sichtbar?
- Entsteht horizontales Scrollen?
- Wird ein späterer Buchungsschritt abgeschnitten?
- Sind die Abstände auf kleinen Bildschirmen angemessen?
Bei Darstellungsproblemen prüfst du zuerst die Breite des Embeds, seine Höhe sowie feste Höhen und Overflow-Einstellungen der umgebenden Container.
6. Auf einer Testadresse veröffentlichen
Veröffentliche die Seite zunächst auf der Webflow-Staging-Adresse, beispielsweise deiner vorhandenen webflow.io-Subdomain. So kannst du die Integration prüfen, bevor du Änderungen auf der Kunden-Domain veröffentlichst.
Webflow unterstützt die getrennte Veröffentlichung auf der Staging-Subdomain.
Einbettungen können sich im Designer, in der Vorschau und auf einer veröffentlichten Seite unterschiedlich verhalten. Entscheidend ist deshalb der vollständige Test auf der veröffentlichten Testadresse.
7. Eine vollständige Testbuchung durchführen
Öffne die Testseite in einem privaten Browserfenster und buche das Erstgespräch mit eigenen Testdaten.
Kontrolliere anschließend:
- Die Buchung erscheint im Dashboard von mivo booking.
- Datum, Uhrzeit und Zeitzone stimmen.
- Die Bestätigung erreicht die verwendete E-Mail-Adresse.
- Antworten auf Buchungsfragen wurden übernommen.
- Eine konfigurierte Kalenderanbindung verhält sich wie vorgesehen.
Räume die Testbuchung anschließend wieder auf, damit sie keine echte Verfügbarkeit blockiert. Wenn Darstellung und Ablauf stimmen, ist dein Webflow Buchungssystem bereit für die vorgesehene Domain.
Kurse und Workshops im Webflow Buchungssystem buchbar machen
Bei einem Einzeltermin reserviert ein Kunde ein Zeitfenster. Bei einem Workshop melden sich mehrere Teilnehmer für dasselbe Angebot an.
Nehmen wir als zweites Beispiel einen Workshop mit zwölf Plätzen. Dafür legst du unter anderem Datum, Dauer, Teilnehmerkapazität, Beschreibung und gegebenenfalls einen Preis fest.
Auf der Website sollte vor der Buchung deutlich werden:
- Für wen der Workshop geeignet ist.
- Wann und wo er stattfindet.
- Was im Preis enthalten ist.
- Ob ein einzelner Termin oder mehrere zusammengehörige Termine gebucht werden.
Achte besonders auf den Unterschied zwischen einer Kursreihe und einzeln buchbaren Kursterminen. Die gewählte Angebotskonfiguration muss dem entsprechen, was du auf der Website versprichst.
Teste anschließend auch die Teilnehmergrenze und gegebenenfalls die Warteliste. Das Webflow Buchungssystem folgt beim Kurs demselben Embed-Prinzip wie beim Erstgespräch.
Optional im Webflow Buchungssystem: Zahlungen und Google Kalender
Zahlungen bei der Buchung entgegennehmen
Für kostenpflichtige Termine und Kurse kannst du Stripe mit mivo booking Pro verwenden. Verbinde den Zahlungsanbieter und prüfe die Zahlungseinstellungen des jeweiligen Angebots.
Bei Kundenprojekten sollte die Zahlungsabwicklung dem Kunden zugeordnet sein. Kläre außerdem, welche Kosten durch das Buchungstool und welche durch den Zahlungsanbieter entstehen.
Prüfe einen Zahlungsablauf in einer dafür vorgesehenen Testumgebung, sofern verfügbar. Eine kostenlose Testbuchung bestätigt noch nicht, dass Checkout und Webflow Buchungssystem zusammenpassen.
Google Kalender anbinden
Verbinde bei Bedarf den vorgesehenen Google-Kalender. Kontrolliere, ob neue Buchungen im richtigen Kalender erscheinen und wie bestehende Kalendertermine bei der Verfügbarkeit berücksichtigt werden.
Ein sichtbarer Kalendereintrag allein belegt noch nicht, dass alle gewünschten Regeln zur Vermeidung von Überschneidungen richtig eingestellt sind.
Häufige Probleme beim Webflow Buchungssystem
Das Code-Embed-Element ist nicht verfügbar
Prüfe den Site- beziehungsweise Workspace-Plan und deine Berechtigungen im Projekt. Vergleiche sie mit den aktuellen Webflow-Voraussetzungen.
Im Designer erscheint nur ein Platzhalter
Das kann bei eingebettetem Code vorkommen. Prüfe die Vorschau und anschließend die veröffentlichte Testseite, bevor du den Code veränderst.
Die Buchung bleibt auch auf der veröffentlichten Seite leer
Kontrolliere, ob der Einbettungscode vollständig gespeichert wurde und die Buchungsadresse erreichbar ist. Prüfe außerdem Browserkonsole und Netzwerkanfragen auf Fehlermeldungen.
Eine direkt erreichbare Buchungsseite kann dennoch beim Einbetten Probleme verursachen. Mögliche Ursachen sind unter anderem blockierte Skripte, Einbettungsbeschränkungen oder die Konfiguration der Website.
Auf dem Smartphone wird Inhalt abgeschnitten
Prüfe Embed-Höhe, Containerhöhe und Overflow-Einstellungen. Achte darauf, dass die Lösung auch nach der Terminauswahl und beim Ausfüllen des Formulars funktioniert.
Für Webdesigner: Webflow Buchungssystem an den Kunden übergeben
Plane die Übergabe bereits bei der Einrichtung. Das Kundenkonto, der Kalender und gegebenenfalls Stripe sollten nachvollziehbar dem jeweiligen Unternehmen zugeordnet sein. Mehr zum Agency-Workflow findest du im Guide Buchungssystem für Webdesigner.
Zeige dem Kunden die wichtigsten Aufgaben direkt am eingerichteten Angebot:
- Angebote und verfügbare Zeiten bearbeiten.
- Buchungen und Teilnehmer ansehen.
- Bestätigungen und Buchungsfragen anpassen.
- Zuständigkeiten für Änderungen und Support verstehen.
Halte fest, welche Aufgaben du nach dem Website-Launch weiter übernimmst. So bleibt das Webflow Buchungssystem nach der Übergabe klar verständlich.
Weitere Anleitungen im Cluster
Wenn du dasselbe Setup in einem anderen Builder brauchst: Buchungssystem in WordPress einbinden und Elementor Buchungssystem einbinden.
Häufige Fragen zum Webflow Buchungssystem
Kann ich kostenlos eine Terminbuchung in Webflow einrichten?
mivo booking bietet einen kostenlosen Plan mit Website-Einbettung. Für das Code-Embed-Element muss dein Webflow-Projekt zusätzlich die entsprechenden Tarifvoraussetzungen erfüllen.
Brauche ich eine zusätzliche Webflow-App?
Für den hier beschriebenen Weg benötigst du ein Konto bei mivo booking und das Code-Embed-Element. Eine zusätzliche App aus dem Webflow Marketplace ist dafür nicht erforderlich.
Kann ich das Buchungssystem mit Webflow vollständig gestalten?
Du gestaltest in Webflow das umgebende Seitenlayout. Anpassungen innerhalb der externen Buchungsoberfläche erfolgen über die verfügbaren Einstellungen in mivo booking.
Kann ich Termine und Kurse auf derselben Website anbieten?
Ja. Mit einem Webflow Buchungssystem kannst du passende Angebote auf unterschiedlichen Leistungsseiten einbetten oder eine gemeinsame Buchungsübersicht verwenden.
Ist die Buchungsverwaltung mit dem Webflow CMS synchronisiert?
Eine Einbettung stellt die Buchungsoberfläche auf der Website dar. Ein Webflow Buchungssystem bedeutet damit nicht automatisch, dass Angebote oder Buchungen mit Webflow CMS Collections synchronisiert werden. Der hier beschriebene Ablauf benötigt keine solche Synchronisation.
Dein nächster Schritt mit dem Webflow Buchungssystem
Beginne mit einem klar definierten Termin oder Kurs. Erstelle das Angebot in mivo booking, füge die Einbettung auf einer Testseite ein und prüfe den gesamten Ablauf auf Desktop und Smartphone. So machst du dein Webflow Buchungssystem produktionsreif.
Sobald Auswahl, Buchung und Bestätigung funktionieren, kannst du den Buchungsbereich auf deiner Website veröffentlichen.
mivo booking kostenlos starten → Details zu Free und Pro findest du auf der Preisseite.
