Varauspainikkeen asentaminen verkkosivustollesi (skripti ja painikkeen koodi)

Tähän et tarvitse ohjelmoijaa. Kopioit Rentalbuddysta kaksi lyhyttä koodinpätkää ja liität ne verkkosivustollesi: toinen lataa Rentalbuddyn, toinen merkitsee kohdan, johon painike tulee. Tämä opas näyttää, minne kumpikin kuuluu, miksi tallentamasi sivun osoite on tärkeä ja mitä tarkistaa, kun painike ei näy.

Jos et halua koskea koodiin lainkaan, voit sen sijaan ohjata asiakkaat Rentalbuddyn ylläpitämälle varaussivulle linkillä tai QR-koodilla – katso opas suorista varauslinkeistä ja QR-koodeista.

Kaksi osaa ja miksi tarvitset molemmat

Osa	Mitä se tekee	Minne se kuuluu
Kopioi varausmoottorin koodi (skripti)	Lataa Rentalbuddyn verkkosivustollesi	Kerran, sivustosi koko sivustoa koskevaan koodikenttään (alatunniste / ”ennen `</body>`”)
Kopioi painikkeen koodi (painike)	Merkitsee kohdan, jossa painike näkyy	Sivulle, HTML-, Embed- tai koodilohkoon

Kumpikaan ei toimi yksin. Painikkeen koodi ilman skriptiä jättää tyhjän kohdan; skripti ilman painikkeen koodia ei näytä mitään. Pelkän painikkeen koodin kopioiminen on yleisin virhe. Ainoa poikkeus: varausviestien linkit (avaa lukko, palauta, jatka, siirrä) tarvitsevat skriptin vain sille sivulle, jonka ne avaavat – mutta se sivu on juuri se, jonka tallennat verkkosivustosi osoitteeksi, joten pidä skripti koko sivustolla.

Ennen kuin aloitat

Varauspainike määritetään toimipistekohtaisesti. Tee tämä jokaiselle toimipisteelle, jonka pitää olla varattavissa verkkosivustoltasi.
Jotkin kotisivukoneet eivät pysty ajamaan ulkopuolisia skriptejä lainkaan (Google Sites on yksi, johon vuokraamot ovat törmänneet). Käytä silloin Varauslinkki- tai Rentalbuddy-verkkosivusto-vaihtoehtoa.
Varmista, että toimipiste on oikeasti varattavissa – tuotteet, lukot ja aukiolopäivät. Painike voi olla asennettu täydellisesti, eikä silti olla mitään myytävää.

Vaiheet 1 ja 2: valitse ”Oma verkkosivustoni” ja ”Upotettu verkkosivustollesi”

Avaa vasemmasta valikosta Toimipisteet ja napsauta toimipistettä.
Avaa Varauspainike-välilehti. Kortin otsikko on Aloita 2 minuutissa – ”Valitse, miten asiakkaat pääsevät varaamaan.”
Kohdassa Missä asiakkaat varaavat? valitse Oma verkkosivustoni (”Käytä nykyistä verkkosivustoasi ja ohjaa asiakkaat sieltä varaamaan.”). Toinen vaihtoehto, Rentalbuddy-verkkosivusto (merkitty Suositeltu), on Rentalbuddyn ylläpitämä sivu, jota varten et tarvitse omaa verkkosivustoa.
Kohdassa Miten asiakkaat varaavat verkkosivustoltasi? valitse Upotettu verkkosivustollesi (merkitty Edistynyt – ”Lisää varauspainike sivustollesi. Asiakkaat varaavat poistumatta verkkosivustoltasi.”). Varauslinkki (merkitty Yksinkertainen) antaa sen sijaan linkin Rentalbuddy-sivullesi, jonka voit lisätä valikkoon tai painikkeeseen; koodia ei tarvita.

Onko painike käytössä? Tila ylhäällä

Heti kun valitset Upotettu verkkosivustollesi, vaiheiden yläosa näyttää, onko varauspainikkeesi nähty jollakin verkkosivustolla. Rentalbuddy tietää sen, koska painike ilmoittaa sivun, jolla se latautuu.

”Varauspainike on käytössä sivulla yoursite.com/booking” sekä tieto siitä, kuinka kauan sitten se nähtiin viimeksi. Yksi rivi jokaista verkkosivustoa kohti, jolla painike on nähty.
”Varauspainiketta ei ole vielä nähty millään verkkosivulla. Kun se on paikallaan, avaa sivu kerran, niin se näkyy täällä.”
Tarkista uudelleen päivittää tilan. Aiemmin nähdyn verkkosivuston tieto päivittyy noin kerran tunnissa, joten ”viimeksi nähty” voi olla hieman jäljessä. Omalla tietokoneellasi (localhost) tehtyjä testejä ei lasketa.

