Varausnapin tai upotetun varaussivun lisääminen kotisivuille

Päivitetty 24.4.2018

HUOM: Jos käytät Wordpressiä, katso ohje Wordpress-pluginin käytöstä

Varaussivusi osoitteen löydät Slotista, Asetukset → Varaussivu -näkymästä.

Varausnapin lisääminen

Yksinkertaisimmillaan asiakkaat voi ohjata varaussivulle lisäämällä kotisivuille täysin tavallinen linkki tai painike, joka ohjaa omalle varaussivullesi.

Valmiiksi tyylitellyn varauspainikkeen saat lisäämällä seuraavan koodinpätkän sivullesi, minne haluat varauspainikkeen lisättävän. Korvaa "ESIMERKKI" oman yrityksesi varausosoitteen mukaisesti.

<a class="slotti-book-now"  
   href="https://slotti.fi/booking/ESIMERKKI">
   Varaa aika
</a>  
<script src="https://slotti.fi/static/js/embed.js"></script>  

Mikäli lisäät useamman varauspainikkeen sivuillesi, lisää <script ...-osuus vain kerran sivun koodin loppuun (esim. footeriin).

Varausnapin muuttaminen

Varausnapista löytyy useampi versio erilaisia nettisivuja varten. Varausnappia saa muokattua helposti data- attribuuttien avulla.

data-attribuutit
  • data-btn-theme - light (oletus), dark, orange, blue, none - Muuttaa napin väriteemaa. none ei lisää nappiin mitään tyylejä, jolloin napin ulkoasua voi muokata vapaasti kirjoittamalla omat tyylit.
  • data-btn-size - default (oletus), small - Muuttaa napin kokoa.
  • data-icon - slotti (oletus), none - Valitsee napissa näytettävän ikonin
  • data-lang- fi, sv, en - Minkä kieliselle varaussivulle asiakas ohjataan. Oletuksena Slotti tunnistaa kielen asiakkaan selaimen asetusten perusteella.
  • data-user-gave-tracking-consent - Aseta true jos on tiedossa jo esim. evästeen perusteella että käyttäjä on antanut luvan kävijäseurantaan

Esimerkki

Allaoleva koodinpätkä lisää pienen, tummateemaisen ja ikonittoman varauspainikkeen.

<a class="slotti-book-now"  
   href="https://slotti.fi/booking/ESIMERKKI"
   data-btn-theme="dark"
   data-btn-size="small"
   data-icon="none">
   Varaa aika
</a>  
<script src="https://slotti.fi/static/js/embed.js"></script>  

Varaussivun upottaminen kotisivuille

Varaussivun upottaminen kotisivulle onnistuu samalla koodinpätkällä kuin varausnapin lisäys. Upotuksen saa käyttöön käyttämällä data- -attribuutteja.

Upotettaessa varaussivua, voit valita joko upotuksen kaikenkokoisille laitteille, tai upotuksen suurille laitteille ja varauspainikkeen pienille laitteille (esim. puhelimet). Suosittelemme jälkimmäistä, koska tällöin varaussivu voi aueta koko näytölle ja asettua applikaatiomaisesti näytölle eliminoiden häiritsevän mahdollisuuden skrollata pois varaussivunäkymästä vahingossa.

Hyödynnä myös varaussivun ulkoasun muokkausmahdollisuudet sivua upottaessasi.

data-attribuutit
  • data-embed - true (kaikki laitteet) tai non-small-devices (isot laitteet) - määrittää kuinka upotuksen.

HUOM: Katso myös varausnapin yhteydessä esitellyt data-attribuutit yltä.

Esimerkki

Allaoleva koodinpätkä upottaa varaussivun nettisivuun isoille laitteille, mutta näyttää oranssiteemaisen varausnapin pienemmillä laitteilla.

<a class="slotti-book-now"  
   href="https://slotti.fi/booking/ESIMERKKI"
   data-btn-theme="orange"
   data-embed="non-small-devices">
   Varaa aika
</a>  
<script src="https://slotti.fi/static/js/embed.js"></script>  

Isoilla laitteilla

Pienillä laitteilla