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 ikonin
• data-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) tai non-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.