De reserveerknop op je eigen site

Eén regel op je eigen site

De reserveerknop van Servetta is één script. De knop tekenen wij, in de vorm en de kleuren die je zelf in je instellingen kiest. Geen plug-in, geen iframe dat je zelf moet passen, en niemand die je site opnieuw hoeft te bouwen.

Het fragment

<script
  src="https://widget.servetta.online/w.js"
  data-servetta-venue="pk_live_000000000000000000000000"
  defer
></script>

Plak het script in je paginaEén keer per pagina, het liefst vlak boven het einde van de body. Het laadt uitgesteld en houdt je pagina nergens op.
Of zet het op je eigen knopWil je de knop zelf vormgeven, dan opent elk element met data-couvert-open het boekingsscherm: een knop, een link, een afbeelding. Wat er al staat, kan het worden — en dan blijven wij er met onze vingers vanaf.
Verder nietsHet boekingsscherm zelf wordt pas opgehaald als iemand er echt op klikt. Tot dat moment kost het je bezoeker bijna niets.

Het fragment

<script
  src="https://widget.servetta.online/w.js"
  data-servetta-venue="pk_live_000000000000000000000000"
  defer
></script>

<button data-servetta-action="reserve">Reserveer een tafel</button>

Je publieke sleutel

In het fragment hierboven staat een voorbeeld. De jouwe begint met pk_live_ en hoort bij één restaurant, dus twee zaken betekent twee sleutels. Vraag hem bij ons op: een scherm waar je hem zelf ophaalt is er nog niet.

Vraag je sleutel op

Wat je mee kunt geven

Zet een attribuut op het script-element en elke knop op de pagina erft het. Zet hetzelfde attribuut op één knop, dan wint die knop. Een lege waarde telt als niet ingevuld.

Attribuut	Waar	Als je niets opgeeft	Wat het doet
`data-servetta-venue`	Script of knop	Verplicht	De publieke sleutel van je restaurant. Zonder deze gebeurt er niets — zie hieronder.
`data-servetta-action`	Op de knop	Wij tekenen de knop	Zet dit op je eigen knop en die knop opent het scherm dat je noemt: reserve voor reserveren, gift voor cadeaukaarten, open voor hetzelfde als reserve, en close om te sluiten. Werkt ook op knoppen die pas later op de pagina komen.
`data-servetta-open`	Op de knop	Wij tekenen de knop	Markeert je eigen element als de knop die het boekingsscherm opent. Verder heeft het geen waarde nodig. Staat dit ergens op de pagina, dan tekenen wij zelf geen knop.
`data-servetta-trigger`	Script of knop	Rechtsonder in beeld	Zet dit op een leeg element en wij tekenen onze knop precies daar, in plaats van rechtsonder in beeld. Op het script-element betekent de waarde none dat we helemaal geen knop tekenen.
`data-servetta-locale`	Script of knop	De taal van je bezoeker, anders die van je restaurant	De taal van het boekingsscherm: nl, en, de, fr of es. Een taal die we niet spreken wordt genegeerd.
`data-servetta-party`	Script of knop	De gast kiest zelf	Het aantal personen waarmee het scherm opent. Een heel getal vanaf 1; al het andere wordt genegeerd.
`data-servetta-date`	Script of knop	De gast kiest zelf	De datum waarmee het scherm opent, geschreven als 2026-09-12. Anders geschreven wordt hij genegeerd.
`data-servetta-time`	Script of knop	De gast kiest zelf	De tijd waarmee het scherm opent, geschreven als 19:30 in 24-uursnotatie. Anders geschreven wordt hij genegeerd.
`data-servetta-area`	Script of knop	De gast kiest zelf	Het id van een zone uit je plattegrond, bijvoorbeeld je terras. Handig onder een foto van dat terras.

data-couvert-bound zet de loader zelf op elke knop die hij al kent. Dat attribuut is van hem; laat het met rust.

Meten wat er gebeurt

De widget stuurt gewone browser-events. Luister erop met je eigen JavaScript of met een aangepaste HTML-tag in Google Tag Manager. Er staat nooit iets in over de gast zelf — geen naam, geen mailadres, geen telefoonnummer.

Google Tag Manager, of je eigen script

<script>
  window.addEventListener('servetta:reservation-completed', function () {
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({ event: 'servetta_reservation' });
  });
</script>

Event	Wanneer
`servetta:loaded`	Het script is geladen en de knop staat op de pagina.
`servetta:opened`	Iemand heeft de widget geopend.
`servetta:closed`	De widget is weer gesloten.
`servetta:reservation-started`	De gast is bij het invulscherm van de reservering.
`servetta:reservation-completed`	De reservering is gelukt.
`servetta:gift-opened`	Iemand is begonnen met een cadeaukaart kopen.
`servetta:gift-completed`	De cadeaukaart is betaald.
`servetta:error`	Er ging iets mis. In detail.reason staat kort wat.

Twee dingen die je niet verwacht

Geen sleutel, geen scherm

Staat er nergens een data-couvert-venue, dan laat de loader de klik met rust: een link navigeert gewoon en een knop doet wat hij al deed. Een venster dat leeg openklapt is erger dan een knop die nog werkt.

Knoppen die later verschijnen tellen mee

De loader blijft meekijken met je pagina. Een knop die pas na het laden verschijnt — in een React-site, onder een cookiebanner, in een footer die later inlaadt — wordt alsnog opgepakt.