Booking i sidebar

Widgetten Sidebar til booking tilføjer en knap til din hjemmeside. Når den besøgende klikker på den, glider en sidebar ind fra kanten af skærmen med din bookingside i Barberly. Den besøgende lukker sidebaren for at vende tilbage til siden. Den fylder ikke meget og passer derfor godt på alle sider, også lange sider, hvor en fast knap forsvinder ud af syne, når man scroller.

Opret en ny instans#

Log ind på din Barberly-konto på portal.barberly.com.
Gå til MenuAppsAlle widgets.
Klik på Sidebar til booking.
Vælg Opret ny instans.
Giv instansen et navn, for eksempel "Primær booking-sidebar".

Indstillinger#

Tekst på knappen: Teksten på knappen, der åbner sidebaren.
Booking-URL: Adressen på din bookingside i Barberly, som vises i sidebaren.
Sidebarens placering: Den side af skærmen, sidebaren åbner fra, højre eller venstre.

Stilarter#

Knappens stil

Baggrundsfarve: Knappens farve.
Tekstfarve: Farven på knappens tekst. Vælg en, der står tydeligt mod baggrunden.
Polstring: Afstanden inde i knappen.
Grænseradius: Hvor afrundede knappens hjørner er.
Skrifttypevægt: Normal, fed og så videre.

Sidebarens stil

Grænseradius: Hvor afrundede sidebarens hjørner er.
Box Shadow: En skygge omkring sidebaren.
bredde: Hvor meget af skærmen sidebaren fylder, indstillet separat for computer og mobil.

På mindre skærme fylder sidebaren mere af skærmens bredde, og lukkeknappen er hele tiden tydeligt synlig.

Tilføj sidebaren til din hjemmeside#

Forhåndsvisningen viser knappen og sidebaren. Klik på knappen, og tjek, at sidebaren glider ind med din bookingside.

Kopier koden i afsnittet Kopier denne kode til din hjemmeside.
Indsæt den i hjemmesidens HTML, hvor knappen skal vises.
Gem og udgiv din hjemmeside.

Eksempel på kode:

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>

Trinnene for de enkelte platforme står i vejledningerne til WordPress, Wix og Squarespace.

Hold knappen på et fast sted#

Hvis knappen skal være synlig, mens de besøgende scroller, kan du tilføje dette til hjemmesidens brugerdefinerede CSS:

css

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

Flere instanser#

Du kan oprette flere sidebar-instanser, for eksempel med sit eget design til hver del af hjemmesiden. Gentag trinnene ovenfor under Sidebar til booking. Hver instans har sin egen integrationskode.

Åbn instansen under MenuAppsAlle widgets, foretag dine ændringer, og gem. Sidebaren på hjemmesiden opdateres automatisk, så du behøver ikke at ændre koden på dit site.