Fuegen Sie ein Buchungs-Widget zu Jeder HTML-Website Hinzu
Betten Sie das SchedulingKit Buchungs-Widget auf jeder HTML-Seite mit einem einzigen Script-Tag ein. Funktioniert auf statischen Seiten, massgeschneiderten Websites, SPA-Frameworks und jeder Plattform, die HTML unterstützt - die universelle Installationsmethode.
Für immer kostenloser Plan • Keine Kreditkarte erforderlich
Ein HTML-Buchungswidget ist ein einbettbarer Kalender, mit dem Besucher Termine direkt auf Ihrer HTML-Website vereinbaren können, ohne die Seite zu verlassen. SchedulingKit ermöglicht es Ihnen, ein kostenloses Buchungswidget auf HTML im Jahr 2026 einzubetten. Alle anzeigen Buchungs-Widget.
So fügen Sie ein Buchungs-Widget zu HTML hinzu
Folgen Sie diesen Schritten, um das SchedulingKit-Buchungs-Widget in Ihre HTML-Website einzubetten
Kopieren Sie den Einbettungscode
Holen Sie sich den HTML-Schnipsel von Ihrem SchedulingKit-Dashboard. Er enthält ein einzelnes <script>-Tag und ein <div>-Container-Element.
Öffnen Sie Ihre HTML-Datei
Öffnen Sie die HTML-Datei für die Seite, auf der Sie das Widget in Ihrem Code-Editor, VS Code, Sublime Text oder einem anderen Editor haben möchten.
Fügen Sie das Div-Element ein
Fügen Sie das <div id='schedulingkit-widget'></div>-Element dort ein, wo der Buchungskalender im Seiteninhalt angezeigt werden soll.
Fügen Sie das Script-Tag hinzu
Fügen Sie das <script>-Tag direkt vor dem schließenden </body>-Tag ein. Dies lädt das Widget asynchron nach dem Seiteninhalt.
Bereitstellen und Überprüfen
Stellen Sie Ihre aktualisierte HTML-Datei bei Ihrem Hosting-Anbieter bereit. Öffnen Sie die Seite in einem Browser und bestätigen Sie, dass das Widget geladen wird und korrekt funktioniert.
Sofort einsatzbereiter Einbettungscode für HTML
Kopieren Sie diesen Code und fügen Sie ihn in Ihre HTML-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.
HTML Widget-Funktionen
Plattformspezifische Funktionen, die das Buchungs-Widget auf HTML reibungslos funktionieren lassen
Universal Compatibility
A plain HTML embed works on any web platform, hosting provider, or framework, it's the most flexible installation method.
Framework Agnostic
Works with React, Vue, Angular, Svelte, Astro, Next.js, and any JavaScript framework. Just render the div and load the script.
CDN-Delivered Script
The widget script is served from a global CDN with edge caching, ensuring fast load times from any location worldwide.
Event API
Listen to JavaScript events like booking-confirmed or slot-selected to trigger custom logic, analytics, or redirect flows in your application.
Bewährte Methoden für HTML-Buchungswidgets
Tipps, um das Beste aus Ihrem eingebetteten Buchungs-Widget auf HTML herauszuholen
Place the <script> tag before </body> (not in <head>) for the best page load performance
Add a CSS min-height on the widget container to prevent layout shifts while the script loads
Use the data attributes on the div element to configure the widget without touching JavaScript
For SPAs, initialize the widget after your router mounts the target DOM element
Add the async attribute to the script tag if your build tool doesn't already handle it
Fragen zum HTML-Buchungs-Widget
Fügen Sie noch heute ein Buchungswidget zu HTML hinzu
Schließen Sie sich Tausenden von Unternehmen an, die Buchungswidgets auf HTML mit SchedulingKit einbetten
Für immer kostenloser Plan • Keine Kreditkarte erforderlich