# Näin lisäät varauspainikkeen verkkosivuillesi: WordPress, Wix, Squarespace ja Shopify Julkaistu 2026-10-14, kirjoittanut TicketPa-tiimi. Lähde: https://ticketpa.com/fi/blog/varauspainike-verkkosivuille Jotta voit lisätä varauspainikkeen verkkosivuillesi, kopioi varaussivusi linkki varausjärjestelmästäsi ja liitä se sivustosi painikkeeseen, tai liitä varausjärjestelmän antama painikekoodi HTML- tai koodilohkoon. Kumpikin tapa vie muutaman minuutin, eikä kehittäjää tarvita. Alla ovat vaiheet WordPressille, Wixille, Squarespacelle, Shopifylle ja mille tahansa muulle sivustolle. Tämä opas käy läpi molemmat tavat, kertoo, mihin painike kannattaa sijoittaa, jotta asiakkaat todella käyttävät sitä, ja miten sen voi testata. Esimerkit käyttävät TicketPa-palvelua, mutta vaiheet toimivat samalla tavalla useimmissa varausjärjestelmissä. ## Kaksi tapaa lisätä varauspainike | Tapa | Miten se toimii | Sopii parhaiten | | ----------------------------------- | ------------------------------------------------------------------------- | -------------------------------------------------------------------------- | | Linkitä painike, joka sinulla jo on | Käytä sivustotyökalusi omaa painiketta ja aseta sen linkiksi varaussivusi | Mihin tahansa sivustotyökaluun, myös niihin, jotka rajoittavat omaa koodia | | Liitä koodinpätkä | Liitä varausjärjestelmäsi painikekoodi HTML-lohkoon | Sivustoille, jotka sallivat oman HTML:n, kun haluat valmiin painikkeen | Painikkeen linkittäminen on yksinkertaisinta ja toimii kaikkialla. Koodinpätkä antaa valmiiksi muotoillun painikkeen, ja joissakin varausjärjestelmissä se voi avata varaussivun ikkunaan sivustosi viereen. ## Vaihe 1: Hanki varauslinkkisi tai painikekoodisi Jokainen varausjärjestelmä antaa linkin varaussivullesi, ja moni antaa myös linkin jokaiselle aktiviteetille ja painikkeen koodinpätkän. TicketPa-palvelussa avaa sivu **Share** (Jaa). Siellä on: - **Varaussivusi:** yksi linkki kaikkiin aktiviteetteihin, joita asiakkaat voivat varata. Käytä sitä päävalikossasi ja etusivullasi. - **Yksittäinen aktiviteetti:** linkki suoraan yhden aktiviteetin kalenteriin. Käytä sitä kyseisen aktiviteetin sivulla ja sitä koskevissa julkaisuissa tai mainoksissa. - **Varaa nyt -painike:** koodi, jonka liität verkkosivuillesi, varaussivusi korostusvärissä. Siitä on kaksi versiota: - **tavallinen painike,** joka toimii kaikkialla, myös sähköposteissa - **painike, joka avaa varauksen ikkunaan** sivustosi viereen tietokoneella Kopioi tarvitsemasi linkki tai koodi. ## Vaihe 2: Lisää se verkkosivuillesi ### WordPress **Painikkeen linkittäminen:** lisää lohkoeditorissa **Painikkeet**-lohko kohtaan, johon haluat painikkeen, kirjoita "Varaa nyt" ja liitä varauslinkkisi painikkeen linkkikenttään. **Koodinpätkän liittäminen:** lisää **Mukautettu HTML** -lohko kohtaan, johon haluat painikkeen, ja liitä koodi. Esikatsele sivua nähdäksesi painikkeen. Jos teemassasi on ylävalikko, lisää varauslinkkisi myös valikkokohdaksi kohdassa Ulkoasu, Valikot tai sivustoeditorin navigointilohkossa. ### Wix **Painikkeen linkittäminen:** lisää **Painike** (Button) Lisää elementtejä -paneelista, vaihda sen tekstiksi "Varaa nyt", avaa sitten sen linkkiasetukset ja valitse verkko-osoite. Liitä varauslinkkisi. Wix sijoittaa oman koodin kehykseen, mikä voi estää painiketta avaamasta uutta ikkunaa. Wixissä painikkeen linkittäminen on varmempi valinta. ### Squarespace **Painikkeen linkittäminen:** muokkaa sivua, lisää **Button**-lohko, kirjoita "Varaa nyt" ja liitä varauslinkkisi sen linkiksi. **Koodinpätkän liittäminen:** lisää **Code**-lohko ja liitä koodi. Skriptejä ajavat koodilohkot ovat käytössä vain osassa Squarespacen paketeista, joten jos koodinpätkä ei toimi omassasi, linkitä painike. ### Shopify **Painikkeen linkittäminen:** lisää tai muokkaa teemaeditorissa osiota, jossa on painike, kuten kuvabanneria, ja liitä varauslinkkisi painikkeen linkiksi. Lisää se valikkoosi kohdassa Verkkokauppa, Navigointi: avaa päävalikkosi ja lisää valikkokohta varauslinkilläsi. **Koodinpätkän liittäminen:** lisää teemaeditorissa **Mukautettu Liquid** -osio (Custom Liquid) ja liitä koodi. ### Mikä tahansa muu sivusto Itse rakennetulla sivustolla tai työkaluissa, kuten Webflow, Framer tai Carrd, liitä koodinpätkä sivun HTML:ään tai työkalun upotus- tai HTML-elementtiin kohtaan, jossa painikkeen pitää näkyä. Jos et voi lisätä koodia, käytä mitä tahansa linkkiä tai painiketta ja osoita se varauslinkkiisi. ## Mihin varauspainike kannattaa laittaa Varauspainike toimii vain, jos asiakkaat näkevät sen, kun he ovat valmiita varaamaan: - **Jokaisen aktiviteettisivun yläosaan** hinnan viereen, jotta asiakkaiden ei tarvitse vierittää. - **Päävalikkoosi** viimeiseksi kohdaksi painikkeen näköisenä. - **Jokaisen aktiviteettisivun loppuun** kuvauksen ja kuvien jälkeen. - **Etusivullesi** ensimmäisen otsikon lähelle. - **Yhteystietosivullesi** asiakkaille, jotka olivat lähettämässä viestiä vapaista paikoista. Käytä painikkeen tekstinä "Varaa nyt" tai "Katso vapaat ajat". Asiakkaat tietävät, mitä molemmat tarkoittavat, ja molemmat alkavat siitä, mitä he haluavat tehdä. ## Linkitä jokainen aktiviteetti sen omaan kalenteriin Jos verkkosivuillasi on sivu jokaiselle aktiviteetille, linkitä kunkin sivun painike kyseiseen aktiviteettiin eikä yleiseen varaussivuusi. Asiakkaat päätyvät oikeaan kalenteriin ja säästävät yhden vaiheen, joten harvempi luovuttaa ennen varaamista. TicketPa-palvelussa sivulla Share (Jaa) on linkki jokaiselle aktiviteetille. Käytä yleistä varaussivulinkkiä vain paikoissa, jotka kattavat kaiken, kuten päävalikossa ja etusivulla. ## Testaa varauspainikkeesi Ennen kuin kerrot kenellekään, testaa se kuten asiakas tekisi: 1. **Avaa verkkosivusi puhelimellasi** ja napauta painiketta. 2. **Tarkista, että se vie oikealle sivulle,** jossa on oikea aktiviteetti ja reaaliaikaiset ajat. 3. **Tee testivaraus** tai mene maksuvaiheeseen asti. 4. **Toista tietokoneella.** Jos painikkeesi avaa varauksen ikkunaan, tarkista, että se aukeaa ja että varaussivu aukeaa silti, jos selain estää ikkunat. ## Käytä samaa linkkiä kaikkialla muualla Varauslinkkisi toimii kaikkialla, missä asiakas voi napauttaa linkkiä, eikä vain verkkosivuillasi. Lisää se Googlen yritysprofiiliisi, Instagramin bioon ja WhatsApp-vastauksiisi. Oppaamme [varauksista Instagramista, Googlesta ja WhatsAppista](https://ticketpa.com/fi/blog/varauslinkki-instagram-google-whatsapp) näyttää, mihin kukin kuuluu. ## Näin TicketPa-painike toimii TicketPa-painike on linkki, jossa on pieni skripti. Tietokoneella se avaa varaussivusi ikkunaan sivustosi viereen, joten asiakkaat pitävät verkkosivusi auki sen takana. Puhelimella, tai jos selain estää ikkunan, se avaa varaussivusi tavallisena linkkinä. Skripti ei seuraa kävijöitäsi, ja painike käyttää varaussivusi korostusväriä. TicketPa on varausjärjestelmä kierroksille, kursseille ja aktiviteeteille, ja sen varaussivu toimii myös ilman verkkosivuja. Katso [kaikki ominaisuudet](https://ticketpa.com/fi/ominaisuudet) tai oman toimialasi sivu, kuten [kierrokset](https://ticketpa.com/fi/opastettujen-kierrosten-varausjarjestelma) tai [työpajat](https://ticketpa.com/fi/tyopajojen-varausjarjestelma). ## Usein kysytyt kysymykset ### Tarvitsenko kehittäjää varauspainikkeen lisäämiseen? Et tarvitse. Lähes missä tahansa sivustotyökalussa voit lisätä painikkeen ja asettaa sen linkiksi varaussivusi muutamassa minuutissa. Painikkeen koodinpätkän liittäminen vie suunnilleen saman ajan, jos sivustotyökalussasi on HTML- tai koodilohko. Kehittäjää tarvitset vain täysin omaan ulkoasuun. ### Voiko varaussivu aueta verkkosivujeni sisällä? Se riippuu varausjärjestelmästä. Osa näyttää varaussivun sivustosi sisällä kehyksessä, ja osa avaa sen erillisenä sivuna tai ikkunana. TicketPa avaa varauksen tietokoneella ikkunaan sivustosi viereen ja puhelimella tavallisena sivuna, mikä pitää kassan luotettavana kaikissa selaimissa. ### Hidastaako varauspainike verkkosivujani? Linkitetty painike ei lisää sivusi latausaikaan mitään, koska se on pelkkä linkki. Skriptillinen koodinpätkä lisää pienen tiedoston, ja hyvin tehty skripti latautuu muun sivun jälkeen, joten kävijät eivät huomaa sitä. TicketPa-skripti latautuu näin eikä seuraa kävijöitäsi. ### Voinko käyttää omaa painikkeen ulkoasua? Kyllä. Käytä mitä tahansa sivustotyökalusi painiketta tai linkkiä haluamasi näköisenä ja aseta sen linkiksi varaussivusi tai aktiviteetin linkki. Valmis koodinpätkä on olemassa helpottamaan, ei siksi, että tarvitsisit sitä. ### Voinko lisätä varauspainikkeen sähköposteihini? Kyllä. Liitä varauslinkkisi sähköpostityökalusi painikkeeseen tai käytä tavallisen painikkeen koodinpätkää, jos sähköpostityökalusi hyväksyy HTML:n. Skriptit eivät toimi sähköposteissa, joten käytä tavallista painiketta, joka on muotoiltu linkki. Siksi TicketPa-palvelun tavallinen painike toimii sähköposteissa.