WordPress: 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 5 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 WordPress-Dashboard und gehe zu Seiten
Logge dich unter deinewebsite.com/wp-admin in deinen WordPress-Adminbereich ein. Bewege den Mauszeiger anschließend in der linken Seitenleiste über Seiten und klicke auf Alle Seiten.
Dashboard
Seiten
+ Neu erstellen| Titel | Autor | Datum |
|---|---|---|
| StartseiteBearbeiten | Anzeigen | Papierkorb | Admin | Veröffentlicht |
| Über unsBearbeiten | Anzeigen | Papierkorb | Admin | Veröffentlicht |
| KontaktBearbeiten | Anzeigen | Papierkorb | Admin | Veröffentlicht |
| GalerieBearbeiten | Anzeigen | Admin | Veröffentlicht |
Öffne die Seite, die du bearbeiten möchtest
Suche die Seite, auf der das Widget erscheinen soll, und klicke auf Bearbeiten. Die meisten Locations fügen es auf ihrer Kontaktseite hinzu, aber du kannst auch eine eigene Seite für „Besichtigung buchen" erstellen.
| Titel | Datum |
|---|---|
| Kontakt Bearbeiten Anzeigen Papierkorb | Veröffentlicht |
Kontakt
Füge einen individuellen HTML-Block hinzu
Klicke im Block-Editor auf den +-Button, um einen neuen Block hinzuzufügen. Gib in der Suchleiste html ein und wähle Individuelles HTML aus den Ergebnissen aus.
Nicht gefunden?
Stelle sicher, dass du dich innerhalb des Blocks in der HTML-Ansicht befindest, nicht in der Vorschau.
Füge deinen Code ein und speichere
Klicke in den individuellen HTML-Block und füge den iframe-Code ein, den du aus Bridebook Business kopiert hast. Klicke dann oben rechts auf Speichern und öffne deine Seite in einem neuen Tab.
Kontakt
<iframe width="100%" height="600"
src="https://enquiry.bridebook.com?publicId=abc123&widgetId=widget456">
</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?
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 oder den Abständen eingefügt wurde.
Bevor du startest
So funktioniert das Popup
Das Popup-Widget besteht aus zwei Teilen. Zuerst fügst du über das Code Snippets Plugin ein Skript zum Header deiner Website hinzu. Dann fügst du einen Button auf einer beliebigen 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.
<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 mit Code Snippets zum Header hinzu
Klicke in deinem WordPress-Dashboard auf Code Snippets und dann auf Neu hinzufügen.
Code Snippets
+ Neu hinzufügenGib deinem Snippet den Namen Bridebook Widget, füge den Skript-Code ein, stelle den Typ auf HTML und den Speicherort auf Websiteweiter Header.
Klicke auf Änderungen speichern und aktivieren.
| Name | Typ | Speicherort | Status |
|---|---|---|---|
| Bridebook Widget | HTML | Websiteweiter Header | Aktiv |
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.
Füge deiner Seite einen Button hinzu
Füge auf der gewünschten Seite einen individuellen HTML-Block hinzu und füge den Button-Code ein.
Kontakt
<button data-bb-open style="background:#4D52E3;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. 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 Text. Das Einzige, was du beibehalten musst, ist data-bb-open.
<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 rechts auf Speichern. Öffne deine Seite in einem neuen Tab und klicke auf den Button. Das Bridebook-Formular sollte sich in einem Popup-Overlay ö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.
Popup öffnet sich nicht?
Prüfe, ob das Snippet aktiv und auf Websiteweiter Header eingestellt ist. 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 →