Sen alla: ”Tarkista sivu lisäämällä osoitteen loppuun ?rbCheck=1: pieni paneeli näyttää, mikä on kunnossa ja mitä puuttuu.” Avaa tarkistus verkkosivuillasi tekee tämän tallentamallesi sivun osoitteelle. Katso Tee painikkeen tarkistus alempaa.

Hoitaako joku muu verkkosivujasi? Hae lähetettävä linkki

Paina kohdan ”Hoitaako joku muu verkkosivujasi?” alla Hae lähetettävä linkki. Rentalbuddy luo linkin ja kopioi sen (Linkki kopioitu): ”Lähetä hänelle tämä linkki. Siinä ovat tämän toimipisteen asennusohjeet, ja se näyttää, kun painike on käytössä. Kirjautumista ei tarvita.” Avautuvan sivun otsikko on ”Lisää varauspainike verkkosivuillesi”, ja sivulla on kopioitava koodi sekä sama käytössäolon tila. Lähetä linkki verkkosuunnittelijallesi tai verkkotoimistollesi kuvakaappausten välittämisen sijaan. Linkin luomiseen tarvitset oikeuden muokata toimipisteitä.

Vaihe 3: kerro Rentalbuddylle, mitä kotisivukonetta käytät

Kohdassa Mitä kotisivukonetta käytät? valitse omasi: WordPress — lohkoeditori (+-painike lohkojen lisäämiseen), WordPress — sivunrakennustyökalu (esim. Elementor tai vastaava), WordPress — en ole varma, Wix, Squarespace, GoDaddy Website Builder, Webflow, Jimdo, IONOS (MyWebsite) tai Muu / en ole varma.

Koodi on sama kaikille kotisivukoneille – valinta muuttaa vain seuraavien vaiheiden vieressä näkyviä ohjeita, jotta ne vastaavat oman kotisivukoneesi valikoita. Seuraavat vaiheet tulevat näkyviin vasta, kun olet valinnut jonkin. Valintasi muistetaan tässä selaimessa.

Vaihe 4: lisää varausmoottori verkkosivustollesi (kerran)

Kohdassa Lisää varausmoottori verkkosivustollesi – ”Lataa Rentalbuddyn verkkosivustollesi. Lisää tämä kerran jokaista verkko-osoitetta kohti.” – napsauta Kopioi varausmoottorin koodi. Saat tällaisen rivin:

<script defer src="https://plugin.rentalbuddy.io/static/js/main.js"></script>

Käytä aina kopiointipainiketta äläkä kirjoita koodia käsin. Liitä se sivustosi koko sivustoa koskevaan koodikenttään, sivun loppuun (usein nimeltään mukautettu koodi, header/footer-koodi, seurantaskriptit tai ”ennen </body>”). Tallenna ja julkaise sitten sivustosi.

Mistä kohta löytyy yleisimmissä kotisivukoneissa (välilehden ohjeissa on yksityiskohdat; valikot muuttuvat, joten pidä näitä lähtökohtana):

WordPress – ei valmista kenttää. Asenna pieni ilmainen lisäosa, kuten ”Insert Headers and Footers” tai ”WPCode”, liitä koodi sen Footer- / ”ennen </body>” -kenttään ja tyhjennä mahdollinen välimuistilisäosa lopuksi. Elementorissa tai vastaavassa älä liitä koodia vain yhdelle sivulle.
Wix – Site & app settings → Custom code (joskus kohdassa Tracking & Analytics), sijainti ”Body – end”, käytä kohteessa All pages ja paina sitten Publish.
Squarespace – Settings → Advanced → Code injection → Footer. Kaikkiin Squarespace-paketteihin ei kuulu code injection -toimintoa.
Webflow – Site settings → Custom code → Footer code, ja julkaise sitten.
GoDaddy, Jimdo, IONOS – etsi sivuston asetuksista header/footer-HTML, mukautettu koodi tai seuranta; kaikki paketit eivät salli mukautettua koodia.

