Varaus sivupalkki

Varaus sivupalkki -widget lisää verkkosivustollesi painikkeen. Kun kävijä napsauttaa sitä, näytön reunasta liukuu esiin sivupalkki, jossa on Barberly-varaussivusi. Kävijä palaa sivulle sulkemalla sivupalkin. Se vie vähän tilaa, joten se sopii sivuston jokaiselle sivulle, myös pitkille sivuille, joilla kiinteä painike katoaa näkyvistä vieritettäessä.

Luo uusi instanssi#

Kirjaudu Barberly-tilillesi osoitteessa portal.barberly.com.
Siirry kohtaan ValikkoSovelluksetKaikki Widgetit.
Valitse Varaus sivupalkki.
Valitse Luo uusi instanssi.
Anna instanssille nimi, esimerkiksi ”Pääsivupalkki”.

Asetukset#

Painikkeen teksti: Sivupalkin avaavan painikkeen teksti.
Varauksen URL-osoite: Sivupalkissa näytettävän Barberly-varaussivusi URL-osoite.
Sivupalkin sijainti: Näytön reuna, jolta sivupalkki avautuu, oikea tai vasen.

Tyylit#

Painikkeen tyyli

Taustan väri: Painikkeen väri.
Tekstin väri: Painikkeen tekstin väri. Valitse väri, joka erottuu selvästi taustasta.
Pehmuste: Painikkeen sisäinen tila.
Rajauksen säde: Kuinka pyöristetyt painikkeen kulmat ovat.
Fontin paino: Normaali, lihavoitu ja niin edelleen.

Sivupalkin tyyli

Rajauksen säde: Kuinka pyöristetyt sivupalkin kulmat ovat.
Laatikon varjo: Varjo sivupalkin ympärillä.
leveys: Kuinka suuren osan näytöstä sivupalkki vie, erikseen tietokoneelle ja mobiilille.

Pienemmillä näytöillä sivupalkki vie suuremman osan näytön leveydestä, ja sulkemispainike pysyy selvästi näkyvissä.

Lisää sivupalkki verkkosivustollesi#

Esikatselu näyttää painikkeen ja sivupalkin. Napsauta painiketta ja tarkista, että sivupalkki liukuu esiin varaussivusi kanssa.

Kopioi koodi kohdasta Kopioi tämä koodi verkkosivustollesi.
Liitä se verkkosivustosi HTML-koodiin siihen kohtaan, jossa painikkeen pitää näkyä.
Tallenna ja julkaise verkkosivustosi.

Esimerkkikoodi:

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>

Ohjeet eri alustoille: WordPress, Wix ja Squarespace.

Pidä painike kiinteässä paikassa#

Jotta painike pysyy näkyvissä kävijän vierittäessä sivua, lisää tämä sivustosi mukautettuun CSS:ään:

css

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

Useita instansseja#

Voit luoda lisää sivupalkki-instansseja, esimerkiksi eri ulkoasulla sivuston eri osioihin. Toista yllä olevat vaiheet kohdassa Varaus sivupalkki. Jokaisella instanssilla on oma integrointikoodinsa.

Päivitä julkaistu sivupalkki#

Avaa instanssi kohdassa ValikkoSovelluksetKaikki Widgetit, tee muutokset ja tallenna. Sivustosi sivupalkki päivittyy automaattisesti, joten sivuston koodia ei tarvitse muuttaa.