Buchungs-Seitenleiste

Das Widget „Buchungs-Seitenleiste“ fügt Ihrer Website eine Schaltfläche hinzu. Ein Klick darauf schiebt vom Bildschirmrand eine Seitenleiste mit Ihrer Barberly-Buchungsseite herein. Besucher schließen die Seitenleiste, um zur Seite zurückzukehren. Sie braucht wenig Platz und eignet sich daher für jede Seite der Website, auch für lange Seiten, auf denen eine feste Schaltfläche beim Scrollen aus dem Blick gerät.

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-Seitenleiste.
Wählen Sie Neue Instanz erstellen.
Geben Sie der Instanz einen Namen, zum Beispiel „Haupt-Buchungs-Seitenleiste“.

Einstellungen#

Text der Schaltfläche: Der Text auf der Schaltfläche, die die Seitenleiste öffnet.
URL buchen: Die URL Ihrer Barberly-Buchungsseite, die in der Seitenleiste angezeigt wird.
Position der Seitenleiste: Die Bildschirmseite, von der aus sich die Seitenleiste öffnet, rechts oder links.

Stile#

Schaltflächen-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.

Seitenleisten-Stile

Radius der Grenze: Wie stark die Ecken der Seitenleiste abgerundet sind.
Box Schatten: Ein Schatten um die Seitenleiste.
Breite: Wie viel vom Bildschirm die Seitenleiste einnimmt, getrennt für Desktop und Mobilgeräte einstellbar.

Auf kleineren Bildschirmen nimmt die Seitenleiste einen größeren Teil der Bildschirmbreite ein, und die Schaltfläche zum Schließen bleibt gut sichtbar.

Die Seitenleiste auf Ihrer Website einfügen#

Die Live-Vorschau zeigt die Schaltfläche und die Seitenleiste. Klicken Sie auf die Schaltfläche, um zu prüfen, ob die Seitenleiste mit Ihrer Buchungsseite hereingleitet.

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:

html

<div id="sidebar-booking-container"></div>
<script src="https://widgets.barberly.com/barberly-widgets.js" data-business-id="house13" data-widget-id="sidebar_booking" data-container-id="sidebar-booking-container"></script>

Die Schritte für einzelne Plattformen finden Sie in den Anleitungen für WordPress, Wix und Squarespace.

Die Schaltfläche fest positionieren#

Damit die Schaltfläche beim Scrollen sichtbar bleibt, fügen Sie Folgendes in das benutzerdefinierte CSS Ihrer Website ein:

css

#sidebar-booking-container {
  position: fixed;
  right: 20px; /* or left: 20px; */
  top: 50%;
  transform: translateY(-50%);
  z-index: 999;
}

Mehrere Instanzen#

Sie können weitere Instanzen der Seitenleiste erstellen, zum Beispiel mit einem eigenen Design für jeden Bereich Ihrer Website. Wiederholen Sie dazu die Schritte oben unter Buchungs-Seitenleiste. Jede Instanz hat ihren eigenen Integrationscode.

Eine veröffentlichte Seitenleiste ändern#

Öffnen Sie die Instanz unter MenüAnwendungenAlle Widgets, nehmen Sie Ihre Änderungen vor und speichern Sie. Die Seitenleiste auf Ihrer Website wird automatisch aktualisiert, Sie müssen den Code auf Ihrer Website also nicht ändern.