Liitä skripti vain kerran sivustoa kohti. Yksi sivusto, jossa on monta sivua: kerran, koko sivustolle. Useita erillisiä sivustoja: kerran jokaiselle. Useat kopiot ovat aiemmin palauttaneet asiakkaat etusivulle maksun jälkeen – jos et ole varma, hae sivuston yhteisistä koodikentistä rentalbuddy ja jätä vain yksi.

Vaihe 5: sijoita painike ja tallenna sivun osoite

Kohdassa Sijoita painike sinne, missä sen pitää näkyä – ”Lisää painike sivulle, jolla haluat varauksen näkyvän, ja kopioi sitten alla oleva koodinpätkä.”

Sivun osoite: ”URL, jossa Varaa-painike on käytössä”

Kirjoita sen sivun koko osoite, jolle painike tulee, esimerkiksi https://yoursite.com/booking.

Se on pakollinen upotetussa varauksessa – ”Pakollinen upotettua varausta varten.”
Sen on alettava https:// tai http:// – muuten ”URL-osoitteen on alettava https:// tai http://.”
Siinä ei saa olla ?-merkkiä – ”Sivusi osoitteessa ei saa olla ?-merkkiä (näin käy usein, jos liität esikatselu- tai testilinkin).” Poista kaikki ?-merkistä alkaen.
Jos toimipisteellä on myös Rentalbuddy-sivu, Käytä Rentalbuddy-URL-osoitetta täyttää sen sijaan kyseisen sivun osoitteen.

Miksi tämä osoite on niin tärkeä: jokainen linkki, jonka Rentalbuddy lähettää varausviesteissä – avaa lukko / näe PIN-koodi, palauta, jatka, siirrä alkamisaikaa – avaa tämän sivun ja sen päälle varausikkunan. Jos sivulla ei ole skriptiä (ja painiketta), asiakkaat päätyvät sille eivätkä koskaan pääse PIN-koodiinsa tai palautusvaiheeseen. Jo lähetettyjen viestien linkit seuraavat osoitetta, jonka olet nyt tallentanut, joten sen korjaaminen korjaa myös vanhat viestit. Rentalbuddy poistaa osoitteen lopusta /-merkin, kun se muodostaa linkit; jos sivusi aukeaa vain kauttaviivan kanssa (sähköpostin linkki antaa ”Not found” tai ”Forbidden”), pyydä verkkopalvelusi tarjoajaa saamaan sen toimimaan myös ilman kauttaviivaa. Lisää aiheesta oppaassa väärälle sivulle vievistä varauslinkeistä.

Osoite on tärkeä myös Apple Paylle: Rentalbuddy rekisteröi sen automaattisesti maksuverkkotunnukseksi Stripe-tilillesi (pelkkä verkkotunnus saa myös www.-version), kun yhdistät Stripen, kun tallennat uuden osoitteen ja joka yö. Verkkotunnuksia vain lisätään; Stripessä poistamasi verkkotunnus pysyy pois käytöstä.

Painikkeen koodi

Napsauta Kopioi painikkeen koodi rivillä Vakiovaraus. Saat tällaisen rivin:

<div id="rentalbuddy-checkout" data-site="your-location-id"></div>

Liitä se itse sivulle juuri siihen kohtaan, jossa painikkeen pitää näkyä, HTML-, Embed-, koodi- tai Custom HTML -lohkoon – ei tekstilohkoon (silloin koodi näkyy sivulla tekstinä) eikä koko sivuston asetuksiin. Tallenna ja julkaise sivu.

Vakiovaraus – ”Toimii tuotteille ja tapahtumille. Jos toimipisteesi tarjoaa molempia, asiakas valitsee, mitä varaa; jos tarjoat vain toista, hän siirtyy suoraan siihen.” Tämä on oikea valinta lähes kaikille.

Jokaisella rivillä on myös Esikatsele (avaa verkkosivustosi varausikkunan kanssa, jotta voit tarkistaa upotuksen – se vaatii kelvollisen, tallennetun osoitteen) ja QR-työkalut (QR-koodi, Kopioi varauslinkki, Lataa QR), joista kerrotaan oppaassa suorista varauslinkeistä ja QR-koodeista.

Erillinen jäsenyyspainike (Jäsenyyden osto)

