The booking button on your own site

One line on your own site

The Servetta booking button is one script. We draw the button itself, in the shape and colours you pick in your own settings. No plug-in, no iframe to size yourself, and nobody has to rebuild your site.

The snippet

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

Paste the script into your pageOnce per page, ideally just before the closing body tag. It loads deferred and holds nothing up.
Or put it on your own buttonIf you would rather style the button yourself, any element with data-couvert-open opens the booking flow: a button, a link, an image. Whatever is already there will do — and we then leave it alone entirely.
That is itThe booking flow itself is only fetched once somebody actually clicks. Until then it costs your visitor almost nothing.

The snippet

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

<button data-servetta-action="reserve">Book a table</button>

Your public key

The snippet above carries an example. Yours starts with pk_live_ and belongs to one restaurant, so two venues means two keys. Ask us for it — there is no screen yet where you can fetch it yourself.

Ask for your key

What you can pass in

Put an attribute on the script element and every button on the page inherits it. Put the same attribute on one button and that button wins. An empty value counts as not set.

Attribute	Where	If you leave it out	What it does
`data-servetta-venue`	Script or button	Required	Your restaurant’s public key. Without it nothing happens — see below.
`data-servetta-action`	On the button	We draw the button	Put this on your own button and it opens the screen you name: reserve to book, gift for gift cards, open for the same as reserve, and close to close. It also works on buttons that appear on the page later.
`data-servetta-open`	On the button	We draw the button	Marks your own element as the one that opens the booking flow. It needs no value of its own. If this is anywhere on the page, we draw no button of our own.
`data-servetta-trigger`	Script or button	Bottom corner of the screen	Put this on an empty element and we draw our button exactly there, rather than in the bottom corner. On the script element, the value none means we draw no button at all.
`data-servetta-locale`	Script or button	Your visitor’s language, otherwise your restaurant’s	The language of the booking flow: nl, en, de, fr or es. A language we do not speak is ignored.
`data-servetta-party`	Script or button	The guest picks	The party size the flow opens on. A whole number from 1 up; anything else is ignored.
`data-servetta-date`	Script or button	The guest picks	The date the flow opens on, written as 2026-09-12. Written any other way it is ignored.
`data-servetta-time`	Script or button	The guest picks	The time the flow opens on, written as 19:30 on a 24-hour clock. Written any other way it is ignored.
`data-servetta-area`	Script or button	The guest picks	The id of an area from your floor plan — your terrace, say. Useful under a photograph of that terrace.

data-couvert-bound is set by the loader itself on every button it already knows about. That attribute is its own; leave it alone.

Measuring what happens

The widget fires ordinary browser events. Listen for them with your own JavaScript or with a custom HTML tag in Google Tag Manager. They never say anything about the guest — no name, no email address, no phone number.

Google Tag Manager, or your own script

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

Event	When
`servetta:loaded`	The script has loaded and the button is on the page.
`servetta:opened`	Somebody opened the widget.
`servetta:closed`	The widget was closed again.
`servetta:reservation-started`	The guest reached the booking form.
`servetta:reservation-completed`	The booking went through.
`servetta:gift-opened`	Somebody started buying a gift card.
`servetta:gift-completed`	The gift card was paid for.
`servetta:error`	Something went wrong. detail.reason says briefly what.

Two things you would not expect

No key, no flow

If no data-couvert-venue is set anywhere, the loader leaves the click alone: a link still navigates and a button still does whatever it did before. An empty modal is worse than a button that still works.

Buttons that appear later still count

The loader keeps watching your page. A button that only appears after load — in a React site, under a cookie banner, in a footer that loads late — is picked up anyway.