Kuinka lisätä nettiajanvaraus verkkosivulle? (kelluva Varaa aika -painike)

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

Varaa aika -painike

Lisätäksesi Varaa aika -painikkeen 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.


Painikkeen asentaminen suosittuihin verkkosivustojen rakentajiin

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 -painikkeen koodi Header kohtaan ja klikkaa Save.

mceclip0.png

Huomio: Käyttäjätunnuksesi (domain) tulee olla käytössä, jotta 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 tarkistaa, että Varaa nyt -painike näkyy verkkosivuillasi ja että se toimii. 

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

WordPress

Kirjaudu WordPress käyttäjällesi, sitten klikkaa Plugins sivuvalikosta > Add New, sitten hae ja asenna WPCode – Insert Headers and Footers.

Kun olet asentanut nämä kohdat, klikkaa Installed Plugins sivuvalikosta ja klikkaa Activate kohdasta WPCode – Insert Headers and Footers. 

Seuraavaksi, mene Settings > Header and Footer ja liitä koodi ainoastaan Header-osioon. Kun olet liittänyt koodin kaikkiin tarvittaviin osioihin, klikkaa Save.

Huomio: Käyttäjätunnuksesi (domain) tulee olla käytössä, jotta 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 vain suoran linkin nettiajanvaraussivulle niin, että ajanvaraussivu avautuu uuteen ikkunaan tai välilehteen, löydät ajanvaraussivun osoitteen Phorest-järjestelmästä, kohdasta Hallinta > Asetukset > Online.


  Facebook & Instagram

Haluatko linkittää nettiajanvarauksen Facebookiin ja Instagramiin? Klikkaa tästä ohjeeseen.

 

Oliko tämä artikkeli hyödyllinen?
26/53 koki tästä olevan apua