Jos toimipiste myy jäsenyyttä, rivin Vakiovaraus alle tulee rivi Jäsenyyden osto (merkitty Valinnainen): ”Myös vakiopainikkeella voi ostaa jäsenyyden. Käytä tätä, jos haluat sivustollesi erillisen jäsenyyspainikkeen tai -linkin.” Sen painike avautuu suoraan jäsenyyksiisi. Jos tässä toimipisteessä ei voi ostaa jäsenyyttä, rivi on kohdassa Vaihtoehdot yhdelle varaustyypille merkinnällä Ei käytettävissä ja syyn kanssa – esimerkiksi ”Jäsenyydet eivät ole käytössä tällä tilillä.” tai ”Tässä toimipisteessä ei vielä myydä jäsenyyttä. Lisää jäsenyystuote, jotta voit käyttää tätä vaihtoehtoa.” Katso jäsenyysoppaasta, miten ne otetaan käyttöön.

Vaihtoehdot yhdelle varaustyypille

Suljettu osio Vaihtoehdot yhdelle varaustyypille sisältää vaihtoehdot Tuotevaraus ja Tapahtumavaraus. Käytä niitä vain, jos toimipisteesi tarjoaa sekä tuotteita että tapahtumia ja haluat painikkeen, joka ohittaa valinnan ja avautuu suoraan toiseen niistä.

Kun toimipiste lopettaa kyseisen tyypin myynnin

Jos Jäsenyyden osto-, Tuotevaraus- tai Tapahtumavaraus-painike (tai -linkki) on yhä verkkosivustollasi sen jälkeen, kun toimipiste on lopettanut kyseisen tyypin myynnin, asiakkaat eivät päädy tyhjään listaan. Varausikkuna avautuu kuten Vakiovaraus-painikkeella: valintaan toimipisteen myymien vaihtoehtojen välillä tai suoraan ainoaan vaihtoehtoon. Voit jättää vanhan painikkeen paikalleen, mutta kun vaihdat sen Vakiovaraus-koodiin, painikkeen teksti ei jää harhaanjohtavaksi.

Vaihe 6: tarkista, että kaikki toimii

Paina toimipisteen sivun yläosassa Tallenna.
Avaa julkaistu sivusi yksityisessä/incognito-ikkunassa tietokoneella ja puhelimella, jotta näet sen, minkä asiakkaat näkevät ilman välimuistia.
Palaa Varauspainike-välilehdelle ja paina Tarkista uudelleen. Tilan pitäisi nyt näyttää ”Varauspainike on käytössä sivulla …” ja verkkosivustosi.
Jos ei näytä, tee painikkeen tarkistus (alla) kyseisellä sivulla.
Napsauta Esikatsele asentamasi rivin kohdalla. Jos näkyviin tulee ”Tärkeää: Esikatselu käyttää yllä olevaa verkko-osoitetta. Tallenna toimipiste, jotta osoite tallentuu.”, tallenna ensin.
Tee itse yksi varaus toimipisteen yläpalkin toiminnolla Tee testivaraus Tallenna-painikkeen vieressä (painike on harmaana niin kauan kuin toimipiste ei vielä voi ottaa vastaan varauksia tai välilehdellä on tallentamattomia muutoksia): valitse Maksuton testi tai Testi oikealla maksulla, paina Luo testilinkki ja sitten Avaa varaussivu. Avaa myös testin vahvistusviestin pääsylinkki – sen pitäisi avata sivusi varausikkunan kanssa. Testi perutaan automaattisesti 30 minuuttia sen tekemisen jälkeen, eikä sitä lasketa lukuihisi. Käyttöönotto-opas kuvaa testivarauksen tarkemmin.

Tee painikkeen tarkistus (?rbCheck=1)

Avaa varaussivusi niin, että osoitteen loppuun on lisätty ?rbCheck=1, esimerkiksi https://yoursite.com/booking?rbCheck=1, tai paina Varauspainike-välilehdellä Avaa tarkistus verkkosivuillasi. Sivullesi ilmestyy pieni paneeli, Rentalbuddy button check, joka käy läpi jokaisen osan (paneeli on englanniksi):

Rivi	Mitä se tarkistaa
Script loaded	varausmoottorin koodi toimii tällä sivulla
Button element found	sivulla on painikkeen koodi (muuten rivillä lukee ”No booking button element on this page.”)
Location set	painikkeen koodi nimeää toimipisteen (`data-site`)
Location found	toimipiste on olemassa ja voi ottaa vastaan varauksia; ”This location id does not exist — copy the code again from Rentalbuddy.” tarkoittaa, että koodi on väärä
Script included once	varausmoottorin koodi on sivulla vain kerran; ”The booking script is included 2 times — keep one.”
Reported to Rentalbuddy	sivu sai yhteyden Rentalbuddyyn, joten Varauspainike-välilehti voi näyttää sen käytössä olevana

