Wix: So installierst du das Bridebook Kontakt-Widget
Wähle aus, wie das Widget auf deiner Website erscheinen soll, und folge dann den Schritten für deine ausgewählte Option.
Bevor du loslegst
In 4 Schritten live gehen
Hole dir deine Widget-URL aus Bridebook Business
Logge dich bei Bridebook Business ein und gehe zum Bereich Kontakt-Widget. Du brauchst die URL aus deinem Einbettungscode. Kopiere nur die Adresse innerhalb des src=""-Teils des iframes, nicht das vollständige iframe-Tag.
https://enquiry.bridebook.com?publicId=DEINE_VENUE_ID&widgetId=DEINE_WIDGET_IDNur die URL, nicht den iframe-Code
Kopiere alles, was in deinem Einbettungscode nach src= zwischen den Anführungszeichen steht. Kopiere nicht das vollständige <iframe>-Tag, da dies einen Forbidden-Fehler verursacht.
Öffne deine Seite im Wix Editor und füge ein Einbetten-Element hinzu
Öffne im Wix Editor die Seite, auf der du das Widget einfügen möchtest. Klicke oben links auf + Hinzufügen und dann auf Elemente. Suche in der Suchleiste nach html. Du siehst zwei Optionen. Klicke auf Website einbetten.
Keinen Einbettungscode verwenden
Die Option Einbettungscode erstellt ein verschachteltes iframe, das externe Inhalte blockiert und einen Forbidden-Fehler anzeigt. Verwende für das eingebettete Bridebook Widget immer Website einbetten.
Füge die URL ein und klicke auf Anwenden
Ein HTML-Element wird auf deiner Seite platziert und rechts öffnet sich ein Einstellungsbereich. Stelle sicher, dass Auswählen, was eingebettet werden soll auf Link eingestellt ist. Füge deine Bridebook URL in das Feld Link ein und klicke dann auf Anwenden. Das Widget wird innerhalb des Elements geladen.
Klicke unbedingt auf Anwenden
Das Widget wird erst geladen, wenn du auf Anwenden klickst. Wenn du den Bereich schließt, ohne darauf zu klicken, bleibt das Element leer.
Passe die Größe des Elements an und veröffentliche die Seite
Ziehe die Ränder des HTML-Elements, um die Größe anzupassen, sodass das vollständige Bridebook Formular sichtbar ist. Eine Höhe von etwa 700 px funktioniert für die meisten Bildschirme gut. Wenn alles passt, klicke oben rechts auf Veröffentlichen und öffne deine Live-Seite, um zu prüfen, ob alles korrekt angezeigt wird.
Worauf du achten solltest
Das Bridebook Formular lädt innerhalb des Elements auf deiner Seite
Paare sehen Optionen, um eine Besichtigung zu buchen, sich für einen Tag der offenen Tür zu registrieren oder eine Anfrage zu senden. Jede Einsendung landet in Bridebook Business und wird als Kontakt-Widget markiert.
Siehst du immer noch ein leeres Feld?
Stelle sicher, dass im Dropdown der Einstellungen Link und nicht Code steht, dass du nur die URL eingefügt hast, nicht das vollständige iframe-Tag, und dass du auf Anwenden geklickt hast, bevor du den Bereich geschlossen hast.
Bevor du loslegst
So funktioniert das Popup
Bei Wix kommen der Skriptcode und der Button-Code beide in dasselbe Einbettungscode-Element. Wix isoliert HTML-Elemente in Sandboxes, daher müssen Skript und Button in einem Block zusammenstehen, damit sie kommunizieren können. Du fügst beides in ein einzelnes Element ein, klickst auf Anwenden und der Button ist live.
In 3 Schritten live gehen
Hole dir dein Skript aus Bridebook Business
Logge dich bei Bridebook Business ein und gehe zum Bereich Kontakt-Widget. Kopiere dein individuelles Skript-Tag. Es ist eine einzelne Zeile, die mit <script beginnt, und unterscheidet sich vom iframe-Einbettungscode.
<script src="https://enquiry.bridebook.com/widget.js"
data-public-id="DEINE_PUBLIC_ID"
data-widget-id="DEINE_WIDGET_ID"
defer></script>Füge ein Einbettungscode-Element hinzu und füge sowohl das Skript als auch den Button ein
Gehe im Wix Editor zu der Seite, auf der du den Button einfügen möchtest. Klicke auf + Hinzufügen und dann auf Elemente. Suche nach code und klicke auf Einbettungscode.
Stelle im Einstellungsbereich sicher, dass Auswählen, was eingebettet werden soll auf Code eingestellt ist. Füge dann den kombinierten Code unten in das Editor-Feld ein. Er enthält sowohl das Skript als auch den Button zusammen in einem Block. Klicke anschließend auf Anwenden.
<script src="https://enquiry.bridebook.com/widget.js"
data-public-id="DEINE_PUBLIC_ID"
data-widget-id="DEINE_WIDGET_ID"
defer></script>
<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>Warum beides in dasselbe Feld gehört
Wix isoliert jedes HTML-Element in einer eigenen Sandbox. Wenn sich das Skript an einer anderen Stelle als der Button befindet, können sie nicht kommunizieren und das Popup öffnet sich nicht. Beides in einem Einbettungscode-Element zu behalten, löst dieses Problem.
Möchtest du dein eigenes Branding verwenden?
Du kannst die Farben, Größe und Beschriftung des Buttons an den Stil deiner Location anpassen. Das Einzige, was du beibehalten musst, ist data-bb-open auf dem Button-Element. Ohne das öffnet sich das Popup nicht.
<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;">Deine Button-Beschriftung</button>Veröffentliche die Seite und teste sie
Klicke oben rechts im Editor auf Veröffentlichen. Öffne anschließend deine Live-Website und klicke auf den Button. Das Bridebook Formular sollte sich in einem Popup-Overlay über deiner Seite öffnen.
Worauf du achten solltest
Das Bridebook Formular öffnet sich in einem Popup, wenn auf den Button geklickt wird
Paare können eine Besichtigung buchen, sich für einen Tag der offenen Tür registrieren oder eine Anfrage senden, ohne deine Seite zu verlassen. Jede Einsendung landet in Bridebook Business und wird als Kontakt-Widget markiert.
Popup öffnet sich nicht?
Stelle sicher, dass sowohl der Skriptcode als auch der Button-Code im selben Einbettungscode-Element stehen, dass das Dropdown auf Code eingestellt ist und dass du auf Anwenden geklickt hast. Prüfe, ob der Button data-bb-open genau wie gezeigt enthält. Leere deinen Cache und versuche es erneut.
Funktioniert mit
Bereit?
Richte dein Widget in Bridebook Business ein
Hole dir deinen individuellen Code, wähle deinen Widget-Typ aus und geh live. Jede Anfrage landet automatisch in Bridebook Business, wird nach Quelle markiert und ist bereit zur Bearbeitung.
Widget einrichten →