Sidefelt for bestilling

Widgeten Sidefelt for bestilling legger til en knapp på nettstedet ditt. Når besøkende klikker på den, glir et sidefelt inn fra kanten av skjermen med bookingsiden din i Barberly. Besøkende lukker sidefeltet for å gå tilbake til siden. Det tar lite plass og passer derfor på alle sidene på nettstedet, også lange sider der en fast knapp forsvinner ut av synet når man ruller.

Opprett en ny forekomst#

Logg inn på Barberly-kontoen din på portal.barberly.com.
Gå til MenyApperAlle widgets.
Klikk på Sidefelt for bestilling.
Velg Opprett ny forekomst.
Gi forekomsten et navn, for eksempel «Hovedsidefelt for booking».

Innstillinger#

Knappens tekst: Teksten på knappen som åpner sidefeltet.
URL for bestilling: URL-en til bookingsiden din i Barberly som vises i sidefeltet.
Sidefeltets plassering: Hvilken side av skjermen sidefeltet åpnes fra, høyre eller venstre.

Stiler#

Knappestil

Bakgrunnsfarge: Fargen på knappen.
Tekstfarge: Fargen på teksten på knappen. Velg en farge som skiller seg tydelig fra bakgrunnen.
Polstring: Avstanden inne i knappen.
Grenseradius: Hvor avrundede hjørnene på knappen er.
Skriftvekt: Normal, fet og så videre.

Sidefeltstil

Grenseradius: Hvor avrundede hjørnene på sidefeltet er.
Box Shadow: En skygge rundt sidefeltet.
bredde: Hvor mye av skjermen sidefeltet tar opp, angitt separat for datamaskin og mobil.

På mindre skjermer tar sidefeltet opp mer av skjermbredden, og lukkeknappen er hele tiden godt synlig.

Legg sidefeltet til på nettstedet ditt#

Forhåndsvisningen viser knappen og sidefeltet. Klikk på knappen for å sjekke at sidefeltet glir inn med bookingsiden din.

Kopier koden fra delen Kopier denne koden til nettstedet ditt.
Lim den inn i HTML-koden på nettstedet ditt der knappen skal vises.
Lagre og publiser nettstedet ditt.

Eksempelkode:

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>

Fremgangsmåten for hver plattform finner du i veiledningene for WordPress, Wix og Squarespace.

Hold knappen på et fast sted#

For at knappen skal være synlig mens besøkende ruller, legger du til dette i den egendefinerte CSS-en på nettstedet ditt:

css

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

Flere forekomster#

Du kan opprette flere sidefeltforekomster, for eksempel med et eget design for hver del av nettstedet. Gjenta trinnene ovenfor under Sidefelt for bestilling. Hver forekomst har sin egen integrasjonskode.

Oppdater et publisert sidefelt#

Åpne forekomsten under MenyApperAlle widgets, gjør endringene og lagre. Sidefeltet på nettstedet ditt oppdateres automatisk, så du trenger ikke endre koden på nettstedet.