Korjaa kaikki virheelliseksi merkityt kohdat, julkaise ja tee tarkistus uudelleen. Jos paneelia ei näy lainkaan, varausmoottorin koodi ei lataudu kyseisellä sivulla: se puuttuu, sitä ei ole julkaistu tai evästebanneri pidättää sitä.

Painikkeen tyyli ja Painikkeen teksti (painike verkkosivustollasi)

Vaiheiden alla ovat Painikkeen tyyli ja Painikkeen teksti. Ne vaikuttavat vain verkkosivustollasi olevaan painikkeeseen – ”Nämä asetukset määrittävät omalle verkkosivustollesi upotetun varauspainikkeen ulkoasun – eivät varausprosessia, joka avautuu, kun painiketta napsautetaan.” Varausikkunan sisäiset värit määrittää Varauksen teemaväri toimipisteen Varauskokemus-välilehdellä.

Molemmat toimivat samalla tavalla:

Oletuksena toimipiste käyttää tilisi tyyliä ja tekstiä. Muuta niitä kaikille toimipisteille kohdista Muokkaa tilin tyyliä / Muokkaa tilin tekstiä.
Ota käyttöön Mukauta tälle toimipisteelle, jos haluat antaa tälle toimipisteelle oman tyylin tai tekstin.

Painikkeen tyyli sisältää kohdat Fontti, Painikkeen väri, Muoto (Terävä, Keskitaso, Pyöristetty), Esikatselu, Palauta oletustyyli sekä Lisäasetukset-kohdassa tekstin värin, reunuksen, sisämarginaalin (padding), fonttikoon, leveyden ja hover-värit.

Painikkeen teksti sisältää kohdan Oletusteksti sekä Lisäasetukset-kohdassa Tapahtuman teksti ja Tuotteen teksti yhden varaustyypin painikkeille. Jäsenyyden teksti on Oletusteksti-kentän vieressä niin kauan kuin toimipisteessä myydään jäsenyyttä. Muuten kenttä siirtyy kohtaan Lisäasetukset, ja sen alla kerrotaan, miksi jäsenyyspainiketta ei voi käyttää siellä; voit silti muokata tai tyhjentää sen. Kohdassa Muokkaa tilin tekstiä se on aina Oletusteksti-kentän vieressä. ”Tyhjiksi jätetyt kentät käyttävät oletustekstiä (BOOK).” – joten painikkeessa, jolle et ole koskaan antanut tekstiä, lukee BOOK isoin kirjaimin. Tyhjä Jäsenyyden teksti, Tapahtuman teksti tai Tuotteen teksti käyttää ensin Oletusteksti-kenttää ja vasta sitten BOOK, jos sekin on tyhjä.

Hyvä tietää:

Painikkeen teksti on sama kaikilla kielillä. Jos verkkosivustollasi on sivuja usealla kielellä, voit antaa yksittäiselle painikkeelle oman tekstin lisäämällä sen painikkeen koodiin data-buttontext="Jetzt buchen", esimerkiksi <div id="rentalbuddy-checkout" data-site="your-location-id" data-buttontext="Jetzt buchen"></div>.
Sivustosi oma tyylitiedosto voi silti muuttaa painiketta: painikkeen värit ja fontti asetetaan itse painikkeeseen, mutta !important-merkityt säännöt ja asiat, joita painike ei itse aseta (kuten koko tekstin muuttaminen isoiksi kirjaimiksi), tulevat läpi. Jos teksti näkyy isoin kirjaimin, vaikka kirjoitit tavallisin kirjaimin, syy on sivustosi teemassa.
Tyylin ja tekstin muutokset eivät vaadi uutta koodia – ne näkyvät, kun sivu seuraavan kerran latautuu.

Useita toimipisteitä samalla verkkosivustolla

Jokaisella toimipisteellä on oma painikkeen koodinsa (data-site-arvo on eri), oma sivun osoitteensa ja oma painiketekstinsä. Yhteistä painiketta, jossa olisi toimipistevalitsin tai kartta, ei ole – jokainen painike avaa oman toimipisteensä.

