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 ueber Platzierung, Groesse 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
Copy Embed Snippet
Grab the HTML embed code from your SchedulingKit dashboard under the Embed section.
Open Webflow Designer
Open your project in the Webflow Designer. Navigate to the page where you want to add the booking widget.
Add an Embed Element
From the Add Elements panel (A key), drag the Embed element (under Components) into your desired position on the canvas.
Paste and Configure
Double-click the Embed element, paste the SchedulingKit snippet, and click Save & Close. The widget preview appears on the canvas.
Publish to Staging or Production
Click Publish and choose your staging or custom domain. The widget goes live with your Webflow site and respects all Webflow interactions and animations.
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
Wird das Widget im Webflow Designer als Vorschau angezeigt?
Die Einbettung zeigt einen Platzhalter auf der Designer-Leinwand. Um das Live-Widget zu sehen, verwenden Sie den Vorschaumodus von Webflow oder veroeffentlichen Sie auf Ihrer Staging-Domain.
Kann ich das Widget auf Webflow CMS-Sammlungsseiten verwenden?
Ja. Fuegen Sie ein Klartext-CMS-Feld fuer die Buchungsseiten-URL hinzu und referenzieren Sie es im Embed-Element ueber die dynamische Embed-Funktion von Webflow. Jedes Sammlungselement rendert sein eigenes Buchungs-Widget.
Funktioniert das Widget auf dem kostenlosen Webflow-Plan?
Das Embed-Element ist in allen Webflow-Plaenen verfuegbar, einschliesslich dem kostenlosen Starter-Plan. Die Veroeffentlichung auf einer benutzerdefinierten Domain und seitenweite Code-Injection erfordern jedoch einen kostenpflichtigen Website-Plan.
Beeintraechtigt es die Leistung der Webflow-Seite?
Nein. Das Widget-Skript laedt asynchron nach Ihrem Seiteninhalt und ist unter 30 KB gross. Es hat null Auswirkungen auf den Lighthouse-Score Ihrer Webflow-Seite.
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