# Lisää Varaa nyt -painike verkkosivustollesi

Päivitetty 2026-10-15, kirjoittanut TicketPa-tiimi. Lähde: https://ticketpa.com/fi/ohjeet/lisaa-varaa-nyt-painike-verkkosivustollesi

Verkkosivustosi Varaa nyt -painike vie kävijät suoraan varaussivullesi. TicketPa antaa sinulle kahden erilaisen painikkeen koodin valmiina liitettäväksi, korostusvärilläsi.

## Näin lisäät painikkeen

1. Siirry sivupalkissa kohtaan **Jaa**.
2. Katso kohdassa **Varaa nyt -painike** näkyvä **Esikatselu**. Siinä painike näkyy korostusvärilläsi.
3. Valitse painike ja sen vierestä **Kopioi koodi**:
    - **Tavallinen painike (toimii kaikkialla, myös sähköposteissa)**: linkki, joka näyttää painikkeelta. Käytä sitä millä tahansa verkkosivustolla, sähköposteissa ja uutiskirjeissä.
    - **Painike, joka avaa varauksen ikkunaan sivustosi viereen**: tietokoneella varaussivusi avautuu pieneen ikkunaan, ja sivustosi pysyy auki sen takana.
4. Liitä koodi verkkosivustosi HTML-koodiin siihen kohtaan, jossa painikkeen pitää näkyä.

## Näin ikkunapainike toimii

- Tietokoneella painike avaa varaussivusi 480 pikselin levyiseen ikkunaan selainikkunan oikeaan reunaan.
- Puhelimella ja kaikilla alle 640 pikselin levyisillä näytöillä se avaa varaussivusi kuin tavallinen linkki.
- Jos kävijä pitää Ctrl-, Cmd- tai Shift-näppäintä painettuna valitessaan painikkeen, selain avaa linkin tavalliseen tapaan, esimerkiksi uuteen välilehteen.
- Jos selain estää ikkunan, varaussivusi avautuu sen sijaan kuin tavallinen linkki.

Ikkunapainike lisää sivullesi pienen TicketPan skriptin. Siellä, missä skriptit eivät toimi, kuten sähköposteissa, se näkyy pelkkänä tekstilinkkinä. Käytä niissä siksi tavallista painiketta.

## Muokkaa painiketta

- Teksti: vaihda koodissa oleva ”Varaa nyt” mihin tahansa haluamaasi tekstiin.
- Yksi aktiviteetti: korvaa koodissa oleva linkki (osoite `href=`-kohdan jälkeen) aktiviteetin linkillä, jonka löydät **Jaa**-sivun kohdasta **Yksi aktiviteetti**. Katso [Jaa varaussivusi](https://ticketpa.com/fi/ohjeet/jaa-varaussivusi).
- Useita painikkeita: liitä koodi jokaiseen kohtaan, jossa haluat painikkeen näkyvän. Jokaisesta sivun linkistä, jossa on `data-ticketpa`, tulee painike.
- Yksi kieli: valitse kieli **Jaa**-sivun kohdassa **Linkin kieli** ennen kuin kopioit koodin, niin painike avaa varaussivusi sillä kielellä. Katso [Varaussivun kielet](https://ticketpa.com/fi/ohjeet/varaussivun-kielet).

> **Huom.** Värit kirjoitetaan koodiin, kun kopioit sen. Kun vaihdat korostusvärin sivulla **Varaussivu**, kopioi koodi uudelleen ja korvaa vanha koodi verkkosivustollasi. Katso [Muokkaa varaussivuasi](https://ticketpa.com/fi/ohjeet/muokkaa-varaussivuasi).

## Usein kysytyt kysymykset

### Voinko käyttää omaa painiketyyliäni?

Voit. Tavallisessa painikkeessa muuta koodiin kirjoitettua tyyliä. Ikkunapainikkeessa vaihda `data-ticketpa` muotoon `data-ticketpa="link"`: silloin skripti jättää linkkisi oman tyylin ennalleen mutta avaa silti varausikkunan.

### Toimiiko painike sähköposteissa ja uutiskirjeissä?

Käytä tavallista painiketta. Se on tavallinen linkki, jonka ulkoasu on kirjoitettu siihen, joten se toimii ilman skriptiä.