Erilliset sivut – laita kunkin toimipisteen painikkeen koodi omalle sivulleen ja tallenna sen sivun osoite kyseiselle toimipisteelle.
Yksi sivu, useita painikkeita – liitä kunkin toimipisteen painikkeen koodi samalle sivulle (skripti silti vain kerran). Voit tallentaa saman sivun osoitteen kaikille toimipisteille: sähköpostilinkit kuljettavat varauksen mukanaan, joten ne avaavat oikean varauksen. Anna jokaiselle painikkeelle oma teksti kohdassa Mukauta tälle toimipisteelle, jotta asiakkaat erottavat ne toisistaan.
Jos tarvitset samalle toimipisteelle toisen sivun (toinen kieli, kampanjasivu), liitä sinne sama painikkeen koodi. Tallennettu sivun osoite on edelleen se, jonka sähköpostilinkit avaavat.

Evästebannerit: kun skripti estetään

Evästesuostumustyökalu voi pidätellä skriptiä, kunnes kävijä hyväksyy evästeet, jolloin painike näkyy myöhässä tai ei lainkaan. Välilehti varoittaa: ”Jos varauspainike ei näy ja käytät evästebanneria, sivustosi saattaa estää skriptin, kunnes kävijä hyväksyy evästeet.”

Vaiheen 4 kohdassa Lisäasetukset (vain tarvittaessa) → Evästesuostumustyökalut on valmiita versioita skriptistä:

Kopioi Cookiebotille
Kopioi OneTrustille
Kopioi Termlylle – ja vain Termlyn kohdalla: ”jos painike näkyy mutta varausikkuna jää tyhjäksi, lisää myös tämä koodi sivustosi <head>-osioon Termlyn skriptin yläpuolelle.” → Kopioi Termlyn head-koodi.

Korvaa vaiheessa 4 liittämäsi skripti sopivalla versiolla (älä lisää toista kopiota). Kaikille muille evästetyökaluille: ”merkitse evästebannerisi asetuksissa tämä varausskripti (tai plugin.rentalbuddy.io) ehdottoman välttämättömäksi tai välttämättömäksi. Yksittäisiä evästeitä ei tarvitse luokitella uudelleen. Varausikkuna ei aseta analytiikkaevästeitä, ellei kävijä ole hyväksynyt analytiikkaa samassa bannerissa.”

Google Analytics (GA4) ja suostumus

Jos olet syöttänyt GA4 Measurement ID -tunnuksen (Asetukset → Tili → Analytiikka), varaustoiminta lähetetään Google Analyticsiisi vain niiltä kävijöiltä, jotka ovat hyväksyneet analytiikkaevästeet sivustosi bannerissa: ”Ilman evästebanneria mitään ei lähetetä.” Bannerin on oltava Cookiebot, OneTrust, Termly tai Google Consent Mode -tilaa tukeva työkalu; kävijöitä, jotka kieltäytyvät, eivät ole vielä vastanneet tai joiden selain lähettää Global Privacy Control -signaalin, ei mitata. ”Rentalbuddy-verkkosivustollasi tehtyjä varauksia ei toistaiseksi mitata.” Odota pienempiä lukuja kuin sivustosi omissa tilastoissa.

Meta (Facebook) Pixel ja muut seurantaskriptit

Varausikkunaan ei tällä hetkellä voi lisätä Meta/Facebook Pixeliä eikä muuta omaa seurantaskriptiä. Google Analytics (GA4, yllä) on varausikkunaan sisäänrakennettu analytiikka. Meta Pixel -tuki on suunnitteilla. Sivustosi oma pikseli näkee edelleen käynnit sivuillasi, mutta ei varausikkunan sisäisiä vaiheita.

Fontit: varauspainike käyttää Google Fontsia

Painikkeen tyyli -kohdan Fontti-listan fontit ovat Google-fontteja. Omalla verkkosivustollasi varauspainike lataa valitun fontin Google Fontsista (fonts.googleapis.com), kun sivu avautuu. Jos tietosuojaselosteessasi tai evästetiedoissasi luetellaan sivustosi käyttämät ulkoiset palvelut, lisää sinne Google Fonts.

Skriptin latausvaihtoehdot (async / ilman defer-määritettä)

Jos painike näkyy mutta toimii oudosti, kohdassa Lisäasetukset (vain tarvittaessa) → Skriptin lataus on vaihtoehdot Kopioi async-määritteellä ja Kopioi ilman defer-määritettä. Korvaa nykyinen skriptisi toisella niistä – älä koskaan lisää sitä vanhan viereen.

Mitä varoitusmerkit tarkoittavat (”se on edelleen punainen”)

