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 unterstuetzt - 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
Copy the Embed Code
Get the HTML snippet from your SchedulingKit dashboard. It includes a single <script> tag and a <div> container element.
Open Your HTML File
Open the HTML file for the page where you want the widget in your code editor — VS Code, Sublime Text, or any editor.
Paste the Div Element
Add the <div id='schedulingkit-widget'></div> element where you want the booking calendar to render in your page body.
Add the Script Tag
Paste the <script> tag just before the closing </body> tag. This loads the widget asynchronously after your page content.
Deploy and Verify
Deploy your updated HTML file to your hosting provider. Open the page in a browser and confirm the widget loads and functions correctly.
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
Funktioniert die Einbettung auf statischen HTML-Seiten?
Ja. Das Widget benoetigt nur ein <div>-Element und ein <script>-Tag. Kein serverseitiges Rendering, keine Datenbanken oder Build-Tools erforderlich. Es funktioniert auf statischen HTML-Dateien, die ueberall gehostet werden - GitHub Pages, Netlify, Vercel, S3 oder ein traditioneller Webserver.
Kann ich das Widget mit React, Vue oder Angular verwenden?
Absolut. Rendern Sie den Container-Div in Ihrem Komponenten-Template und laden Sie das Skript in einem useEffect-Hook (React), mounted-Lifecycle (Vue) oder ngAfterViewInit (Angular). Das Widget verbindet sich mit dem DOM-Element unabhaengig davon, wie es gerendert wurde.
Unterstuetzt das Widget Content Security Policy (CSP)?
Ja. Fuegen Sie die SchedulingKit CDN-Domain zu Ihren script-src und connect-src CSP-Direktiven hinzu. Die detaillierte CSP-Konfiguration ist in der SchedulingKit-Dokumentation verfuegbar.
Kann ich das Widget-Skript selbst hosten?
Wir empfehlen die Verwendung des CDN-gehosteten Skripts fuer automatische Updates und optimales Caching. Das Skript kann jedoch heruntergeladen und selbst gehostet werden, wenn Ihre Sicherheitsrichtlinie dies erfordert.
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