So fügen Sie das Schedito-Buchungswidget zu WordPress hinzu
Sie benötigen kein Schedito-spezifisches WordPress-Plugin. Konfigurieren Sie den Buchungskalender in Schedito, öffnen Sie seinen Widget-Code und fügen Sie die drei Integrationselemente zu WordPress hinzu: das gemeinsame Stylesheet, das gemeinsame JavaScript und den kalenderspezifischen Widget-Container.
Dieser Leitfaden verwendet den nativen WordPress-Blockeditor. Dasselbe Integrationsprinzip gilt auch für Page Builder, die HTML-, Embed- oder Custom-Code-Funktionen auf Website-Ebene bereitstellen.
Bevor Sie WordPress öffnen
Ein funktionierender Schedito-Kalender
Konfigurieren Sie die Leistungen, Ressourcen und Verfügbarkeiten, die WordPress-Besucher buchen sollen, bevor Sie das Widget veröffentlichen.
Zugriff zum Bearbeiten von WordPress
Sie benötigen die Berechtigung, die Zielseite zu bearbeiten, und – wenn CSS oder JavaScript auf Website-Ebene hinzugefügt werden müssen – Zugriff auf eine geeignete Methode zur Verwaltung von Frontend-Code.
Ihr Schedito-Widget-Code
Öffnen Sie den Widget-Code im Schedito-Dashboard. Schedito stellt drei getrennt kopierbare Elemente bereit: den CSS-Link, das JavaScript-Skript und den kalenderspezifischen HTML-Widget-Container.
1. Kopieren Sie die drei Schedito-Integrationselemente
Öffnen Sie im Schedito-Dashboard den Widget-Code des Buchungskalenders. Die Integration wird bewusst in drei getrennten Elementen dargestellt:
CSS-Link — lädt die Styles des Schedito-Widgets.
JavaScript-Skript — lädt und initialisiert die Buchungsfunktion.
Widget-Container — identifiziert Organisation und öffentlichen Buchungskalender und markiert die Position, an der die Oberfläche gerendert werden soll.
Halten Sie diese drei Elemente getrennt. Stylesheet und JavaScript müssen normalerweise nur einmal geladen werden, während Sie einen oder mehrere kalenderspezifische Widget-Container überall dort platzieren können, wo Buchungen erscheinen sollen.
Die drei Elemente in Schedito
1. CSS-Link
Einmal laden
2. JavaScript-Skript
Einmal laden
3. Widget-DIV
Dort platzieren, wo dieser Kalender gerendert werden soll
2. Platzieren Sie das Widget-DIV in einem Custom-HTML-Block
Öffnen Sie die WordPress-Seite, auf der Kunden buchen sollen – zum Beispiel „Jetzt buchen“, „Termine“, „Kontakt“ oder eine leistungsspezifische Seite.
Fügen Sie einen Custom HTML-Block hinzu. Sie können auch /html in einen neuen Block eingeben, um ihn schnell zu finden.
Kopieren Sie aus dem Schedito-Dashboard nur den HTML-Widget-Container und fügen Sie ihn in den Block ein. Dies ist das kalenderspezifische Element mit Werten wie data-organization-id und data-calendar-public-id.
Duplizieren Sie den Schedito-CSS-Link und das JavaScript-Skript nicht in jedem Widget-Block. Fügen Sie diese separat als gemeinsame Frontend-Ressourcen hinzu.
3. Laden Sie Schedito-CSS und JavaScript einmal
Kehren Sie zum Widget-Code im Schedito-Dashboard zurück und kopieren Sie die beiden verbleibenden Elemente: den CSS-<link> und das JavaScript-<script>.
Dies sind gemeinsame Frontend-Ressourcen. Sie müssen normalerweise nur einmal auf einer Seite oder – häufiger – einmal für die Website-Seiten geladen werden, auf denen Schedito verwendet werden kann. Wiederholen Sie sie nicht für jedes Kalender-Widget.
Wenn Ihre WordPress-Einrichtung oder Ihr Page Builder einen globalen Custom-Code-Bereich bietet, kann dies ein geeigneter Ort für diese beiden Elemente sein. Bei einem professionell gepflegten WordPress-Theme kann ein Entwickler Stylesheet und Skript stattdessen über den normalen WordPress-Enqueue-Mechanismus laden.
Wenn Sie mehrere Schedito-Kalender auf derselben Website haben, können sie dasselbe geladene CSS und JavaScript gemeinsam verwenden. Jeder Kalender benötigt nur sein eigenes Widget-<div>.
Empfohlene WordPress-Struktur
CSS-Link — einmal
JavaScript-Skript — einmal
Custom-HTML-Block
Kalenderspezifisches Schedito-DIV
Hinweis zu WordPress-Berechtigungen und JavaScript
Neuere WordPress-Versionen erlauben Custom-HTML-Inhalte über den Blockeditor, JavaScript und anderes potenziell unsicheres Markup hängen jedoch von den Benutzerberechtigungen ab. WordPress kann nicht erlaubte Inhalte bereinigen, wenn ein Benutzer ohne die erforderlichen Rechte die Seite speichert.
Für Schedito müssen Sie ohnehin normalerweise nicht alles in den Seitenblock setzen. Lassen Sie das kalenderspezifische Widget-DIV auf der Seite und laden Sie das gemeinsame CSS und JavaScript einmal über einen geeigneten Mechanismus auf Website-Ebene.
Wenn ein Skript oder Stylesheet nach dem Speichern verschwindet, fügen Sie es nicht wiederholt in die Seite ein. Prüfen Sie Ihre WordPress-Berechtigungen und verwenden Sie die zugelassene Methode der Website zum Laden von Frontend-Ressourcen.
4. Veröffentlichen und wie ein Kunde testen
Eine Seite, die im WordPress-Editor korrekt aussieht, reicht nicht. Testen Sie die endgültige Seite, die Verfügbarkeit und das Absenden einer Buchung.
Öffentliche Seite öffnen
Testen Sie das veröffentlichte Frontend, nicht nur die Editor-Vorschau. Prüfen Sie, ob die Schedito-Oberfläche für einen normalen Besucher tatsächlich geladen wird.
Eine Buchung abschließen
Wählen Sie eine Leistung, ein Datum und eine Uhrzeit und senden Sie eine echte Testbuchung ab. Prüfen Sie die daraus entstandene Buchung in Schedito.
Responsives Layout prüfen
Testen Sie Desktop- und Mobilbreiten und prüfen Sie, dass Ihr WordPress-Theme das Buchungswidget nicht einschränkt, ausblendet oder verzerrt.
Fehlerbehebung beim WordPress-Buchungswidget
Prüfen Sie die Integration als drei unabhängige Bestandteile. Stellen Sie zuerst sicher, dass das kalenderspezifische Schedito-DIV vorhanden ist und die korrekten Organisations- und öffentlichen Kalender-IDs enthält. Prüfen Sie anschließend, ob Schedito-CSS und -JavaScript tatsächlich auf der öffentlichen Seite geladen werden.
Nutzen Sie die Entwicklerwerkzeuge des Browsers, um fehlgeschlagene CSS- oder JavaScript-Anfragen, JavaScript-Fehler, Content-Security-Einschränkungen oder durch WordPress beziehungsweise ein anderes Plugin verändertes Markup zu erkennen.
Wenn WordPress das Widget-DIV selbst entfernt, prüfen Sie das HTML-Markup und die Benutzerberechtigungen. Entfernt es ein Skript oder anderes ausführbares Markup, handelt es sich meist um ein Berechtigungs- oder Sanitization-Problem.
Die bevorzugte Schedito-Einrichtung vermeidet es, diese Skripte wiederholt in Inhalte einzubetten: Lassen Sie das Widget-DIV auf der Seite und laden Sie das gemeinsame CSS und JavaScript einmal über die zugelassene Frontend-Integrationsmethode der Website.
Die WordPress-Integration funktioniert wahrscheinlich. Prüfen Sie stattdessen Schedito: Leistung, erforderliche Ressourcen, wiederkehrende Verfügbarkeit, datumsspezifische Ausnahmen, bestehende Buchungen, Kapazität und mögliche Termine aus verbundenen externen Kalendern.
Prüfen Sie Breite, Overflow, Padding und Layout-Regeln des übergeordneten WordPress-Blocks oder Theme-Containers. Vermeiden Sie, die Buchungsoberfläche in einer unnötig schmalen Spalte mit fester Breite zu platzieren.
Wenn das Widget außerhalb dieses Containers korrekt geladen wird, wird das Problem wahrscheinlich durch das umgebende WordPress-Layout-CSS und nicht durch die Buchungskonfiguration verursacht.
Nutzen Sie die Styling-Konfiguration des Schedito-Widgets, um eine passende helle oder dunkle Darstellung zu wählen und unterstützte Farben und visuelle Eigenschaften anzupassen.
Prüfen Sie außerdem, ob Ihr WordPress-Theme allgemeine CSS-Regeln auf Buttons, Formulare oder andere Elemente anwendet, die die Buchungsoberfläche beeinträchtigen.
Leeren Sie nach Änderungen am Integrations-Markup oder an Frontend-Ressourcen die relevanten WordPress-, CDN- und Browser-Caches. JavaScript-Optimierung oder verzögertes Laden kann ebenfalls externen Frontend-Code beeinflussen. Schließen Sie daher die erforderlichen Schedito-Ressourcen aus, wenn Ihre Optimierungskonfiguration deren korrekte Ausführung verhindert.
Ihre WordPress-Website ist nur die Darstellungsschicht
Sobald das Widget funktioniert, konfigurieren Sie Leistungen, Verfügbarkeit, Kalendersynchronisierung, Kapazität und Styling weiterhin in Schedito, statt diese Regeln in WordPress neu aufzubauen.
Kostenlos startenWordPress-Buchungsübersicht
Alle Schedito-Leitfäden durchsuchen · Widget-Anpassung · Google-Kalender-Synchronisierung