Varauksen ponnahdusikkuna -widget lisää verkkosivustollesi painikkeen. Kun kävijä napsauttaa sitä, Barberly-varaussivusi avautuu ponnahdusikkunaan keskelle näyttöä, joten kävijä pysyy samalla sivulla varauksen ajan. Voit käyttää sitä koko sivustolla tai yksittäisillä sivuilla, kuten palvelusivuilla tai blogikirjoituksissa.
Luo uusi instanssi#
- Kirjaudu Barberly-tilillesi osoitteessa portal.barberly.com.
- Siirry kohtaan ValikkoSovelluksetKaikki Widgetit.
- Valitse Varauksen ponnahdusikkuna.
- Valitse Luo uusi instanssi.
- Anna instanssille nimi, esimerkiksi ”Pääponnahdusikkuna”.
Asetukset#
- Painikkeen teksti
- Ponnahdusikkunan avaavan painikkeen teksti.
- Varauksen URL-osoite
- Ponnahdusikkunassa näytettävän Barberly-varaussivusi URL-osoite.
Tyylit#
- 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.
- Rajauksen säde
- Kuinka pyöristetyt ponnahdusikkunan kulmat ovat.
- Laatikon varjo
- Varjo ponnahdusikkunan ympärillä.
Mobiililaitteissa ponnahdusikkuna mukautuu näytön kokoon, ja siinä on X-painike sen sulkemiseen.
Lisää ponnahdusikkuna verkkosivustollesi#
Esikatselu näyttää painikkeen ja ponnahdusikkunan. Napsauta painiketta ja tarkista, että ponnahdusikkuna avautuu 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:
<div id="popup-booking-container"></div>
<script src="https://widgets.barberly.com/barberly-widgets.js" data-business-id="house13" data-widget-id="popup_booking" data-container-id="popup-booking-container"></script>Ohjeet eri alustoille: WordPress, Wix ja Squarespace.
Useita instansseja#
Voit luoda lisää ponnahdusikkunainstansseja, esimerkiksi eri ulkoasulla sivuston eri osioihin. Toista yllä olevat vaiheet kohdassa Varauksen ponnahdusikkuna. Jokaisella instanssilla on oma integrointikoodinsa.
Päivitä julkaistu ponnahdusikkuna#
Avaa instanssi kohdassa ValikkoSovelluksetKaikki Widgetit, tee muutokset ja tallenna. Sivustosi ponnahdusikkuna päivittyy automaattisesti, joten sivuston koodia ei tarvitse muuttaa.