Squarespace: So installierst du das Bridebook Kontakt-Widget
Wähle aus, wie das Widget auf deiner Website angezeigt werden soll, und folge dann den Schritten für deine gewählte Option.
Bevor du startest
In 4 Schritten live gehen
Hole dir deinen Widget-Code von Bridebook Business
Logge dich bei Bridebook Business ein und gehe zum Bereich Kontakt-Widget. Dort findest du deinen einzigartigen Einbettungscode, den du direkt kopieren kannst. Dieser Code ist spezifisch für deine Location. Teile ihn nicht und verwende nicht den Code einer anderen Location.
<iframe width="100%" height="600"
src="https://enquiry.bridebook.com?publicId=DEINE_VENUE_ID&widgetId=DEINE_WIDGET_ID">
</iframe>Öffne dein Squarespace-Dashboard und gehe zu der Seite, die du bearbeiten möchtest
Logge dich in deinen Squarespace-Account ein. Klicke im Haupt-Dashboard in der linken Seitenleiste auf Website und dann auf Website bearbeiten. Suche im Seiten-Panel die Seite, auf der das Widget erscheinen soll. Die meisten Locations nutzen dafür ihre Kontaktseite. Klicke auf die Seite, um sie zu öffnen.
Website
Gut zu wissen
Wenn du das Widget auf einer eigenen Seite haben möchtest, kannst du eine neue erstellen. Klicke im Seiten-Panel neben Hauptnavigation auf + und wähle Leere Seite. Gib ihr dann einen Namen wie „Besichtigung buchen".
Füge einen Code-Block hinzu
Bewege im Seiten-Editor den Mauszeiger über den Bereich, in dem das Widget erscheinen soll, und klicke auf Abschnitt hinzufügen. Klicke dann auf Leer hinzufügen, um einen leeren Abschnitt einzufügen. Klicke anschließend auf Block hinzufügen.
Gib in der Block-Suchleiste code ein und wähle den Code-Block mit dem </>-Symbol aus. Mit diesem Block kannst du Roh-HTML direkt auf deiner Seite einfügen.
Wichtig: Modus auf HTML einstellen
Sobald der Code-Block hinzugefügt wurde, öffnet sich rechts ein Inhalts-Panel. Stelle sicher, dass das Dropdown-Menü Modus auf HTML eingestellt ist und dass Quellcode anzeigen aktiviert ist. Ohne diese Einstellung erscheint das iframe als Rohtext.
Füge deinen Code ein und speichere
Klicke in den Code-Editor-Bereich im Inhalts-Panel und füge den iframe-Code ein, den du aus Bridebook Business kopiert hast. Klicke dann oben links im Editor auf Speichern und öffne deine Seite in einem neuen Tab.
src="https://enquiry.bridebook.com?publicId=abc123">
</iframe>
Worauf du achten solltest
Das Bridebook-Formular lädt direkt auf deiner Seite
Paare sehen Optionen, um eine Besichtigung zu buchen, sich für einen Tag der offenen Tür anzumelden oder eine Anfrage zu senden. Jede Übermittlung landet in Bridebook Business und wird als Kontakt-Widget gekennzeichnet.
Wird es nicht angezeigt?
Prüfe, ob der Modus des Code-Blocks auf HTML eingestellt ist und Quellcode anzeigen aktiviert ist. Leere deinen Browser-Cache oder öffne die Seite in einem privaten Fenster. Wenn das Widget immer noch fehlt, prüfe, ob der Code ohne Änderungen an der URL eingefügt wurde.
Bevor du startest
So funktioniert das Popup
Das Popup-Widget besteht aus zwei Teilen. Zuerst fügst du über die integrierte Code-Injection von Squarespace ein Skript zum Header deiner Seite hinzu. Dadurch wird Bridebook im Hintergrund geladen. Dann fügst du über einen Code-Block einen Button auf dieser Seite hinzu. Wenn ein Paar darauf klickt, öffnet sich das Bridebook-Formular in einem Popup-Overlay.
In 4 Schritten live gehen
Hole dir dein Skript von Bridebook Business
Logge dich bei Bridebook Business ein und gehe zum Bereich Kontakt-Widget. Kopiere dein einzigartiges Skript-Tag. Es ist eine einzelne Zeile, die mit <script beginnt, statt mit einem iframe.
<script src="https://enquiry.bridebook.com/widget.js"
data-public-id="DEINE_PUBLIC_ID"
data-widget-id="DEINE_WIDGET_ID"
defer></script>Füge das Skript über Code-Injection zum Header deiner Seite hinzu
Das Skript muss im <head> deiner Seite geladen werden. In Squarespace geht das am einfachsten über die integrierte Code-Injection-Einstellung der jeweiligen Seite — keine Plugins oder Theme-Bearbeitungen erforderlich.
Klicke im Seiten-Panel auf das Zahnrad-Symbol neben der Seite, zu der du das Widget hinzufügen möchtest.
Klicke im Panel Seiteneinstellungen auf Erweitert. Du siehst ein Feld mit der Bezeichnung Page Header Code Injection. Füge deinen Skript-Code genau so in dieses Feld ein, wie du ihn aus Bridebook Business kopiert hast.
Klicke auf Speichern, um die Seiteneinstellungen zu schließen. Das Skript lädt jetzt im Hintergrund auf dieser Seite.
Gut zu wissen
Das Skript lädt unauffällig im Hintergrund. Auf deiner Website erscheint nichts, bis du im nächsten Schritt einen Button hinzufügst. Page Header Code Injection ist nur in Squarespace Business- und Commerce-Tarifen verfügbar.
Füge deiner Seite einen Button hinzu
Klicke auf der Seite auf Bearbeiten, füge über Abschnitt hinzufügen → Leer hinzufügen einen neuen Abschnitt ein. Klicke auf Block hinzufügen, gib code in die Suchleiste ein und wähle den Code-Block aus.
Stelle im Inhalts-Panel den Modus auf HTML und stelle sicher, dass Quellcode anzeigen aktiviert ist. Füge dann einen der untenstehenden Button-Codes in den Editor ein.
color:#fff;padding:12px 24px;
border-radius:30px;border:none;
font-size:15px;font-weight:700;">
Besichtigung buchen</button>
Option A — Bridebook-Button im Markenstil
Nutze diese Option, wenn du schnell loslegen möchtest. Sie passt zu den Farben und dem Stil von Bridebook und funktioniert sofort.
<button data-bb-open style="background-color:#4D52E3;
color:#fff;padding:12px 24px;border-radius:30px;
border:none;font-size:15px;font-weight:700;
cursor:pointer;">Besichtigung buchen</button>Vorschau, wie der Button aussehen wird
Option B — An deine eigene Marke anpassen
Ändere Farben, Schriftgröße und Button-Text. Das Einzige, was du beibehalten musst, ist data-bb-open. Dadurch wird der Button mit dem Bridebook-Popup verbunden.
<button data-bb-open style="background-color:#DEINE_FARBE;
color:#DEINE_TEXTFARBE;padding:12px 24px;
border-radius:8px;border:none;font-size:15px;
font-weight:700;cursor:pointer;">Dein Button-Text</button>Die eine Regel
data-bb-open muss auf dem Button-Element bleiben. Ohne dieses Attribut öffnet sich das Popup nicht.
Speichern und testen
Klicke oben links im Editor auf Speichern. Öffne dann deine Seite in einem neuen Tab und klicke auf den Button. Das Bridebook-Formular sollte sich in einem Popup-Overlay über deiner bestehenden Seite öffnen.
Worauf du achten solltest
Das Bridebook-Formular öffnet sich in einem Popup, wenn der Button angeklickt wird
Paare können eine Besichtigung buchen, sich für einen Tag der offenen Tür anmelden oder eine Anfrage senden, ohne deine Seite zu verlassen. Jede Übermittlung landet in Bridebook Business und wird als Kontakt-Widget gekennzeichnet.
Popup öffnet sich nicht?
Prüfe, ob das Skript korrekt unter Seiteneinstellungen → Erweitert → Page Header Code Injection eingefügt ist und ob du auf Speichern geklickt hast. Stelle sicher, dass der Button-Code data-bb-open enthält. Leere deinen Cache und versuche es erneut.
Funktioniert mit
Bereit loszulegen?
Richte dein Widget in Bridebook Business ein
Hole dir deinen einzigartigen Code, wähle deinen Widget-Typ und gehe live. Jede Anfrage landet automatisch in Bridebook Business, wird nach Quelle gekennzeichnet und ist bereit zur Bearbeitung.
Widget einrichten →