# Een Boek nu-knop op je website zetten

Bijgewerkt op 2026-10-15 door het TicketPa-team. Bron: https://ticketpa.com/nl/helpcentrum/boek-nu-knop-toevoegen

Een Boek nu-knop op je website brengt bezoekers direct naar je boekingspagina. TicketPa geeft je code voor twee soorten knoppen in je accentkleur, klaar om te plakken.

## De knop toevoegen

1. Ga naar **Delen** in de zijbalk.
2. Bekijk onder **Boek nu-knop** het **Voorbeeld**. Dat toont de knop in je accentkleur.
3. Kies een knop en selecteer ernaast **Code kopiëren**:
    - **Gewone knop (werkt overal, zelfs in e-mails)**: een link die eruitziet als een knop. Gebruik die op elke website, in e-mails en nieuwsbrieven.
    - **Knop die het boeken opent in een venster naast je website**: op een computer opent je boekingspagina in een klein venster, terwijl je website erachter open blijft.
4. Plak de code in de HTML van je website waar de knop moet staan.

## Hoe de knop met het venster werkt

- Op een computer opent de knop je boekingspagina in een venster van 480 pixels breed, rechts in het browservenster.
- Op een telefoon of elk scherm smaller dan 640 pixels opent de boekingspagina als gewone link.
- Houdt een bezoeker Ctrl, Cmd of Shift ingedrukt tijdens het kiezen, dan opent de browser de link op de gebruikelijke manier, bijvoorbeeld in een nieuw tabblad.
- Blokkeert de browser het venster, dan opent de boekingspagina in plaats daarvan als gewone link.

De knop met het venster voegt een klein script van TicketPa aan je pagina toe. Waar scripts niet kunnen werken, zoals in e-mails, verschijnt die als een gewone tekstlink. Gebruik daar dus de gewone knop.

## De knop aanpassen

- Tekst: verander "Boek nu" in de code in elke tekst die je wilt.
- **Eén activiteit**: vervang de link in de code, het adres na `href=`, door de link van de activiteit onder **Eén activiteit** op de pagina **Delen**. Lees [Je boekingspagina delen](https://ticketpa.com/nl/helpcentrum/boekingspagina-delen).
- Meerdere knoppen: plak de code overal waar je een knop wilt. Elke link met `data-ticketpa` op de pagina wordt een knop.
- Eén taal: kies op **Delen** onder **Taal van de link** een taal voordat je de code kopieert. De knop opent je boekingspagina dan in die taal. Lees [Talen van de boekingspagina](https://ticketpa.com/nl/helpcentrum/talen-van-de-boekingspagina).

> Let op: de kleuren worden in de code gezet wanneer je die kopieert. Wijzig je de accentkleur op **Boekingspagina**, kopieer de code dan opnieuw en vervang de oude op je website. Lees [Je boekingspagina aanpassen](https://ticketpa.com/nl/helpcentrum/boekingspagina-aanpassen).

## Veelgestelde vragen

### Kan ik mijn eigen knopstijl gebruiken?

Ja. Verander bij de gewone knop de stijl die in de code staat. Verander bij de knop met het venster `data-ticketpa` in `data-ticketpa="link"`. Het script laat de eigen stijl van je link dan intact en opent nog steeds het boekingsvenster.

### Werkt de knop in e-mails en nieuwsbrieven?

Gebruik de gewone knop. Dat is een gewone link met de opmaak in de code zelf. Die werkt dus zonder script.