Slotti ajanvaraus Wordpress sivuille - pluginin käyttö
Ajanvarauspainikkeen tai upotetun varaussivun lisäät wordpressillä rakennetuille kotisivuille helpoiten käyttämällä Slotin Wordpress-pluginia.
Pluginin asennus
Löydät Slotti-pluginin Wordpress-lisäosahakemistosta esim. Slotti-hakusanalla.
Pluginin käyttö
Varauspainike
Varauspainiketta ja / tai upotusta ohjataan niin kutsutulla shortcodella. Shortcode lisätään sivun tekstiin
Yksinkertaisimmillaan varauspainikkeen lisäys onnistuu lisäämällä seuraavan koodinpätkän sivun tekstikenttään, jolloin sivulle ilmestyy alla kuvattu varauspainike.
[slotti url="https://slotti.fi/booking/ESIMERKKI"]
Varauspainikkeen muokkaus
Varauspainiketta voi muokata lisäämällä shortcodeen data-
-etuliitteisiä parametreja.
Esimerkiksi:
[slotti url="https://slotti.fi/booking/Teonos/" data-btn-theme="dark" data-btn-size="small" data-icon="none"]
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 ikonindata-lang
-fi
,sv
,en
- Minkä kieliselle varaussivulle asiakas ohjataan. Oletuksena Slotti tunnistaa kielen asiakkaan selaimen asetusten perusteella.text
- Voit korvata tällä napissa näkyvän tekstin, joka on oletuksena "VARAA AIKA".
Upotus
Varaussivun voi upottaa kotisivulle suoraan lisäämällä shortcodeen data-embed
-parametrin. data-embed="true"
upottaa varaussivun kotisivulle kaikenkokoisilla laitteilla, kun taas data-embed="non-small-devices"
upottaa varaussivun suurilla laitteilla ja näyttää varauspainikkeen pienemmillä laitteilla. Suosittelemme jälkimmäistä, koska tällöin varaussivu voi aueta ja asettua pienen laitteen koko näytölle applikaatiomaisesti halliten skrollausta paremmin.
[slotti url="https://slotti.fi/booking/Teonos/" data-btn-theme="orange" data-embed="non-small-devices"]
Upotettua varaussivua voi säätää seuraavilla parametreilla:
data-embed
-true
(kaikki laitteet) tainon-small-devices
(isot laitteet) - määrittää minkä kokoisilla laitteilla upotusta käyteään.data-margin
-none
- poistaa varaussivun sivumarginaalit iframe-kehyksen sisältä ja varaussivu asettuu kehyksen vasempaan laitaan.data-default-height
- esim.800
asettaa iframe-kehyksen oletuskorkeuden. Varaussivu käyttää koko saatavilla olevan korkeustilan.data-header
-none
poistaa varaussivun yläpalkin näkyvistädata-return-url-navigate
-parent
- Valitsee navigoidaanko varaussivun iframe-kehys (oletus) vai koko ympäröivä sivu (parent) "kiitos varauksesta"-sivulle onnistuneen varauksen jälkeen.