Varauspainike-välilehti saa merkin (sininen, kun käyt vielä läpi käyttöönoton tarkistuslistaa, sen jälkeen oranssi) ja tekstin ”Valitse, miten asiakkaat varaavat, ja viimeistele Varaa-painikkeen asetukset.” tai ”URL-osoitteen on alettava https:// tai http://.”
Toimipisteluettelon Varaa-painikkeen URL -sarakkeessa näkyy vihreä valintamerkki tai punainen merkki.
Toimipisteen valmiuspalkissa lukee Varauspainiketta ei ole määritetty.

Nämä merkit tarkistavat vain tallennetun sivun osoitteen. Vaihtoehdolla Upotettu verkkosivustollesi ne muuttuvat kunnossa oleviksi heti, kun kelvollinen sivun osoite on tallennettu. Jos merkki siis jää näkyviin painikkeen asentamisen jälkeen, sivun osoitteen kenttä on tyhjä, virheellinen tai tallentamatta. Täytä se ja paina Tallenna. Toisaalta puhdas merkki ei todista, että painike on sivullasi. Sen, onko se todella siellä, kertoo vaiheiden yläosan käytössäolon tila (”Varauspainike on käytössä sivulla …”), ja ?rbCheck=1 näyttää, mitä puuttuu.

Vianmääritys: painike ei näy tai ei toimi

Käy tämä lista läpi ylhäältä alas:

Tee tarkistus. Avaa sivusi niin, että osoitteen lopussa on ?rbCheck=1, ja korjaa kaikki virheelliseksi merkityt kohdat. Jos paneelia ei näy lainkaan, skripti ei lataudu.
Onko molemmat osat asennettu? Skripti koko sivustolle, painikkeen koodi sivulle. Puuttuva skripti on yleisin syy.
Julkaisitko ja tyhjensitkö välimuistin? Useimmat kotisivukoneet vaativat julkaisun tai päivityksen; välimuistilisäosat on tyhjennettävä.
Koodi näkyy sivulla tekstinä – se on liitetty tekstilohkoon. Käytä HTML-, Embed- tai koodilohkoa.
Toimii tietokoneella mutta ei puhelimella – skripti ei lataudu mobiilissa: tarkista, että se on koko sivuston kentässä (ei vain tietokonenäkymän osiossa tai mallissa), tyhjennä välimuistit ja kokeile Kopioi ilman defer-määritettä.
Onko skripti sivustolla useammin kuin kerran? Hae sivuston yhteisestä koodista rentalbuddy ja jätä yksi kopio.
Lakkasi toimimasta sivuston uudistuksen tai teemapäivityksen jälkeen – päivitykset poistavat usein mukautetun koodin. Liitä skripti ja painikkeen koodi uudelleen. Kannattaa tarkistaa joka kevät ennen sesonkia.
Onko toimipiste asetettu upotettuun varaukseen kelvollisella osoitteella? Varauspainike-välilehti: Oma verkkosivustoni → Upotettu verkkosivustollesi, sivun osoite, jossa on https:// eikä ?-merkkiä, tallennettuna.
Virheilmoituksessa lukee ”Site with id … not found” – painikkeen koodi kuuluu todennäköisesti toiselle toimipisteelle tai tilille. Kopioi se uudelleen tämän toimipisteen Varauspainike-välilehdeltä.
Estääkö evästebanneri sen? Käytä Cookiebot-, OneTrust- tai Termly-versiota tai merkitse skripti ehdottoman välttämättömäksi.
Kokeile toista latausvaihtoehtoa – Kopioi async-määritteellä tai Kopioi ilman defer-määritettä.
Onko mitään varattavaa? Ilman avointa ajanjaksoa tai tuotteita asiakkaat näkevät tekstin ”Tätä vuokrauspistettä ei voi tällä hetkellä varata.” Katso opas siitä, miksi asiakkaat eivät voi varata mitään.
Etkö vieläkään pääse eteenpäin? Lähetä tukeen sivusi osoite, tieto siitä, mitä kotisivukonetta käytät, ja kuvakaappaus ?rbCheck=1-paneelista.

Usein kysytyt kysymykset

Miksi varauspainike ei näy verkkosivuillani? Yleensä skripti (Kopioi varausmoottorin koodi) puuttuu tai sitä ei ole julkaistu, tai evästebanneri estää sen. Lisää skripti kerran koko sivustolle, julkaise ja tarkista yksityisessä ikkunassa.

