Om een boekingsknop op je website te zetten, kopieer je in je reserveringssysteem de link naar je boekingspagina en koppel je die aan een knop op je site. Of je plakt de knopcode die je reserveringssysteem je geeft in een HTML- of codeblok. Beide manieren kosten een paar minuten, en je hebt geen ontwikkelaar nodig. Hieronder staan de stappen voor WordPress, Wix, Squarespace, Shopify en elke andere site.
Deze gids behandelt beide manieren, waar je de knop neerzet zodat gasten hem echt gebruiken, en hoe je hem test. De voorbeelden gebruiken TicketPa, maar de stappen werken bij de meeste reserveringssystemen hetzelfde.
Twee manieren om een boekingsknop op je website te zetten
| Manier | Hoe het werkt | Het beste voor |
|---|---|---|
| Een knop koppelen die je al hebt | Gebruik de knop van je websitebouwer en laat de link naar je boekingspagina gaan | Elke websitebouwer, ook als die eigen code beperkt |
| Een stukje code plakken | Plak de knopcode van je reserveringssysteem in een HTML-blok | Sites die eigen HTML toestaan, als je de kant-en-klare knop wilt |
Een knop koppelen is het eenvoudigst en werkt overal. Met de code krijg je een knop die al is opgemaakt, en bij sommige reserveringssystemen kan die de boekingspagina openen in een venster naast je site.
Stap 1: haal je boekingslink of knopcode op
Elk reserveringssysteem geeft je een link naar je boekingspagina, en veel systemen geven je ook een link per activiteit en een stukje code voor een knop. Open in TicketPa de pagina Delen. Daar vind je:
- Je boekingspagina: één link naar alle activiteiten die gasten kunnen boeken. Gebruik hem in je hoofdmenu en op je homepage.
- Eén activiteit: een link die direct naar de kalender van één activiteit gaat. Gebruik hem op de pagina van die activiteit en in posts of advertenties erover.
- Boek nu-knop: code om in je website te plakken, in de accentkleur van je boekingspagina. Er zijn twee versies:
- een eenvoudige knop, die overal werkt, zelfs in e-mails
- een knop die het boeken in een venster opent naast je site, op een computer
Kopieer de link of de code die je nodig hebt.
Stap 2: zet hem op je website
WordPress
Een knop koppelen: voeg in de blokeditor een Knoppen-blok toe waar je de knop wilt hebben, typ "Boek nu" en plak je boekingslink in het linkveld van de knop.
De code plakken: voeg een Aangepaste HTML-blok toe waar je de knop wilt hebben en plak de code. Bekijk een voorbeeld van de pagina om de knop te zien.
Heeft je thema een menu in de header, voeg je boekingslink dan ook als menu-item toe, onder Weergave en dan Menu's of in het navigatieblok van de site-editor.
Wix
Een knop koppelen: voeg een Knop toe vanuit het paneel Elementen toevoegen, verander de tekst in "Boek nu", open daarna de linkinstellingen en kies een webadres. Plak je boekingslink.
Wix zet eigen code in een frame. Daardoor kan een knop soms geen nieuw venster openen. Bij Wix is een knop koppelen daarom de betrouwbaarste keuze.
Squarespace
Een knop koppelen: bewerk de pagina, voeg een Button-blok (knopblok) toe, typ "Boek nu" en plak je boekingslink als link.
De code plakken: voeg een Code-blok toe en plak de code. Codeblokken die scripts uitvoeren, zijn alleen beschikbaar in sommige abonnementen van Squarespace. Werkt de code in jouw abonnement niet, koppel dan een knop.
Shopify
Een knop koppelen: voeg in de thema-editor een sectie met een knop toe of bewerk er een, zoals een afbeeldingsbanner, en plak je boekingslink als link van de knop. Om hem aan je menu toe te voegen, ga je naar Onlinewinkel en dan Navigatie, open je je hoofdmenu en voeg je een menu-item met je boekingslink toe.
De code plakken: voeg in de thema-editor een sectie Aangepaste Liquid toe en plak de code.
Elke andere website
Op een zelfgebouwde site, of in websitebouwers als Webflow, Framer of Carrd, plak je de code in de HTML van de pagina, of in het embed- of HTML-element van de websitebouwer, op de plaats waar de knop moet komen. Kun je geen code toevoegen, gebruik dan gewoon een link of knop en laat die naar je boekingslink gaan.
Waar zet je je boekingsknop?
Een boekingsknop werkt alleen als gasten hem zien op het moment dat ze willen boeken:
- Bovenaan de pagina van elke activiteit, naast de prijs, zodat gasten niet hoeven te scrollen.
- In je hoofdmenu, als laatste item, opgemaakt als knop.
- Onderaan de pagina van elke activiteit, na de beschrijving en de foto's.
- Op je homepage, in de buurt van de eerste kop.
- Op je contactpagina, voor gasten die op het punt stonden een bericht te sturen om te vragen of er nog plaats is.
Gebruik "Boek nu" of "Bekijk beschikbaarheid" als tekst op de knop. Gasten snappen meteen wat ze betekenen, en ze beginnen allebei met wat de gast wil doen.
Link elke activiteit naar een eigen kalender
Heeft je website een pagina per activiteit, link de knop op elke pagina dan naar die activiteit en niet naar je algemene boekingspagina. Gasten komen dan meteen in de juiste kalender terecht en slaan een stap over. Zo haken er minder af voordat ze boeken.
In TicketPa staat op de pagina Delen een link voor elke activiteit. Gebruik de link naar je algemene boekingspagina alleen op plaatsen die over alles gaan, zoals je menu en je homepage.
Test je boekingsknop
Voordat je iemand over de knop vertelt, test je hem zoals een gast dat zou doen:
- Open je website op je telefoon en tik op de knop.
- Controleer of je op de juiste pagina komt, met de juiste activiteit en actuele tijden.
- Doe een testboeking, of ga door tot de betaalstap.
- Herhaal het op een computer. Opent je knop het boeken in een venster, controleer dan of dat venster opent, en of de boekingspagina nog steeds opent als de browser vensters blokkeert.
Gebruik dezelfde link overal
Je boekingslink werkt overal waar een gast op een link kan tikken, niet alleen op je website. Zet hem in je Google-bedrijfsprofiel, je Instagram-bio en je antwoorden in WhatsApp. Onze gids over boekingen via Instagram, Google en WhatsApp laat zien waar je hem op elk kanaal zet.
Zo werkt de knop van TicketPa
De knop van TicketPa is een link met een klein script. Op een computer opent hij je boekingspagina in een venster naast je site, zodat je website erachter open blijft. Op een telefoon, of als de browser het venster blokkeert, opent hij je boekingspagina als gewone link. Het script volgt je bezoekers niet, en de knop gebruikt de accentkleur van je boekingspagina.
TicketPa is een reserveringssysteem voor tours, cursussen en activiteiten, met een boekingspagina die ook zonder website werkt. Bekijk alle functies, of de pagina voor jouw soort activiteit, zoals tours en rondleidingen of workshops.
