So fügen Sie das Schedito-Buchungswidget zu Webflow hinzu
Webflow eignet sich besonders gut für die dreiteilige Schedito-Widget-Integration. Laden Sie das Schedito-Stylesheet einmal, das JavaScript einmal und platzieren Sie anschließend das kalenderspezifische Widget-DIV genau dort, wo die Buchungsoberfläche erscheinen soll.
Dieser Leitfaden zeigt die empfohlene Einrichtung mit Webflow Custom Code für die gemeinsamen Ressourcen und einem Code-Embed-Element für den Buchungskalender selbst.
Bevor Sie Webflow öffnen
Ein konfigurierter Schedito-Kalender
Richten Sie die Leistungen, Ressourcen und Verfügbarkeiten ein, die Kunden buchen können sollen.
Zugriff zum Bearbeiten von Webflow
Sie benötigen Zugriff auf das Webflow-Projekt und auf die Custom-Code-Funktion für die Website oder Seite.
Die drei Schedito-Elemente
Öffnen Sie den Widget-Code in Schedito und halten Sie CSS-Link, JavaScript-Skript und kalenderspezifisches HTML-DIV zum Kopieren bereit.
1. Halten Sie die drei Integrationselemente getrennt
Das Schedito-Dashboard stellt drei Teile Frontend-Code bereit:
CSS-Link — liefert die Widget-Styles.
JavaScript-Skript — initialisiert und betreibt Schedito-Widgets.
Widget-DIV — identifiziert Organisation und öffentlichen Buchungskalender und markiert die Position, an der dieser Kalender gerendert werden soll.
Webflow erlaubt uns, jedes dieser Elemente dort zu platzieren, wo es sinnvoll hingehört. Das gemeinsame CSS und JavaScript werden einmal geladen, während jede Buchungsposition ihr eigenes kalenderspezifisches DIV erhält.
Schedito-CSS-Link
Schedito-JavaScript
Kalenderspezifisches Widget-DIV
2. Fügen Sie den Schedito-CSS-Link zum Webflow-Head-Code hinzu
Kopieren Sie den CSS-<link> aus Ihrem Schedito-Dashboard.
Wenn Schedito auf mehreren Seiten verwendet werden kann, fügen Sie ihn zum Head Custom Code der Website hinzu, damit das Stylesheet websiteweit verfügbar ist.
Wenn Schedito nur auf einer Seite benötigt wird, können Sie stattdessen den Head-Custom-Code-Bereich dieser Seite verwenden.
Kopieren Sie das Stylesheet nicht in jedes einzelne Code Embed. Ein korrekt eingebundenes Stylesheet reicht aus.
3. Fügen Sie Schedito-JavaScript zum Footer-Code hinzu
Kopieren Sie das JavaScript-<script> aus dem Schedito-Dashboard.
Für die normale Schedito-Einrichtung platzieren Sie es im Footer-Code von Webflow. Dieser fügt es nach dem Seiteninhalt vor dem schließenden </body>-Tag ein.
Wählen Sie wie beim Stylesheet den richtigen Umfang: websiteweit, wenn Schedito auf der gesamten Website genutzt wird, oder seitenspezifisch, wenn Buchungen nur auf ausgewählten Seiten vorkommen.
Das Skript sollte normalerweise einmal geladen und nicht in jedem Kalender-Embed wiederholt werden.
4. Platzieren Sie das Kalender-DIV in einem Code Embed
Öffnen Sie die Seite, auf der die Buchung erscheinen soll, und fügen Sie an der passenden Stelle im Design ein Webflow-Code Embed-Element hinzu.
Kopieren Sie aus Schedito nur das kalenderspezifische HTML-Widget-DIV und fügen Sie es in den Code-Embed-Editor ein.
Das DIV enthält Werte wie data-organization-id und data-calendar-public-id. Verwenden Sie die Werte, die für den Kalender generiert wurden, den Sie tatsächlich veröffentlichen möchten.
Da das gemeinsame CSS und JavaScript bereits separat geladen werden, bleibt das Embed selbst klein und kalenderspezifisch.
Sollten die Schedito-Ressourcen websiteweit oder seitenspezifisch sein?
Verwenden Sie websiteweiten Custom Code, wenn Schedito auf mehreren Seiten, mehreren Leistungsseiten oder in wiederverwendbaren Layouts erscheint. Das gemeinsame CSS und JavaScript werden dann einmal über die globale Website-Konfiguration geladen.
Verwenden Sie seitenspezifischen Custom Code, wenn Schedito nur auf einer oder wenigen Seiten vorhanden ist und Sie die Ressourcen nicht anderswo laden möchten.
Vermeiden Sie in beiden Fällen, dasselbe Stylesheet oder JavaScript für einzelne Kalender-DIVs wiederholt hinzuzufügen.
Schedito mit Webflow CMS oder Komponenten verwenden
Webflow-Code-Embeds können dynamische Werte aus CMS-Elementen, Komponenteneigenschaften, Locale-Einstellungen und Seiteneinstellungen referenzieren.
Dadurch entstehen nützliche fortgeschrittene Muster, wenn ähnliche Buchungslayouts unterschiedliche Kalenderwerte benötigen. Ein wiederverwendbares Leistungs-Layout könnte beispielsweise später eine Kalender-ID aus strukturierten Webflow-Inhalten beziehen, statt auf jeder Seite ein völlig separates handgeschriebenes Embed zu benötigen.
Für eine normale Erstinstallation halten Sie es einfacher: Verwenden Sie das exakte DIV aus Schedito. Führen Sie dynamische Bindings erst ein, wenn Sie einen klaren Bedarf an wiederverwendbaren Inhalten haben und verstehen, wie diese Werte verwaltet werden.
Einfach starten
Standard-Einrichtung
Das exakte Kalender-DIV aus Schedito kopieren.
Fortgeschrittene wiederverwendbare Einrichtung
Webflow CMS oder Komponenteneigenschaften nutzen, um ausgewählte Werte dynamisch bereitzustellen.
5. Veröffentlichen und den vollständigen Buchungsablauf testen
Prüfen Sie, ob die Ressourcen geladen werden, der Kalender gerendert wird, die Verfügbarkeit korrekt ist und ein Kunde die Buchung tatsächlich abschließen kann.
Veröffentlichen und Seite öffnen
Testen Sie die tatsächlich veröffentlichte Website. Manche Custom-Code-Verhaltensweisen lassen sich nach der Veröffentlichung besser prüfen als nur im Designer.
Eine Buchung abschließen
Wählen Sie eine Leistung, ein Datum und eine Uhrzeit und senden Sie eine echte Testbuchung ab. Prüfen Sie das Ergebnis in Schedito.
Responsive Layouts prüfen
Testen Sie das Code Embed und die umgebenden Webflow-Container in Desktop-, Tablet- und Mobilbreiten.
Fehlerbehebung beim Webflow-Buchungswidget
Prüfen Sie alle drei Teile unabhängig voneinander: den Schedito-CSS-Link im Head-Code, das JavaScript im Footer-Code und das korrekte Kalender-DIV im Code Embed.
Prüfen Sie die Browser-Entwicklerwerkzeuge auf fehlgeschlagene Asset-Anfragen, JavaScript-Fehler oder API-Anfragen, die nicht erfolgreich abgeschlossen werden.
Webflow führt eingebettete Skripte nicht immer genau so aus, wie sie auf der veröffentlichten Website laufen. Veröffentlichen Sie das Projekt und testen Sie die tatsächliche öffentliche Seite, bevor Sie davon ausgehen, dass die Integration nicht funktioniert.
Die Webflow-Integration funktioniert wahrscheinlich. Prüfen Sie die Schedito-Konfiguration: Leistung, erforderliche Ressourcen, wiederkehrende Verfügbarkeit, datumsspezifische Ausnahmen, bestehende Buchungen, Kapazität und Termine aus verbundenen externen Kalendern.
Prüfen Sie sowohl websiteweiten als auch seitenspezifischen Custom Code. Wenn dasselbe Schedito-Skript oder Stylesheet an beiden Stellen vorhanden ist, entfernen Sie das unnötige Duplikat und behalten Sie es in dem Umfang, der zu Ihrer Website-Struktur passt.
Prüfen Sie das Code Embed selbst und seine übergeordneten Webflow-Container. Breitenbegrenzungen, Grid-Spalten, Flex-Einstellungen, Padding und Overflow-Regeln im umgebenden Design können das Widget einschränken, auch wenn Schedito korrekt reagiert.
Konfigurieren Sie die helle oder dunkle Darstellung und unterstützte Farben in Schedito. Prüfen Sie außerdem, ob allgemeines benutzerdefiniertes CSS in Webflow unbeabsichtigt Buttons, Formularfelder oder andere Widget-Elemente beeinflusst.
Webflow auf Design konzentrieren und Schedito auf Buchungen
Sobald die Integration funktioniert, verwalten Sie Leistungen, Ressourcen, Verfügbarkeit, Kapazität, Kalendersynchronisierung und Widget-Styling weiterhin in Schedito.
Kostenlos startenWebflow-Buchungsübersicht
Alle Schedito-Leitfäden durchsuchen · Widget-Anpassung · Google-Kalender-Synchronisierung