Das Widget „Buchungs-Popup“ fügt Ihrer Website eine Schaltfläche hinzu. Ein Klick darauf öffnet Ihre Barberly-Buchungsseite in einem Popup in der Mitte des Bildschirms, sodass Besucher während der Buchung auf der aktuellen Seite bleiben. Sie können es auf der gesamten Website oder auf einzelnen Seiten wie Leistungsseiten oder Blogbeiträgen einsetzen.
Neue Instanz erstellen#
- Melden Sie sich unter portal.barberly.com bei Ihrem Barberly-Konto an.
- Gehen Sie zu MenüAnwendungenAlle Widgets.
- Klicken Sie auf Buchungs-Popup.
- Wählen Sie Neue Instanz erstellen.
- Geben Sie der Instanz einen Namen, zum Beispiel „Haupt-Buchungs-Popup“.
Einstellungen#
- Text der Schaltfläche
- Der Text auf der Schaltfläche, die das Popup öffnet.
- URL buchen
- Die URL Ihrer Barberly-Buchungsseite, die im Popup angezeigt wird.
Stile#
- Hintergrundfarbe
- Die Farbe der Schaltfläche.
- Textfarbe
- Die Farbe des Schaltflächentextes. Wählen Sie eine Farbe, die sich vom Hintergrund abhebt.
- Polsterung
- Der Innenabstand der Schaltfläche.
- Radius der Grenze
- Wie stark die Ecken der Schaltfläche abgerundet sind.
- Schriftart Gewicht
- Normal, fett und so weiter.
- Radius der Grenze
- Wie stark die Ecken des Popups abgerundet sind.
- Box Schatten
- Ein Schatten um das Popup.
Auf Mobilgeräten passt sich das Popup an die Bildschirmgröße an und hat eine X-Schaltfläche zum Schließen.
Das Popup auf Ihrer Website einfügen#
Die Live-Vorschau zeigt die Schaltfläche und das Popup. Klicken Sie auf die Schaltfläche, um zu prüfen, ob sich das Popup mit Ihrer Buchungsseite öffnet.
- Kopieren Sie den Code aus dem Bereich Kopieren Sie diesen Code auf Ihre Website.
- Fügen Sie ihn in den HTML-Code Ihrer Website an der Stelle ein, an der die Schaltfläche erscheinen soll.
- Speichern und veröffentlichen Sie Ihre Website.
Beispielcode:
<div id="popup-booking-container"></div>
<script src="https://widgets.barberly.com/barberly-widgets.js" data-business-id="house13" data-widget-id="popup_booking" data-container-id="popup-booking-container"></script>Die Schritte für einzelne Plattformen finden Sie in den Anleitungen für WordPress, Wix und Squarespace.
Mehrere Instanzen#
Sie können weitere Popup-Instanzen erstellen, zum Beispiel mit einem eigenen Design für jeden Bereich Ihrer Website. Wiederholen Sie dazu die Schritte oben unter Buchungs-Popup. Jede Instanz hat ihren eigenen Integrationscode.
Ein veröffentlichtes Popup ändern#
Öffnen Sie die Instanz unter MenüAnwendungenAlle Widgets, nehmen Sie Ihre Änderungen vor und speichern Sie. Das Popup auf Ihrer Website wird automatisch aktualisiert, Sie müssen den Code auf Ihrer Website also nicht ändern.