Das Widget „Eingebettete Buchungsseite“ bindet Ihre vollständige Barberly-Buchungsseite in einem iframe in eine Seite Ihrer Website ein. Kunden schließen die gesamte Buchung ab, ohne auf eine andere Website weitergeleitet zu werden. Sie können es für eine eigene Buchungsseite verwenden oder auf Ihrer Startseite, Ihren Leistungsseiten oder Ihrer Kontaktseite einfügen.
Neue Instanz erstellen#
- Melden Sie sich unter portal.barberly.com bei Ihrem Barberly-Konto an.
- Gehen Sie zu MenüAnwendungenAlle Widgets.
- Klicken Sie auf Eingebettete Buchungsseite.
- Wählen Sie Neue Instanz erstellen.
- Geben Sie der Instanz einen Namen, zum Beispiel „Haupt-Buchungsseite“.
Einstellungen#
- URL buchen
- Die URL Ihrer Barberly-Buchungsseite.
- Höhe
- Die Höhe der eingebetteten Seite, zum Beispiel „100%“ für die volle Höhe oder ein Pixelwert wie „600px“.
Stile#
- Radius der Grenze
- Wie stark die Ecken abgerundet sind.
- Box Schatten
- Ein Schatten um das Widget.
Die eingebettete Seite passt sich an die Bildschirmgröße an. Auf dem Desktop zeigt sie die vollständige Buchungsoberfläche, auf Mobilgeräten passt sich die Oberfläche an den kleineren Bildschirm an.
Die Seite auf Ihrer Website einfügen#
Die Live-Vorschau zeigt, wie die eingebettete Seite aussehen wird. Gehen Sie den Buchungsablauf einmal durch, um zu prüfen, ob alles funktioniert.
- 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 Buchungsseite erscheinen soll.
- Speichern und veröffentlichen Sie Ihre Website.
Beispielcode:
<div id="262b1c5d48b64c16a9786cd8ebbbecd3-container"></div>
<script src="https://widgets.barberly.com/barberly-widgets.js" data-business-id="house13" data-widget-id="embed_262b1c5d48b64c16a9786cd8ebbbecd3" data-container-id="262b1c5d48b64c16a9786cd8ebbbecd3-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 Instanzen der eingebetteten Seite für verschiedene Bereiche Ihrer Website erstellen. Wiederholen Sie dazu die Schritte oben unter Eingebettete Buchungsseite. Jede Instanz hat ihren eigenen Integrationscode.
Eine veröffentlichte eingebettete Seite ändern#
Öffnen Sie die Instanz unter MenüAnwendungenAlle Widgets, nehmen Sie Ihre Änderungen vor und speichern Sie. Die eingebettete Seite auf Ihrer Website wird automatisch aktualisiert, Sie müssen den Code auf Ihrer Website also nicht ändern.
Wenn die Seite nicht richtig angezeigt wird#
- Achten Sie darauf, dass der Container breit und hoch genug für die Buchungsoberfläche ist.
- Prüfen Sie, ob es CSS-Konflikte mit den Stilen Ihrer Website gibt.
- Prüfen Sie, ob die Buchungs-URL stimmt.
- Achten Sie darauf, dass keine Content Security Policy auf Ihrer Website das iframe blockiert.