Boekingszijbalk

De widget Boekingszijbalk voegt een knop toe aan uw website. Met een klik daarop schuift er vanaf de rand van het scherm een zijbalk met uw Barberly-boekingspagina in beeld. Bezoekers sluiten de zijbalk om terug te gaan naar de pagina. De widget neemt weinig ruimte in en past daardoor op elke pagina van de website, ook op lange pagina's waar een vaste knop bij het scrollen uit beeld verdwijnt.

Een nieuwe instantie maken#

1. Log in op uw Barberly-account via portal.barberly.com.
2. Ga naar Menu→Apps→Alle widgets.
3. Klik op Zijbalk boeken.
4. Kies Nieuwe instantie maken.
5. Geef de instantie een naam, bijvoorbeeld "Hoofdzijbalk boeken".

Instellingen#

Stijlen#

Op kleinere schermen neemt de zijbalk een groter deel van de schermbreedte in, en de sluitknop blijft goed zichtbaar.

De zijbalk op uw website plaatsen#

De live preview toont de knop en de zijbalk. Klik op de knop om te controleren of de zijbalk met uw boekingspagina in beeld schuift.

1. Kopieer de code uit het onderdeel Kopieer deze code naar uw website.
2. Plak deze in de HTML van uw website op de plek waar de knop moet verschijnen.
3. Sla uw website op en publiceer deze.

Voorbeeldcode:

<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>

De stappen per platform vindt u in de handleidingen voor WordPress, Wix en Squarespace.

De knop op een vaste plek houden#

Om de knop zichtbaar te houden terwijl bezoekers scrollen, voegt u dit toe aan de aangepaste CSS van uw website:

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

Meerdere instanties#

U kunt meer instanties van de zijbalk maken, bijvoorbeeld met een eigen ontwerp voor elk deel van uw website. Herhaal daarvoor de stappen hierboven onder Zijbalk boeken. Elke instantie heeft een eigen integratiecode.

Een gepubliceerde zijbalk wijzigen#

Open de instantie onder Menu→Apps→Alle widgets, breng uw wijzigingen aan en sla op. De zijbalk op uw website wordt automatisch bijgewerkt, dus u hoeft de code op uw website niet aan te passen.