Tarvitsenko ohjelmoijan varauspainikkeen lisäämiseen? Et. Kopioit kaksi riviä Varauspainike-välilehdeltä ja liität ne kotisivukoneeseesi – välilehti näyttää juuri sinun kotisivukoneesi vaiheet. Jos et voi lisätä koodia lainkaan, käytä sen sijaan varauslinkkiä.

Varauspainike-välilehti on edelleen punainen, vaikka painike on sivuillani. Merkki tarkistaa vain tallennetun sivun osoitteen. Syötä kelvollinen URL, jossa Varaa-painike on käytössä (alkaa https://, ei ?-merkkiä) ja paina Tallenna.

Mistä tiedän, että painike todella on verkkosivuillani? Varauspainike-välilehdellä lukee ”Varauspainike on käytössä sivulla …”, kun painike on latautunut oikealla sivulla. Avaa sivu kerran ja paina Tarkista uudelleen; tarkempia tietoja saat avaamalla sivun niin, että osoitteen lopussa on ?rbCheck=1.

Verkkotoimistomme asentaa painikkeen. Mitä lähetän heille? Paina Varauspainike-välilehdellä Hae lähetettävä linkki ja lähetä heille kopioitu linkki. Siinä ovat tämän toimipisteen asennusohjeet ja käytössäolon tila, eikä se vaadi kirjautumista.

Pitääkö minun rekisteröidä verkkosivustoni Apple Payta varten Stripessä? Ei. Rentalbuddy rekisteröi tallennetun kohdan URL, jossa Varaa-painike on käytössä Stripe-tilillesi itse, kun tallennat sen ja joka yö. Stripessä poistamasi verkkotunnus pysyy pois käytöstä.

Minne Tee testivaraus katosi? Se on toimipisteen yläpalkissa Tallenna-painikkeen vieressä kaikilla toimipisteen välilehdillä – ei enää Varauspainike-välilehdellä.

Voinko lisätä Meta (Facebook) Pixelimme varausikkunaan? Et tällä hetkellä. GA4 on varausikkunaan sisäänrakennettu analytiikka; Meta Pixel -tuki on suunnitteilla.

Asiakkaat saavat ”sivua ei löydy” tai väärän sivun, kun he avaavat sähköpostin PIN-linkin. Sähköpostin linkit avaavat tallennetun sivun osoitteen. Varmista, että se on sivu, jolla skripti ja painikkeen koodi ovat; oikean osoitteen tallentaminen korjaa myös jo lähetettyjen viestien linkit.

Miten muutan painikkeen tekstiä tai väriä? Käytä Varauspainike-välilehden kohtia Painikkeen teksti ja Painikkeen tyyli – toimipistekohtaisesti kohdassa Mukauta tälle toimipisteelle tai kaikille kohdista Muokkaa tilin tekstiä / Muokkaa tilin tyyliä. Varausikkunan väri on Varauksen teemaväri kohdassa Varauskokemus.

Miksi painikkeessani lukee BOOK isoin kirjaimin? Se on oletusteksti, kun tekstiä ei ole asetettu. Kirjoita oma tekstisi kohtaan Painikkeen teksti → Oletusteksti; jos se näkyy edelleen isoin kirjaimin, sivustosi teema muuttaa sen isoiksi kirjaimiksi.

Voiko minulla olla yksi painike, josta asiakkaat valitsevat toimipisteen? Ei. Jokaisella toimipisteellä on oma painikkeensa; laita useita painikkeita samalle sivulle, yksi kutakin toimipistettä kohti, ja anna jokaiselle oma teksti.

Lähettääkö varauspainike tietoja Google Analyticsiin? Vain, jos olet syöttänyt GA4 Measurement ID -tunnuksen ja kävijä on hyväksynyt analytiikkaevästeet evästebannerissasi. Ilman evästebanneria mitään ei lähetetä.

Lataako varauspainike Google Fontsin? Mitä kirjoitan tietosuojaselosteeseen? Kyllä. Verkkosivustollasi painike lataa kohdassa Painikkeen tyyli → Fontti valitun fontin Google Fontsista (fonts.googleapis.com), joten mainitse Google Fonts siellä, missä tietosuojaselosteesi luettelee ulkoiset palvelut.

Lopetimme jäsenyyksien myynnin – mitä vanha jäsenyyspainike nyt tekee? Se avaa tavallisen varausprosessin kuten Vakiovaraus-painike, ei tyhjää listaa. Sama koskee vanhaa Tuotevaraus- tai Tapahtumavaraus-painiketta.