So fügen Sie das Schedito-Buchungswidget zu Squarespace hinzu
Squarespace kann Scheditos bevorzugte dreiteilige Integration verwenden: Laden Sie das gemeinsame Stylesheet einmal, das JavaScript einmal und platzieren Sie das kalenderspezifische Widget-DIV auf der Seite, auf der Kunden buchen sollen.
Dieser Leitfaden verwendet Squarespace Header und Footer Code Injection für die gemeinsamen Schedito-Ressourcen und einen Code Block für den Buchungskalender selbst.
Bevor Sie Squarespace öffnen
Ein konfigurierter Schedito-Kalender
Konfigurieren Sie die Leistungen, Ressourcen und Verfügbarkeiten, die Kunden buchen können sollen, bevor Sie das Widget veröffentlichen.
Ein Squarespace-Tarif mit Code Injection
Die empfohlene Integration erfordert Squarespace Code Injection. Die aktuellen Tarife Core, Plus und Advanced unterstützen sie, ebenso einige ältere Tarife.
Die drei Schedito-Elemente
Öffnen Sie den Widget-Code in Schedito und halten Sie CSS-Link, JavaScript-Skript und kalenderspezifisches Widget-DIV zum Kopieren bereit.
1. Halten Sie die drei Schedito-Elemente getrennt
Das Schedito-Dashboard liefert Ihnen drei Teile Frontend-Code:
CSS-Link — stellt das Widget-Styling bereit.
JavaScript-Skript — lädt und betreibt Schedito-Widgets.
Widget-DIV — identifiziert Organisation und öffentlichen Buchungskalender und markiert, wo dieser Kalender gerendert werden soll.
In Squarespace können CSS und JavaScript einmal über Code Injection geladen werden, während das kalenderspezifische DIV in den Seiteninhalt gehört.
Schedito-CSS-Link — einmal
Schedito-JavaScript — einmal
Kalenderspezifisches Widget-DIV
2. Fügen Sie den Schedito-CSS-Link zur Header Code Injection hinzu
Kopieren Sie den CSS-<link> aus Ihrem Schedito-Dashboard.
Öffnen Sie in Squarespace Code Injection und fügen Sie den Link in das Header-Feld ein. Dort platzierter Code wird dem <head> Ihrer Website-Seiten hinzugefügt.
Kopieren Sie das Stylesheet nicht in jeden Buchungs-Code-Block. Das gemeinsame Schedito-Stylesheet einmal zu laden ist die sauberere Lösung.
3. Fügen Sie Schedito-JavaScript zur Footer Code Injection hinzu
Kopieren Sie das vom Schedito-Dashboard bereitgestellte JavaScript-<script>.
Fügen Sie es im Squarespace-Code-Injection-Bereich in das Footer-Feld ein.
Dadurch bleibt das gemeinsame Schedito-JavaScript außerhalb einzelner Buchungsblöcke und steht den auf der Website gerenderten Kalender-DIVs zur Verfügung.
Laden Sie es einmal, statt dasselbe Skript in jede Buchungsposition zu kopieren.
4. Platzieren Sie das Kalender-DIV in einem Code Block
Öffnen Sie die Squarespace-Seite, auf der Kunden buchen sollen, und fügen Sie an der gewünschten Position einen Code Block hinzu.
Stellen Sie den Block auf HTML und fügen Sie nur das kalenderspezifische Widget-DIV aus Schedito ein.
Das DIV enthält Werte wie data-organization-id und data-calendar-public-id. Verwenden Sie unbedingt die Werte, die für den Kalender generiert wurden, den Sie tatsächlich veröffentlichen möchten.
Da CSS und JavaScript bereits separat geladen werden, bleibt der Code Block klein und auf diesen Kalender beschränkt.
Prüfen Sie Ihren Squarespace-Tarif
Squarespace Code Blocks können in allen aktuellen Tarifen gewöhnliches HTML enthalten, daher ist das Platzieren des Schedito-Widget-DIV selbst nicht der begrenzende Faktor.
Die empfohlene Schedito-Einrichtung benötigt zusätzlich Code Injection für das gemeinsame JavaScript und Stylesheet. Squarespace stellt Code Injection derzeit in den Tarifen Core, Plus und Advanced sowie in einigen älteren Tarifen bereit.
Wenn Ihr aktueller Tarif Code Injection nicht anbietet, upgraden Sie den Squarespace-Tarif, bevor Sie dieser Integrationsmethode folgen, statt die Plattformeinschränkung zu umgehen.
Mehrere Schedito-Kalender auf Squarespace verwenden
Wenn mehrere Squarespace-Seiten Buchungen benötigen, lassen Sie den gemeinsamen Schedito-CSS-Link und das JavaScript nur einmal in Code Injection.
Fügen Sie anschließend überall dort, wo ein Kalender erscheinen soll, einen separaten Code Block hinzu und setzen Sie das eigene Widget-DIV dieses Kalenders ein.
So können eine Leistungsseite, Beratungsseite und Workshop-Seite unterschiedliche Schedito-Kalender nutzen, ohne dieselben Frontend-Ressourcen wiederholt zu laden.
Einmal gemeinsam
JavaScript-Skript
Pro Buchungsposition
Seite B → Kalender-DIV B
Seite C → Kalender-DIV C
5. Veröffentlichen und den vollständigen Buchungsablauf testen
Hören Sie nicht auf, sobald der Kalender sichtbar ist. Prüfen Sie die tatsächliche Verfügbarkeit und führen Sie über die öffentliche Website eine Buchung vollständig durch.
Öffentliche Seite öffnen
Testen Sie die veröffentlichte Squarespace-Seite. Prüfen Sie, ob CSS, JavaScript und Kalender-DIV zusammen eine funktionierende Buchungsoberfläche ergeben.
Eine Buchung abschließen
Wählen Sie eine Leistung, ein Datum und eine Uhrzeit und schließen Sie eine echte Testbuchung ab. Prüfen Sie das Ergebnis in Schedito.
Mobil-Layout prüfen
Prüfen Sie Mobilgeräte ebenso wie Desktop. Stellen Sie sicher, dass Squarespace-Bereich und -Block rund um das Widget genügend nutzbare Breite bereitstellen.
Fehlerbehebung beim Squarespace-Buchungswidget
Prüfen Sie die drei Integrationsteile unabhängig voneinander: den CSS-Link in Header Code Injection, das JavaScript in Footer Code Injection und das kalenderspezifische DIV im Code Block.
Prüfen Sie außerdem Organisations-ID und öffentliche Kalender-ID und kontrollieren Sie die Browser-Entwicklerwerkzeuge auf fehlgeschlagene Asset- oder API-Anfragen.
Prüfen Sie Ihren Squarespace-Abrechnungstarif. Code Injection ist eine Premium-Funktion und im aktuellen Basic-Tarif nicht verfügbar.
Wenn die Website im Basic-Tarif läuft, erfordert die empfohlene Schedito-Integration ein Upgrade auf einen Tarif mit Code Injection.
Die Squarespace-Integration funktioniert wahrscheinlich. Prüfen Sie stattdessen Schedito: Leistungskonfiguration, erforderliche Ressourcen, wiederkehrende Verfügbarkeit, datumsspezifische Ausnahmen, bestehende Buchungen, Kapazität und verbundene externe Kalender.
Prüfen Sie, ob Sie die gemeinsamen Ressourcen sowohl in Code Injection als auch in einzelne Code Blocks kopiert haben. Lassen Sie CSS und JavaScript in Code Injection und entfernen Sie unnötige Kopien aus dem Seiteninhalt.
Prüfen Sie den umgebenden Squarespace-Bereich und das Block-Layout. Spalten, Abstände und Containerbreite können das Widget einschränken, auch wenn Schedito selbst responsiv ist.
Verwenden Sie Scheditos helles oder dunkles Widget-Theme und unterstützte Farbeinstellungen. Prüfen Sie außerdem, ob allgemeine Squarespace-Custom-CSS-Regeln unbeabsichtigt Formularfelder, Buttons oder andere Elemente verändern.
Squarespace auf Ihre Website konzentrieren und Schedito auf Buchungen
Sobald die Integration funktioniert, verwalten Sie Leistungen, Ressourcen, Verfügbarkeit, Kapazität, Kalendersynchronisierung und Widget-Styling weiterhin in Schedito.
Kostenlos startenSquarespace-Buchungsübersicht
Alle Schedito-Leitfäden durchsuchen · Widget-Anpassung · Google-Kalender-Synchronisierung