Online-Buchen-Button

Fügen Sie Ihrer Website einen anpassbaren Buchungs-Button hinzu, der auf Ihre Barberly-Buchungsseite weiterleitet.

Tags:

Das Online-Buchen-Button-Widget fügt Ihrer Website einen anpassbaren Button hinzu, der Nutzer auf Ihre Barberly-Buchungsseite weiterleitet.

Funktionsweise

Wenn Besucher auf den Button auf Ihrer Website klicken, werden sie auf Ihre Barberly-Buchungsseite weitergeleitet, wo sie einen Termin vereinbaren können.

Anwendungsfälle

Fügen Sie ihn Ihrer Startseite hinzu, um Buchungen sofort zugänglich zu machen
Platzieren Sie ihn auf Ihrer Serviceseite neben Leistungsbeschreibungen
Integrieren Sie ihn in Kopf- oder Fußzeile Ihrer Website für einfachen Zugriff von jeder Seite
Fügen Sie ihn Ihrer Kontaktseite als Alternative zur telefonischen Buchung hinzu

Einrichtung Ihres Online-Buchen-Buttons

Neue Instanz erstellen

Melden Sie sich in Ihrem Barberly-Konto unter portal.barberly.com an
Navigieren Sie zu Menü → Apps → Alle Widgets
Klicken Sie auf die Option Online-Buchen-Button
Wählen Sie Neue Instanz erstellen
Geben Sie Ihrer neuen Button-Instanz einen Namen (z.B. “Startseiten-Button”)

Button-Einstellungen konfigurieren

Im Konfigurationsbereich können Sie festlegen:

Button-Text: Passen Sie den Text an, der auf dem Button erscheint (z.B. “Jetzt buchen”, “Termin vereinbaren” usw.)
Buchungs-URL: Geben Sie die URL zu Ihrer Barberly-Buchungsseite ein

Button-Stil anpassen

Passen Sie folgende Stiloptionen an das Design Ihrer Website an:

Hintergrundfarbe: Wählen Sie eine Farbe, die zu Ihrem Farbschema passt
Textfarbe: Wählen Sie eine Farbe, die einen guten Kontrast bietet
Padding: Passen Sie den Innenabstand des Buttons an (Format: oben/rechts/unten/links)
Border Radius: Legen Sie die Rundung der Button-Ecken fest
Schriftgewicht: Wählen Sie normale oder fette Schrift
Box Shadow: Fügen Sie einen Schatteneffekt hinzu, damit der Button hervorsticht

Vorschau und Test

Nutzen Sie die Live-Vorschau, um zu sehen, wie Ihr Button auf der Website aussieht. Klicken Sie auf den Button, um zu testen, ob die Weiterleitung zur Buchungsseite funktioniert.

Integrationscode erhalten

Wenn Sie mit Ihrem Button zufrieden sind:

Kopieren Sie den generierten Code aus dem Bereich “Diesen Code auf Ihrer Website einfügen”
Fügen Sie den Code in das HTML Ihrer Website an der gewünschten Stelle ein
Speichern und veröffentlichen Sie Ihre Website-Änderungen

Integrationsanleitungen für Plattformen

Für plattformspezifische Integrationsanleitungen siehe diese Guides:

Beispiel-Integrationscode

<div id="8854691ef448cad2ae94bb4cc5b9a-container"></div>
<script src="https://widgets.barberly.com/barberly-widgets.js" data-business-id="house13" data-widget-id="button_8854691ef448cad2ae94bb4cc5b9a" data-container-id="8854691ef448cad2ae94bb4cc5b9a-container"></script>

Mehrere Button-Instanzen verwalten

Sie können mehrere Button-Instanzen mit unterschiedlichen Designs für verschiedene Bereiche Ihrer Website erstellen:

Melden Sie sich in Ihrem Barberly-Konto an
Navigieren Sie zu Menü → Apps → Alle Widgets
Wählen Sie “Online-Buchen-Button”
Erstellen Sie zusätzliche Instanzen nach Bedarf
Jede Instanz erhält ihren eigenen Integrationscode

Button aktualisieren

So aktualisieren Sie einen bereits auf Ihrer Website eingebundenen Button:

Melden Sie sich in Ihrem Barberly-Konto an
Navigieren Sie zu Menü → Apps → Alle Widgets
Suchen und bearbeiten Sie die Button-Instanz
Nehmen Sie die gewünschten Änderungen vor
Speichern Sie die Änderungen
Der Button auf Ihrer Website wird automatisch aktualisiert (kein erneutes Einfügen des Codes nötig)

Online-Buchen-Button