So fügen Sie das Schedito-Buchungswidget zu einer individuellen Website hinzu
Eine individuell entwickelte Website kann Schedito direkt über drei Frontend-Elemente verwenden: einen gemeinsamen CSS-Link, ein gemeinsames JavaScript-Skript und ein kalenderspezifisches HTML-DIV.
Laden Sie CSS und JavaScript einmal im passenden Anwendungs- oder Seitenumfang und platzieren Sie anschließend ein Schedito-Widget-DIV überall dort, wo ein Buchungskalender gerendert werden soll.
Bevor Sie Ihre Website bearbeiten
Ein konfigurierter Schedito-Kalender
Konfigurieren Sie die Leistungen, Ressourcen und Verfügbarkeiten, die Kunden buchen können sollen.
Zugriff auf Ihren Frontend-Code
Sie müssen Stylesheet, JavaScript und HTML-Markup zur Website oder Anwendung hinzufügen können.
Die drei Schedito-Snippets
Öffnen Sie den Integrationsbereich in Schedito und halten Sie den aktuellen CSS-Link, das JavaScript-Skript und das kalenderspezifische DIV zum Kopieren bereit.
1. Verstehen Sie die dreiteilige Integration
Das Schedito-Dashboard stellt drei unabhängige Elemente bereit:
CSS-Link — liefert das Widget-Styling.
JavaScript-Skript — initialisiert und betreibt Schedito-Widgets.
Widget-DIV — identifiziert Organisation und öffentlichen Buchungskalender und definiert die Renderposition.
CSS und JavaScript sind gemeinsame Ressourcen. Das DIV ist spezifisch für den angezeigten Kalender.
Schedito-CSS — einmal
Kalenderspezifisches DIV
Schedito-JavaScript — einmal
2. Laden Sie das Schedito-Stylesheet einmal
Kopieren Sie den CSS-<link> aus Ihrem Schedito-Dashboard und fügen Sie ihn dem Dokument-<head> oder der normalen Stylesheet-Ladeschicht Ihrer Anwendung hinzu.
Wenn die gesamte Website Schedito-Widgets enthalten kann, laden Sie ihn global. Wenn Buchungen nur in einem eigenen Bundle oder einer Route existieren, begrenzen Sie den Umfang entsprechend.
Fügen Sie nicht für jedes Kalender-DIV eine neue Kopie desselben Stylesheets hinzu.
3. Platzieren Sie das kalenderspezifische Widget-DIV
Kopieren Sie das HTML-DIV des Kalenders, den Sie veröffentlichen möchten, und setzen Sie es in die Vorlage, Komponente oder Seite, auf der die Buchungsoberfläche erscheinen soll.
Das Markup enthält Werte wie data-organization-id und data-calendar-public-id. Verwenden Sie genau die Werte, die Schedito für diesen Kalender generiert hat.
Bei Bedarf können Sie auch unterstützte optionale Attribute wie die Widget-Sprache verwenden.
Kalenderposition
<div class="schedito-widget"
data-organization-id="..."
data-calendar-public-id="...">
</div>Verwenden Sie die exakten Werte aus Ihrem Schedito-Dashboard.
4. Laden Sie Schedito-JavaScript einmal
Kopieren Sie das aktuelle <script>-Element aus Schedito und fügen Sie es zu Ihren normalen Frontend-Skripten hinzu, typischerweise am Ende des Dokuments vor </body>.
Wenn mehrere Kalender auf derselben Seite oder in der Anwendung vorhanden sind, teilen sie normalerweise dieses eine Skript.
Vermeiden Sie identische Script-Tags neben jedem Widget-DIV.
Mehrere Schedito-Kalender verwenden
Laden Sie das gemeinsame CSS und JavaScript einmal und fügen Sie anschließend für jeden Kalender oder jede Buchungsposition ein anderes Widget-DIV hinzu.
Das funktioniert unabhängig davon, ob mehrere Kalender auf einer Seite oder unterschiedliche Kalender auf getrennten Seiten erscheinen.
Halten Sie Organisations- und Kalender-IDs pro DIV spezifisch. Duplizieren Sie die gemeinsamen Asset-Tags nicht unnötig.
Gemeinsam
Schedito-JavaScript
Pro Kalender
Kalender B → DIV B
Kalender C → DIV C
Schedito in dynamischen oder Single-Page-Frontends verwenden
Wenn Ihre Anwendung das Schedito-DIV als Teil des initialen HTML-Dokuments rendert, ist die Standardintegration normalerweise ausreichend.
Wenn der Widget-Container später durch clientseitiges Routing, Hydration oder einen anderen dynamischen Rendering-Mechanismus eingefügt wird, testen Sie, ob die Schedito-Initialisierung ausgeführt wird, nachdem der Container vorhanden ist.
Gehen Sie nicht davon aus, dass das wiederholte Einfügen des Schedito-Skripts die richtige Lösung ist. Laden Sie das gemeinsame Skript einmal und prüfen Sie das Initialisierungsverhalten der aktuellen Widget-Version im Lebenszyklus Ihrer Anwendung.
5. Den vollständigen Buchungsablauf testen
Prüfen Sie Rendering, Verfügbarkeit, Buchungserstellung und responsives Verhalten – nicht nur, ob das JavaScript geladen wurde.
Öffentliche Seite laden
Prüfen Sie, ob Stylesheet und Skript erfolgreich geladen werden und ob der Kalender das Widget-DIV auf der tatsächlichen öffentlichen Website ersetzt.
Testbuchung abschließen
Wählen Sie eine Leistung, ein Datum und eine Uhrzeit und schließen Sie eine echte Testbuchung ab. Prüfen Sie den daraus entstandenen Datensatz in Schedito.
Responsive Container prüfen
Testen Sie das übergeordnete Layout in Desktop-, Tablet- und Mobilbreiten. Stellen Sie sicher, dass Ihr eigenes CSS das Widget nicht unnötig einschränkt.
Fehlerbehebung beim Buchungswidget für individuelle Websites
Prüfen Sie alle drei Elemente unabhängig voneinander: das Schedito-Stylesheet, das JavaScript und das kalenderspezifische DIV.
Nutzen Sie die Entwicklerwerkzeuge des Browsers, um fehlgeschlagene Asset-Anfragen, JavaScript-Fehler und fehlgeschlagene API-Aufrufe zu erkennen.
Prüfen Sie die Werte data-organization-id und data-calendar-public-id anhand des aktuellen Snippets in Schedito.
Prüfen Sie gemeinsame Vorlagen, Bundles und einzelne Komponenten. Lassen Sie die gemeinsamen Ressourcen in einem passenden Umfang und entfernen Sie doppelte Einbindungen.
Die Frontend-Integration funktioniert wahrscheinlich. Prüfen Sie die Schedito-Konfiguration: Leistung, erforderliche Ressourcen, wiederkehrende Verfügbarkeit, Ausnahmen, bestehende Buchungen, Kapazität und verbundene externe Kalender.
Prüfen Sie Ihre eigenen übergeordneten Container, Grid- oder Flex-Regeln, max-width, Padding und Overflow-Einstellungen. Das umgebende Anwendungslayout kann ein ansonsten responsives Widget einschränken.
Ihre Anwendung fügt das Widget-DIV möglicherweise erst nach der Schedito-Initialisierung ein. Prüfen Sie, wann der Container in den DOM gelangt und wie die Widget-Initialisierung im Frontend-Lebenszyklus ausgelöst werden sollte.
Entwickeln Sie Ihre Anwendung weiter. Schedito verwaltet die Buchung.
Sobald das Widget integriert ist, verwalten Sie Leistungen, Ressourcen, Verfügbarkeit, Kapazität, Kalendersynchronisierung und Widget-Styling weiterhin in Schedito.
Kostenlos startenÜbersicht: Buchungen für individuelle Websites
Alle Schedito-Leitfäden durchsuchen · Widget-Anpassung · Google-Kalender-Synchronisierung