One snippet on your own site

Paste this code into your website and a booking button appears, in the shape and colours you choose in Servetta. Nobody has to rebuild your site. Does someone else run your website? Forward this page or email them the instructions and your own code from Servetta.

The snippet

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

Paste the script into your pageAdd it once to every page that needs the button, just before the closing body tag. The script loads after your page and does not hold it up.
Or put it on your own buttonAlready have a button or link for bookings? Add data-couvert-open to it and it opens the booking flow. Then we do not draw our own button in the corner.
That is itThe booking flow only loads when someone clicks the button. Until then your visitor barely notices it.

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 code above contains a sample key. Your own key starts with pk_live_ and belongs to one restaurant. Two restaurants means two keys. Your code is in Servetta under Settings → Booking widget → Installation. There you also find instructions for each website builder, a button that emails everything to your web developer and a booking link for when your site cannot take code.

Email us for help

Two layouts, the same booking

You choose how the sheet asks its questions. Both layouts ask the same things and produce the same booking. You switch with one click in your settings, without changing anything on your site.

Everything on one screen

Party size, date and time are stacked and collapse once they are filled in. The guest sees at once what they chose and can change it. So there are as few screens as possible between a click and a table.

One question per screen

One question at a time, with a progress bar at the top and a “Does this look right?” screen before the form. That works well on a small phone and the buttons are bigger. Your guests know this layout from other booking systems.

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 a key 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. Any other value 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, such as your terrace. Useful under a photo of that terrace.

data-couvert-bound is set by the loader itself on every button it already knows about. That attribute belongs to the loader, so 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 contain anything about the guest: no name, email address or 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.