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.
Kelluva Varaa aika -painike
Lisätäksesi kelluvan 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>
Huomio: Sinun tulee laittaa YrityksenPhorestID tekstin tilalle oma tunnuksenne. Näette sen nettiajanvarauksen URL-osoitteesta. Löydät Phorest-verkkotunnuksesi nettiajanvarauksesi suoran linkin lopusta. Jos ajanvarauksenne osoite on esimerkiksi https://phorest.com/salon/demofinland, niin tunnus on demofinland.
Oman kustomoidun varauspainikkeen käyttö
Jos haluat käyttää omaa Varaa aika -painiketta, klikkaa tästä ohjeeseen.
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.
Kirjaudu sisään Squarespace käyttäjällesi, sitten mene verkkosivustosi kohtaan kohdasta Websites ja klikkaa Edit Site.
Klikkaa Settings vasemmasta sivupalkista > Advanced > Code Injection, sitten lisää Varaa nyt -painikkeen koodi Header kohtaan ja klikkaa Save.
Huomio: Käyttäjätunnuksesi (domain) tulee olla käytössä, jotta Varaa nyt -painike tulee näkyviin.
Kirjaudu Wix käyttäjällesi, sitten mene Settings > Tracking & Analytics kohdasta Advanced Settings avaa Tracking Tools -sivu. Klikkaa + New Tool, sitten Custom.
Liitä koodi, kopioi alla olevat asetukset ja klikkaa Apply.
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.
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.
Painikkeen avaaminen automaattisesti laskeutumissivulla
Voit saada Varaa nyt -painikkeen avautumaan automaattisesti, kun siirryt verkkosivulle lisäämällä sivun URL-osoitteen loppuun #onlinebookings.
Esimerkiksi www.phorest.com -osoitteesta tulisi www.phorest.com#onlinebookings
Suora linkki nettiajanvaraukseen
Jos sinulla on jo Varaa aika -painike verkkosivustollasi etkä halua käyttää kelluvaa Varaa aika -painiketta, voit linkittää Phorest-nettiajanvarauksesi suoran linkin nykyiseen varauspainikkeeseen.
Oman kustomoidun Varaa nyt -painikkeen käyttö
Oletuksena, kun lisäät koodin verkkosivustollesi, tulee automaattisesti näkyviin.
Jos haluat piilottaa tämän painikkeen ja käyttää sen sijaan omaa mukautettua painiketta, voit tehdä sen käyttämällä seuraavaa koodia:
<script src="https://booking-widget.phorestcdn.com/obwidget.bundle.js"></script>
<script>window.widget = new OBWidget('YrityksenPhorestID', {hide_widget_button: true, custom_button_id: "online-booking-button"})</script>
Kustomoidussa painikkeessa tulee olla seuraava koodi:
<a href="#onlinebookings" id="online-booking-button">Book Now</a>
Yllä oleva <a>-tunniste voidaan mukauttaa CSS:n avulla vastaamaan verkkosivuston tyyliä.
Tällä hetkellä yhdellä sivulla voi olla vain yksi kustomoitu painike, koska samalla sivulla olevilla kustomoiduilla painikkeilla ei voi olla samaa tunnusta.
Facebook & Instagram
Haluatko linkittää nettiajanvarauksen Facebookiin ja Instagramiin? Klikkaa tästä ohjeeseen.