Näin lisäät varauspainikkeen verkkosivuillesi (WordPress, Wix, Squarespace ja HTML)

Kun nettiajanvaraus on otettu käyttöön, seuraava tehtävä on saada asiakkaat sen luo. Useimmat löytävät sinut verkkosivujesi kautta, joten siellä varaamisen pitää olla helpointa. Kävijä, joka joutuu etsimään puhelinnumeroa tai lähettämään viestin, luovuttaa usein ja varaa ajan jostain muualta. Tässä oppaassa näytämme kaksi tapaa lisätä varaus sivuillesi vuonna 2026, varauspainikkeen tai sivulle upotetun varauslomakkeen, ja käymme läpi vaiheet WordPressille, Wixille, Squarespacelle ja tavalliselle HTML:lle.

Painike vai upotettu lomake: kumpi kannattaa valita

Varauksen voi lisätä verkkosivuille kahdella yleisellä tavalla, ja monet yritykset käyttävät molempia.

• Varauspainike on tavallinen linkki, joka avaa varaussivusi. Se toimii kaikissa sivustotyökaluissa ja kaikilla tilauksilla, sen lisääminen vie minuutin, ja voit toistaa sitä valikossa, palvelusivuilla ja alatunnisteessa.
• Upotettu varauslomake näyttää koko varausprosessin yhdellä omista sivuistasi, joten kävijä ei poistu sivustoltasi lainkaan. Sen käyttöönotto vie hieman kauemmin, ja jotkin sivustotyökalut sallivat upotuskoodin vain maksullisilla tilauksilla.

Hyvä perusratkaisu: lisää ”Varaa aika” -painike jokaisen sivun yläosaan ja upota koko lomake yhdelle erilliselle ”Varaa”-sivulle, jolle painike vie. Jos sivustotyökalusi ei salli upotuskoodia, pelkkä painike toimii aivan hyvin.

Ennen kuin aloitat: hae linkki ja upotuskoodi

Avaa timedulen hallintapaneelista Varaussivu ja siirry Linkki ja upotus -välilehdelle. Sieltä löydät kaksi asiaa:

• Varausosoite: varaussivusi linkki, esimerkiksi https://yourbusiness.timedule.com. Napsauta Kopioi linkki. Jos haluat lyhyemmän tai selkeämmän osoitteen, napsauta Muokkaa osoitetta ja valitse toinen aliverkkotunnus ennen kuin jaat linkkiä missään.
• Integrointi verkkosivustoosi: lyhyt koodinpätkä, joka näyttää varauslomakkeen sivustollasi. Napsauta Kopioi koodi.

Koodi näyttää tältä, ja sen lopussa on yrityksesi oma tunniste:

<div id="timedule-booking"></div>
<script src="https://timedule.com/iv1.js" type="text/javascript"></script>
<script type="text/javascript">window.timeduleInit("your-company-id");</script>

Kopioi koodi aina hallintapaneelista eikä tästä artikkelista, jotta tunniste on oikea. Liitä koodi täsmälleen sellaisenaan. Ensimmäinen rivi merkitsee kohdan, johon lomake ilmestyy, ja kaksi muuta lataavat lomakkeen siihen.

WordPress

Painike: lisää lohkoeditorissa Buttons-lohko (Painikkeet) haluamaasi kohtaan, kirjoita ”Varaa aika” ja liitä varauslinkkisi painikkeen linkiksi. Jos haluat painikkeen päävalikkoon, siirry kohtaan Appearance → Menus (Ulkoasu → Valikot, tai lohkoteemoissa Appearance → Editor → Navigation) ja lisää mukautettu linkki varausosoitteellasi.

Upotettu lomake:

1. Luo uusi sivu nimeltä ”Varaa” tai avaa sivu, jolle lomake tulee.
2. Lisää Custom HTML -lohko (Oma HTML).
3. Liitä hallintapaneelista kopioimasi upotuskoodi ja julkaise sivu.

Jos käytät sivunrakentajaa, kuten Elementoria tai Diviä, käytä sen HTML- tai Code-widgetiä. Vaiheet ovat samat. WordPress.comissa skriptit poistetaan yleensä edullisemmilla tilauksilla, joten lomake ei välttämättä näy. Käytä silloin painiketta tai siirry tilaukseen, joka tukee lisäosia.

Wix

Painike: napsauta Add Elements → Button (Lisää elementtejä → Painike), vaihda tekstiksi ”Varaa aika”, napsauta sitten linkkikuvaketta, valitse Web Address (Verkko-osoite), liitä varauslinkkisi ja aseta se avautumaan samaan ikkunaan.

Upotettu lomake:

1. Avaa sivu, jolle lomake tulee, ja napsauta Add Elements → Embed Code → Embed HTML.
2. Napsauta Enter Code, valitse Code, liitä upotuskoodi ja napsauta Update.
3. Vedä elementin reunoja niin, että se on yhtä leveä kuin sisältösi ja noin 750 pikseliä korkea. Wix näyttää upotetun koodin asettamasi kokoisessa laatikossa, joten liian pieni laatikko leikkaa lomakkeen.
4. Tarkista editorin mobiilinäkymä ja muuta elementin kokoa myös siellä.

