Eén stukje code op je site

Plak deze code op je website en er staat een reserveerknop op, in de vorm en kleuren die je in Servetta kiest. Je site hoeft niet opnieuw gebouwd te worden. Doet iemand anders je website? Stuur deze pagina door of mail de instructie met je eigen code vanuit Servetta.

Het fragment

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

Plak het script in je paginaZet het één keer op elke pagina waar de knop moet staan, vlak voor het einde van de body. Het script laadt na je pagina en houdt die niet op.
Of zet het op je eigen knopHeb je al een knop of link om te reserveren? Zet er data-couvert-open op en die opent het boekingsscherm. Dan tekenen wij geen eigen knop in de hoek.
Meer is niet nodigHet boekingsscherm laadt pas als iemand op de knop klikt. Tot dan merkt je bezoeker er bijna niets van.

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 de code hierboven staat een voorbeeldsleutel. Je eigen sleutel begint met pk_live_ en hoort bij één restaurant. Heb je twee zaken, dan heb je twee sleutels. Je code staat in Servetta onder Instellingen → Reserveringswidget → Installatie. Daar vind je ook uitleg per websitesysteem, een knop die alles naar je webbouwer mailt en een reserveringslink voor als er geen code op je site kan.

Mail ons voor hulp

Twee indelingen, dezelfde reservering

Je kiest zelf hoe het venster zijn vragen stelt. Beide vormen vragen hetzelfde en leveren dezelfde reservering op. Je wisselt met één klik in je instellingen, zonder iets aan je site te veranderen.

Alles op één scherm

Aantal, datum en tijd staan onder elkaar en klappen dicht zodra ze zijn ingevuld. De gast ziet meteen wat hij koos en kan het aanpassen. Daardoor zitten er zo min mogelijk schermen tussen een klik en een tafel.

Eén vraag per scherm

Eén vraag tegelijk, met een voortgangsbalk bovenin en een scherm “Klopt dit?” voor het formulier. Dat werkt prettig op een kleine telefoon en de knoppen zijn groter. Je gast kent deze vorm van andere reserveersystemen.

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 sleutel 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 cadeaubonnen, open voor hetzelfde als reserve en close om te sluiten. Dit werkt ook op knoppen die later op de pagina verschijnen.
`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 andere waarde 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 de loader, dus laat het staan.

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, mailadres of 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 begint een cadeaubon te kopen.
`servetta:gift-completed`	De cadeaubon 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.