Hoe zet ik een boekknop op mijn website?

Bijgewerkt op 27 oktober 2026

Op Instellingen > Widget maak je een stukje code dat je één keer op je eigen website plakt. Daarna staat er op elke pagina van je site een zwevende knop in de hoek van het scherm. Wie erop klikt, krijgt het boekvenster in een venster over je website heen, en blijft dus op je site.

Je hoeft er geen verstand van te hebben. Het is kopiëren en plakken, en het duurt een paar minuten.

De knop instellen

In de kaart Op je website plaatsen staan twee keuzes:

• Tekst op de knop. Standaard "Maak afspraak". Je mag er iets anders van maken, zoals "Plan je trimbeurt" of "Boek online", tot 40 tekens.
• Hoek van het scherm. Rechtsonder of Linksonder. Kies linksonder als er rechtsonder al een chatknop op je website staat.

Daaronder staat een voorbeeld: een nagebootst websiteje met jouw knop in de gekozen hoek, in je hoofdkleur. Klik op de knop in het voorbeeld en je krijgt het echte boekvenster te zien, precies zoals een bezoeker het krijgt.

Die twee keuzes worden nergens opgeslagen. Ze zitten in de code zelf. Verander je later de tekst of de hoek, dan kopieer je de code opnieuw en vervang je de oude op je website. Hetzelfde geldt voor de kleur van de knop: die komt van Instellingen > Mini-website, en een nieuwe kleur komt pas op je site als je de nieuwe code plakt. Meer over de kleur in Logo, omslagfoto en kleur van je pagina aanpassen.

De code op je website zetten

Het scherm zet de stappen onder elkaar in de kaart Zo zet je de knop op je website:

1. Klik op Kopieer code. De knop zegt even Gekopieerd!.
2. Log in op je website, op de plek waar je ook je teksten en foto's aanpast.
3. Zoek een plek voor extra code. In WordPress voeg je een blok Aangepaste HTML toe. Bij Wix, Squarespace en de meeste andere websitebouwers heet het Custom code of Code-injectie, en het staat bij de instellingen van je site.
4. Plak de code daar en sla op, of klik op Publiceren.
5. Open je website: rechtsonder staat nu je knop. Klik erop om te zien of het werkt.

Zet de code het liefst op een plek die voor de hele site geldt en niet op één pagina. Dan staat de knop overal, ook op je pagina met prijzen.

Staat de knop midden op je pagina?

Dan zette je websitebouwer de code in een kader in plaats van over de hele pagina. Je ziet dan een vakje midden in je tekst. Haal de code daar weg en zet hem op de plek voor extra code bij de instellingen van je site.

Lukt het niet?

Zet dan een gewone knop of tekst op je website die naar je boekingspagina linkt. Het adres staat onderaan de kaart Zo zet je de knop op je website, met een knop Kopieer link. Een link werkt altijd, in elke websitebouwer.

Bouwt iemand anders je website, stuur de code dan door: De code naar je webbouwer mailen.

Wat er gebeurt als iemand boekt via de knop

Precies hetzelfde als op je boekingspagina: dezelfde vier stappen, dezelfde regels, dezelfde bevestiging. In je agenda zie je geen verschil tussen een boeking via de knop en een boeking via je link. Wat je klant onderweg ziet, staat in Zo boekt een klant online, stap voor stap.

Het enige verschil: in het venster op je website staat alleen het boeken, zonder je verhaal en openingstijden eromheen. Die staan op je website al.