Squarespace

Painike: muokkaa sivua, napsauta Add Block → Button (Lisää lohko → Painike), kirjoita ”Varaa aika” ja liitä varauslinkkisi. Yläpalkkia varten avaa sivuston yläpalkin asetukset, ota yläpalkin painike käyttöön ja ohjaa se samaan linkkiin.

Upotettu lomake:

1. Muokkaa sivua ja napsauta Add Block → Code.
2. Liitä upotuskoodi, varmista, että tilaksi on valittu HTML, ja kytke ”Display Source” pois päältä.
3. Tallenna ja tarkista sivu uloskirjautuneena. Squarespace ei usein suorita skriptejä editorin esikatselussa, joten lomake saattaa näkyä vain julkaistulla sivulla.

JavaScript koodilohkoissa on käytettävissä vain osassa Squarespacen tilauksista. Jos lomake ei näy julkaistulla sivulla, tilauksesi ei todennäköisesti salli sitä, ja silloin painike on oikea ratkaisu.

Tavallinen HTML ja muut sivustotyökalut

Jos sinä tai kehittäjäsi muokkaatte HTML:ää suoraan, liitä upotuskoodi sivun runkoon kohtaan, jossa lomakkeen pitää näkyä. Painikkeeksi riittää tavallinen linkki:

<a href="https://yourbusiness.timedule.com" class="book-button">Varaa aika</a>

Anna sille sivustosi painiketyyli, jotta se sopii muuhun ulkoasuun. Sama tapa toimii useimmissa muissa työkaluissa, kuten Webflow’ssa, Shopifyssa, Weeblyssä tai Jimdossa: etsi lohko nimeltä ”HTML”, ”Code”, ”Embed” tai ”Custom code” ja liitä upotuskoodi siihen.

Linkitä suoraan palveluun tai toimipisteeseen

Jos sivustollasi on oma sivu jokaiselle palvelulle, linkitä kukin suoraan kyseiseen palveluun, niin asiakas pääsee yhden vaiheen yli. Avaa timedulessa Palvelut ja kopioi palvelun vieressä oleva varauslinkki. Jos sinulla on useita toimipisteitä, avaa Toimipisteet ja kopioi linkki jokaiselle toimipisteelle. Linkki avaa varaussivun, jolla toimipiste on jo valittuna. Hierontasivulla oleva ”Varaa hieronta” -painike, joka avaa suoraan hierontojen vapaat ajat, tuo enemmän varauksia kuin yleinen ”Varaa aika”, joka alkaa alusta.

Älä jätä sitä pelkkiin verkkosivuihin

Sama varauslinkki toimii kaikkialla, minne voit liittää linkin:

• Google Business Profile: lisää se varaus- tai ajanvarauslinkiksi, niin ihmiset voivat varata suoraan Google-hausta ja Mapsista.
• Instagram ja Facebook: lisää se bioosi ja sivusi toimintopainikkeeseen.
• Sähköpostin allekirjoitus ja viestit: vastaa varauspyyntöihin linkillä sen sijaan, että sopisit ajoista viestiketjussa edestakaisin.
• Painotuotteet: Linkki ja upotus -välilehdeltä löytyy myös QR-koodi, jonka voit ladata tiskille, flyereihin tai käyntikortteihin.

Tarkista ennen kuin kerrot siitä muille

• Tee testivaraus verkkosivuiltasi omalla puhelimellasi samalla tavalla kuin asiakas tekisi, ja peru se sitten.
• Tarkista mobiiliasettelu. Useimmat varaukset tehdään puhelimella, joten varmista, ettei lomake leikkaudu ja että painiketta on helppo napauttaa.
• Käytä samaa osoitetta kaikkialla. Jos vaihdat varausosoitettasi myöhemmin, jo jakamasi linkit pitää päivittää, joten valitse osoite ennen kuin alat jakaa sitä.
• Ota muistutukset käyttöön, jotta uudet nettivaraukset myös saapuvat paikalle. Oppaamme peruuttamattomien poissaolojen vähentämisestä kertoo, miten.

Yhteenveto: yksi painike kaikkialle ja yksi sivu koko lomakkeelle

Varauksen lisääminen verkkosivuille vie millä tahansa alustalla vain muutaman minuutin: kopioi linkki tai upotuskoodi hallintapaneelista, lisää ”Varaa aika” -painike jokaiselle sivulle ja upota lomake yhdelle varaussivulle, jos tilauksesi sen sallii. Jaa sitten sama linkki Googlessa, sosiaalisessa mediassa ja painotuotteissa, niin asiakkaat voivat varata aikansa silloin, kun heille sopii, myös aukioloaikojesi ulkopuolella.

Jos sinulla ei vielä ole varaussivua, katso, mitä timedule osaa, ja luo varaussivusi muutamassa minuutissa.