Bokning i sidofält

Widgeten Sidofält för bokning lägger till en knapp på din webbplats. När besökaren klickar på den glider ett sidofält in från skärmens kant med din bokningssida i Barberly. Besökaren stänger sidofältet för att komma tillbaka till sidan. Det tar lite plats och passar därför på alla sidor, även långa sidor där en fast knapp försvinner när man skrollar.

Skapa en ny instans#

Logga in på ditt Barberly-konto på portal.barberly.com.
Gå till MenyApparAlla widgetar.
Klicka på Sidofält för bokning.
Välj Skapa ny instans.
Ge instansen ett namn, till exempel "Huvudsidofält för bokning".

Inställningar#

Knapptext: Texten på knappen som öppnar sidofältet.
URL för bokning: Adressen till din bokningssida i Barberly som visas i sidofältet.
Sidofältets position: Den sida av skärmen som sidofältet öppnas från, höger eller vänster.

Stilar#

Knappens stil

Bakgrundsfärg: Knappens färg.
Textfärg: Färgen på knappens text. Välj en som syns tydligt mot bakgrunden.
Stoppning: Utrymmet inuti knappen.
Radie för kantlinje: Hur rundade knappens hörn är.
Font Vikt: Normal, fet och så vidare.

Sidofältets stil

Radie för kantlinje: Hur rundade sidofältets hörn är.
Box Skugga: En skugga runt sidofältet.
bredd: Hur stor del av skärmen sidofältet tar upp, inställt separat för dator och mobil.

På mindre skärmar tar sidofältet upp en större del av skärmens bredd, och stängningsknappen syns hela tiden tydligt.

Lägg till sidofältet på din webbplats#

Förhandsvisningen visar knappen och sidofältet. Klicka på knappen och kontrollera att sidofältet glider in med din bokningssida.

Kopiera koden i avsnittet Kopiera den här koden till din webbplats.
Klistra in den i webbplatsens HTML där knappen ska visas.
Spara och publicera webbplatsen.

Exempelkod:

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>

Stegen för respektive plattform finns i guiderna för WordPress, Wix och Squarespace.

Håll knappen på en fast plats#

Om knappen ska synas medan besökarna skrollar lägger du till detta i webbplatsens anpassade CSS:

css

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

Flera instanser#

Du kan skapa fler sidofältsinstanser, till exempel med en egen design för varje del av webbplatsen. Upprepa stegen ovan under Sidofält för bokning. Varje instans har sin egen integrationskod.

Uppdatera ett publicerat sidofält#

Öppna instansen under MenyApparAlla widgetar, gör dina ändringar och spara. Sidofältet på webbplatsen uppdateras automatiskt, så du behöver inte ändra koden på din sajt.