Betten Sie ein Buchungs-Widget in Ihre Webflow-Seite Ein
Fuegen Sie das SchedulingKit Buchungs-Widget zu Webflow hinzu, indem Sie das Custom Code Embed Element im Webflow Designer verwenden. Volle Kontrolle über Platzierung, Größe und Styling - keine externen Plugins noetig.
Für immer kostenloser Plan • Keine Kreditkarte erforderlich
Ein Webflow-Buchungswidget ist ein einbettbarer Kalender, mit dem Besucher Termine direkt auf Ihrer Webflow-Website vereinbaren können, ohne die Seite zu verlassen. SchedulingKit ermöglicht es Ihnen, ein kostenloses Buchungswidget auf Webflow im Jahr 2026 einzubetten. Alle anzeigen Buchungs-Widget.
So fügen Sie ein Buchungs-Widget zu Webflow hinzu
Folgen Sie diesen Schritten, um das SchedulingKit-Buchungs-Widget in Ihre Webflow-Website einzubetten
Embed-Snippet kopieren
Holen Sie sich den HTML-Embed-Code von Ihrem SchedulingKit-Dashboard im Abschnitt Einbetten.
Webflow Designer öffnen
Öffnen Sie Ihr Projekt im Webflow Designer. Navigieren Sie zu der Seite, auf der Sie das Buchungs-Widget hinzufügen möchten.
Einbettungselement hinzufügen
Ziehen Sie im Panel Elemente hinzufügen (Taste A) das Einbettungselement (unter Komponenten) an die gewünschte Position auf der Leinwand.
Einfügen und konfigurieren
Doppelklicken Sie auf das Einbettungselement, fügen Sie den SchedulingKit-Snippet ein und klicken Sie auf Speichern & Schließen. Die Widget-Vorschau erscheint auf der Leinwand.
Veröffentlichen auf Staging oder Produktion
Klicken Sie auf Veröffentlichen und wählen Sie Ihre Staging- oder benutzerdefinierte Domain. Das Widget wird mit Ihrer Webflow-Website live geschaltet und respektiert alle Webflow-Interaktionen und -Animationen.
Sofort einsatzbereiter Einbettungscode für Webflow
Kopieren Sie diesen Code und fügen Sie ihn in Ihre Webflow-Website ein, um sofort ein Buchungs-Widget hinzuzufügen:
<!-- SchedulingKit Booking Widget --> <div id="schedulingkit-widget"></div> <script src="https://widget.schedulingkit.com/embed.js" data-url="https://app.schedulingkit.com/YOUR-BUSINESS" data-style="inline" data-primary-color="#4F46E5" async> </script>
Ersetzen Sie YOUR-BUSINESS durch die URL Ihrer SchedulingKit-Buchungsseite. Erstellen Sie Ihr kostenloses Konto um Ihren personalisierten Einbettungscode zu erhalten.
Webflow Widget-Funktionen
Plattformspezifische Funktionen, die das Buchungs-Widget auf Webflow reibungslos funktionieren lassen
Designer-Native Embed
The Embed element sits on the Webflow canvas like any other element, position it using flexbox, grid, or absolute positioning.
CMS Integration
Use Webflow CMS to create dynamic booking pages where each collection item embeds a different booking widget based on a CMS field.
Interactions Support
Trigger Webflow interactions and animations when the widget loads or when a booking is confirmed, creating a polished user experience.
Responsive Breakpoints
Style the embed container differently at each Webflow breakpoint, desktop, tablet, mobile landscape, and mobile portrait.
Bewährte Methoden für Webflow-Buchungswidgets
Tipps, um das Beste aus Ihrem eingebetteten Buchungs-Widget auf Webflow herauszuholen
Wrap the Embed element in a div with a set min-height to prevent Cumulative Layout Shift during loading
Use Webflow's CMS to dynamically insert different booking page URLs per collection item
Place the widget in a section with an ID anchor so CTAs elsewhere on the page can scroll to it
For a site-wide floating button, add the pop-up widget script in Project Settings → Custom Code → Footer Code
Test on all four Webflow breakpoints to ensure the widget resizes gracefully
Fragen zum Webflow-Buchungs-Widget
Buchungs-Widget für andere Plattformen
Fügen Sie noch heute ein Buchungswidget zu Webflow hinzu
Schließen Sie sich Tausenden von Unternehmen an, die Buchungswidgets auf Webflow mit SchedulingKit einbetten
Für immer kostenloser Plan • Keine Kreditkarte erforderlich