Wie man das Booksy-Widget auf Squarespace installiert: Eine Schritt-für-Schritt-Anleitung

Hier ist eine detaillierte Schritt-für-Schritt-Anleitung, wie du das Booksy-Buchungswidget in deine Squarespace-Website integrierst.

Die Integration von Booksy in deine Squarespace-Website ermöglicht es deinen Kunden, Termine direkt zu buchen, ohne deine Seite zu verlassen. Dies erhöht die Conversion-Rate und professionalisiert deinen Online-Auftritt.

Voraussetzungen

• Ein aktives Booksy Biz Konto.
• Eine Squarespace-Website (Business-Tarif oder höher wird empfohlen, da einige Code-Funktionen in persönlichen Tarifen eingeschränkt sein können).

Schritt 1: Den Widget-Code von Booksy abrufen

Zuerst musst du den spezifischen HTML-Code für dein Widget in deinem Booksy-Konto finden.

1. Logge dich in dein Booksy Biz Dashboard ein (am besten am Desktop).
2. Gehe zu Einstellungen (Zahnrad-Symbol).
3. Wähle den Bereich Kundenkanäle und dann Widget.
4. Hier kannst du das Design deines Buttons oder Widgets anpassen (Farbe, Text, Position).
5. Klicke auf Code kopieren. Dieser Code befindet sich nun in deiner Zwischenablage.

Schritt 2: Den Code in Squarespace einfügen

Es gibt zwei Möglichkeiten, das Widget einzubinden: Entweder als festen Button auf der gesamten Website oder auf einer spezifischen Seite.

Option A: Widget auf einer spezifischen Seite (z.B. "Kontakt" oder "Services")

1. Logge dich bei Squarespace ein und öffne den Website-Editor.
2. Navigiere zu der Seite, auf der das Widget erscheinen soll.
3. Klicke auf Bearbeiten (Edit).
4. Fahre mit der Maus über den Bereich, in dem das Widget erscheinen soll, und klicke auf das Plus-Symbol (+) oder Inhalt hinzufügen.
5. Suche nach dem Block Code (nicht "Einbetten/Embed", der Code-Block funktioniert meist besser).
6. Lösche den Platzhalter-Text im Code-Fenster und füge den Booksy-Code ein, den du in Schritt 1 kopiert hast.
7. Klicke auf Speichern und dann oben links auf Fertig -> Speichern.

Option B: Widget auf der gesamten Website (Floating Button)

Wenn du möchtest, dass der "Jetzt buchen"-Button von Booksy immer am Rand der Seite sichtbar ist:

1. Gehe im Squarespace-Hauptmenü zu Einstellungen (Settings).
2. Wähle Entwicklertools (Developer Tools).
3. Klicke auf Code-Einspeisung (Code Injection).
4. Suche das Feld Fußzeile (Footer).
5. Füge den Booksy-Widget-Code dort ein.
6. Klicke auf Speichern.

Schritt 3: Vorschau und Fehlerbehebung

In der Squarespace-Bearbeitungsansicht wird das Widget oft nicht sofort angezeigt (es erscheint meist ein Hinweis wie "Skript deaktiviert"). Das ist normal und dient der Sicherheit während der Bearbeitung.

1. Melde dich aus dem Bearbeitungsmodus ab oder öffne deine Website in einem Inkognito-Fenster, um das Ergebnis live zu prüfen.
2. Testreaktion: Klicke auf den Button, um sicherzustellen, dass sich das Booksy-Fenster korrekt öffnet.

Wichtige Tipps:

• Mobil-Optimierung: Booksy-Widgets sind in der Regel responsiv. Überprüfe dennoch die mobile Ansicht deiner Squarespace-Seite, um sicherzustellen, dass der Button keine wichtigen Texte verdeckt.
• SSL-Zertifikat: Stelle sicher, dass deine Squarespace-Seite über HTTPS läuft (SSL aktiv), da Browser unsichere Skripte sonst blockieren könnten.
• Design-Anpassung: Falls der Button farblich nicht passt, ändere dies direkt im Booksy-Dashboard unter den Widget-Einstellungen, bevor du den Code kopierst. Du musst den Code in Squarespace jedes Mal aktualisieren, wenn du grundlegende Änderungen im Booksy-Widget-Konfigurator vornimmst.

Fertig! Deine Kunden können nun direkt über deine Squarespace-Seite Termine bei dir buchen.