So fügen Sie das Schedito-Buchungswidget zu Wix hinzu
Sie können Schedito zu einer bestehenden Wix-Website hinzufügen, ohne Ihre Leistungen, Verfügbarkeiten oder Buchungen in Wix zu verlagern. Die einfachste Wix-Integration nutzt ein Embed-HTML-Element, das die drei von Ihrem Dashboard bereitgestellten Schedito-Widget-Elemente enthält.
Wix behandelt eingebettetes HTML anders als eine normale Website: Der Code läuft in einem isolierten iFrame. Dieser Leitfaden erklärt den Wix-spezifischen Unterschied und zeigt, wie Sie Schedito integrieren, ohne ihn mit der normalen Integration auf Website-Ebene zu verwechseln, wie sie etwa bei WordPress verwendet wird.
Bevor Sie den Wix-Editor öffnen
Ein konfigurierter Schedito-Kalender
Konfigurieren Sie die Leistungen, Ressourcen und Verfügbarkeiten, die Wix-Besucher buchen sollen, bevor Sie das Widget einbetten.
Zugriff auf Ihren Wix-Editor
Sie benötigen die Berechtigung, die Seite zu bearbeiten, auf der die Buchungsoberfläche erscheinen soll, und ein HTML-Embed-Element hinzuzufügen.
Die drei Schedito-Codeelemente
Öffnen Sie den Widget-Code in Schedito. Halten Sie den CSS-Link, das JavaScript-Skript und das kalenderspezifische Widget-DIV zum Kopieren bereit.
1. Verstehen Sie, warum Wix anders ist
Auf einer konventionellen Website empfehlen wir für Schedito, CSS und JavaScript einmal zu laden und anschließend kalenderspezifische Widget-DIVs dort zu platzieren, wo sie benötigt werden.
Das standardmäßige Wix-Embed HTML-Element verhält sich anders. Wix setzt den eingebetteten Code in einen sandboxed iFrame. Code, der auf der umgebenden Wix-Seite geladen wird, wird nicht automatisch Teil dieses iFrames, und Code innerhalb des iFrames kann nicht direkt auf den Rest der Seite zugreifen.
Deshalb ist die einfachste Wix-Installation eine bewusste Ausnahme: CSS-Link, JavaScript-Skript und Widget-DIV müssen alle im selben eingebetteten iFrame vorhanden sein.
Normale Website-Integration
JavaScript — einmal
Widget-DIV — wo benötigt
Wix Embed HTML
CSS-Link
JavaScript-Skript
Kalenderspezifisches Widget-DIV
2. Fügen Sie der Wix-Seite ein HTML-Embed-Element hinzu
Öffnen Sie die Wix-Seite, auf der Kunden buchen sollen – zum Beispiel eine Buchungsseite, Leistungsseite, Beratungsseite oder Veranstaltungsseite.
Fügen Sie mit dem Wix-Editor ein HTML- oder Code-Embed-Element hinzu. Wix Editor und Wix Studio verwenden leicht unterschiedliche Bezeichnungen, beide bieten jedoch ein Element zum Einbetten externen HTML-Codes.
Positionieren Sie das Element dort, wo die Buchungsoberfläche erscheinen soll, und geben Sie ihm ausreichend horizontalen und vertikalen Platz für den Kalender.
3. Fügen Sie die drei Schedito-Elemente in das Embed ein
Öffnen Sie den Widget-Code im Schedito-Dashboard. Kopieren Sie CSS-Link, JavaScript-Skript und HTML-Widget-DIV in das Wix-Embed-Codefeld.
Eine praktische Reihenfolge ist:
1. CSS-Link
2. Kalenderspezifisches Widget-DIV
3. JavaScript-Skript
Verwenden Sie genau die aktuellen Snippets aus Ihrem Schedito-Dashboard. Ersetzen Sie Organisations-ID, öffentliche Kalender-ID oder Asset-URLs nicht durch Werte aus einem anderen Kalender oder einer älteren Anleitung.
Diese Wiederholung von CSS und JavaScript ist spezifisch für die iFrame-basierte Wix-Integration. Sie ist nicht unsere allgemeine Empfehlung für konventionelle Websites.
Im Wix-Embed-HTML-Element
Geben Sie dem Buchungs-iFrame genügend Platz
Das Wix-HTML-Element hat eigene Abmessungen. Das Buchungswidget kann auf die innerhalb dieses Elements verfügbare Breite reagieren, aber die umgebende Wix-Seite bestimmt weiterhin die Gesamtgröße des iFrames.
Machen Sie das Element breit genug für Ihr Seitenlayout und hoch genug für den vollständigen Buchungsablauf. Ist es zu niedrig, können spätere Schritte des Kalenders abgeschnitten erscheinen oder Scrollen innerhalb des iFrames erfordern.
Beachten Sie außerdem, dass der iFrame visuell isoliert ist. CSS Ihrer Wix-Website stylt die Schedito-Inhalte darin nicht automatisch. Verwenden Sie stattdessen Scheditos eigenes helles oder dunkles Theme und die Widget-Anpassungseinstellungen.
Fortgeschrittene Wix-Integrationen: Custom Elements
Wix unterstützt auch Custom Elements auf Basis standardisierter Web Components. Sie können einen stärker integrierten Ansatz als der gewöhnliche HTML-iFrame bieten und sind nützlich, wenn eine engere Seitenintegration oder wiederverwendbare Komponenten erforderlich sind.
Schedito benötigt oder stellt derzeit kein eigenes Wix Custom Element für die in diesem Leitfaden beschriebene Standardinstallation bereit. Dessen Entwicklung gehört daher zu einer fortgeschrittenen Entwickler-Integration und nicht zur normalen Copy-and-Paste-Einrichtung.
Wenn Sie viele Schedito-Widgets auf einer Wix-Website benötigen oder tieferes Wix-spezifisches Verhalten wünschen, kann ein wiederverwendbarer Custom-Element-Wrapper sinnvoll sein.
Welchen Weg sollte ich wählen?
Ein oder wenige Buchungswidgets
Verwenden Sie Embed HTML. Das ist der einfachste Ansatz.
Fortgeschrittene Integration oder viele wiederverwendbare Widgets
Erwägen Sie eine von einem Entwickler erstellte Wix-Custom-Element-Integration.
4. Veröffentlichen und den vollständigen Buchungsablauf testen
Prüfen Sie das Widget selbst, die iFrame-Abmessungen und die daraus entstehende Buchung – nicht nur, ob auf der Seite ein leerer Kasten erscheint.
Veröffentlichte Website testen
Testen Sie die veröffentlichte Wix-Seite, statt sich nur auf Editor oder Vorschau zu verlassen. Prüfen Sie, ob das Schedito-Widget vollständig geladen wird.
Eine echte Testbuchung abschließen
Wählen Sie eine Leistung, ein Datum und eine Uhrzeit und schließen Sie den Vorgang ab. Prüfen Sie die daraus entstandene Buchung in Ihrem Schedito-Dashboard.
Desktop und Mobilgeräte prüfen
Prüfen Sie sowohl das Widget-Layout als auch die Abmessungen des Wix-Embed-Elements an den responsiven Breakpoints Ihrer Website.
Fehlerbehebung beim Wix-Buchungswidget
Prüfen Sie alle drei Elemente im Wix-Embed-Code: den aktuellen Schedito-CSS-Link, das JavaScript-Skript und das kalenderspezifische Widget-DIV.
Prüfen Sie Organisations-ID und öffentliche Kalender-ID und kontrollieren Sie die Browser-Entwicklerwerkzeuge auf fehlgeschlagene Asset- oder API-Anfragen.
Das ist zu erwarten, wenn sich das DIV in einem normalen Wix-HTML-Embed befindet. Das Embed läuft in seinem eigenen iFrame, während Wix Custom Code in der umgebenden Seite ausgeführt wird. Die beiden Dokumente sind voneinander isoliert.
Für die einfache iFrame-Integration setzen Sie CSS-Link, JavaScript-Skript und Widget-DIV gemeinsam in das Embed selbst.
Erhöhen Sie die Höhe des Wix-HTML-Embed-Elements. Das übergeordnete Wix-Layout steuert die Abmessungen des iFrames, sodass auch ein korrekt gerendertes Schedito-Widget abgeschnitten werden kann, wenn sein Container zu niedrig ist.
Die Wix-Integration funktioniert wahrscheinlich. Prüfen Sie die Schedito-Konfiguration: Leistung, erforderliche Ressourcen, wiederkehrende Verfügbarkeit, Ausnahmen, bestehende Buchungen, Kapazität und Termine aus verbundenen externen Kalendern.
Das ist bei einem HTML-iFrame zu erwarten. Das eingebettete Schedito-Dokument ist von den Styles der übergeordneten Wix-Seite isoliert.
Konfigurieren Sie das helle oder dunkle Theme, Farben und andere unterstützte visuelle Eigenschaften direkt in Schedito.
Prüfen Sie beide Seiten der Integration: Schedito reagiert auf die innerhalb des iFrames verfügbare Breite, während Wix Breite und Höhe des Embed-Elements steuert. Passen Sie das Wix-Element am relevanten responsiven Breakpoint an und testen Sie die veröffentlichte Website erneut.
Wix auf Ihre Website konzentrieren und Schedito auf Buchungen
Sobald das Widget funktioniert, verwalten Sie Leistungen, Ressourcen, Verfügbarkeit, Kapazität, Kalendersynchronisierung und Widget-Styling weiterhin in Schedito.
Kostenlos startenWix-Buchungsübersicht
Alle Schedito-Leitfäden durchsuchen · Widget-Anpassung · Google-Kalender-Synchronisierung