Kuinka voin lisätä nettiajanvarauksen verkkosivuilleni? (kelluva Varaa aika -painike)

Tämä artikkeli kertoo kuinka voit lisätä nettiajanvarauksen omalle verkkosivustollesi ja kuinka asettaa painike suosituille verkkosivusto palveluille kuten Squarespace, WordPress, Wix ja Weebly.

Varaa aika -painike

Lisätäksesi Varaa aika -painike verkkosivustollesi, kopioi alla oleva koodi ja liitä se verkkosivustosi Alatunnisteeseen (Footer). 

<script src="https://booking-widget.phorestcdn.com/obwidget.bundle.js"></script>

<script>
window.widget = new OBWidget('YrityksenPhorestID')
</script>

 

Linkki ajanvaraukseen
Varaa aika-painikkeen lisäämisen jälkeen voit lisätä muihin verkkosivusi osioihin, kuten päävalikkoon linkin, joka avaa ajanvarauksen. Käytä tähän seuraavanlaista osoitemuotoa:

www.nettisivunosoite.com/#onlinebookings

Huomio: Sinun tulee laittaa YrityksenPhorestID tekstin tilalle oma tunnuksenne. Näette sen nettiajanvarauksen URL-osoitteesta. Jos ajanvarauksenne osoite on esimerkiksi https://phorest.com/book/salons/demofinland, niin tunnus olisi demofinland. Nettiajanvarauksenne URL-osoitteen saatte kopioitua Phorestista kohdasta Hallinta > Asetukset > Online.

Jos käytät jotain näistä suosituista verkkosivualustoista: Squarespace, WordPress, Wix tai Weebly, löydät alempaa yksityiskohtaisemmat ohjeet miten ja minne lisätä tarvittavat koodit. 

Squarespace

Kirjaudu sisään Squarespace käyttäjällesi, sitten mene verkkosivustosi kohtaan kohdasta Websites ja klikkaa Edit Site.

mceclip4.png

Klikkaa Settings vasemmasta sivupalkista > Advanced > Code Injection, sitten lisää Varaa Nyt painike koodi Header kohtaan ja klikkaa Save.

mceclip0.png

Huomio: Käyttäjätunnuksesi (domain) tulee olla käytössä, että Varaa nyt painike tulee näkyviin.

Wix

Kirjaudu Wix käyttäjällesi, sitten mene Settings > Tracking & Analytics kohdasta Advanced Settings avaa Tracking Tools sivu. Klikkaa + New Tool, sitten Custom

mceclip6.png

Liitä koodi, kopioi alla olevat asetukset ja klikkaa Apply.

mceclip7.png

Koodi on nyt lisätty ja voit nyt tarkistaa, että Varaa Nyt painike näkyy verkkosivuillasi ja että se toimii. 

Huomio: Käyttäjätunnuksesi (domain) tulee olla käytössä, että Varaa nyt painike tulee näkyviin.

WordPress

Kirjaudu WordPress käyttäjällesi, sitten klikkaa Plugins sivu valikosta > Add New, sitten hae ja asenna Head, Footer and Post Injections osiot.

Kun olet asentanut nämä kohdat, klikkaa Installed Plugins sivu valikosta ja klikkaa Activate kohdasta Header, Footer and Post Injections.

Seuraavaksi, mene Settings > Header and Footer sitten liitä koodi kaikkiin tämän sivun osioihin paitsi then 'Only On The Home Page' kohtaan. Mobile osiot on sisällytettävä. Kun olet liittänyt koodin kaikkiin tarvittaviin osioihin, klikkaa Save.

Huomio: Käyttäjätunnuksesi (domain) tulee olla käytössä, että Varaa nyt painike tulee näkyviin.

Weebly
Kirjaudu Weebly käyttäjällesi, sitten klikkaa Edit SiteSettingsSEO, ja liitä tämän artikkelin alussa oleva koodi kohtaan Header Code.

Suora linkki nettiajanvaraukseen

Mikäli haluat Varaa aika-painikkeen sijaan lisätä verkkosivuille ihan vain suoran linkin nettiajanvaraussivulle, niin että ajanvaraussivu avautuu uuteen ikkunaan tai välilehteen, löydät ajanvaraussivun osoitteen, kun menet Phorest järjestelmästäsi kohtaan Hallinta -> Asetukset -> Online.


iFramen Käyttö

Emme suosittele iFramen käyttöä verkkosivuilla Varaa aika -painikkeen sijaan, sillä uutta Varaa aika -painiketta pidetään yleisesti parempana käyttökokemuksena asiakkaille, joka auttaa lisämään nettiajanvarauslukuja.


Mikäli kuitenkin haluat lisätä nettiajanvarauksen sivuillesi iframella, käytä tätä alla olevaa koodia
<iframe src="https://phorest.com/book/salons/YrityksenPhorestID" height="1000px" width="100%" frameBorder="0"></iframe>

Huomio: Sinun tulee laittaa YrityksenPhorestID tekstin tilalle oma tunnuksenne. Näette sen nettiajanvarauksen URL-osoitteesta. Jos ajanvarauksenne osoite on esimerkiksi https://phorest.com/book/salons/demofinland, niin tunnus olisi demofinland. Nettiajanvarauksenne URL-osoitteen saatte kopioitua Phorestista kohdasta Hallinta > Asetukset > Online.

Iframen käyttö (mobiilinäkymä)

Mikäli pidätte enemmän nettiajanvarausten mobiiliversiosta ja haluatte käyttää sitä myös verkkosivuillanne, laittakaa iframe sellaiseen osioon, jonka leveys on maksimissaan 765px.

 

  Facebook & Instagram Asennus

Haluatko linkata Nettiajanvaraus sivusi Facebookiin ja Instagramiin? Klikkaa tästä ohjeeseen.

 

Oliko tämä artikkeli hyödyllinen?
25/48 koki tästä olevan apua