Der Reservierungsknopf auf deiner eigenen Website

Eine Zeile auf deiner eigenen Website

Der Reservierungsknopf von Servetta ist ein Skript. Den Knopf selbst zeichnen wir, in der Form und den Farben, die du in deinen Einstellungen wählst. Kein Plug-in, kein iframe, das du selbst anpassen musst, und niemand muss deine Website neu bauen.

Das Fragment

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

Füg das Skript in deine Seite einEinmal pro Seite, am besten kurz vor dem schließenden Body-Tag. Es lädt verzögert und hält nichts auf.
Oder setz es auf deinen eigenen KnopfWillst du den Knopf lieber selbst gestalten, öffnet jedes Element mit data-couvert-open den Buchungsablauf: ein Knopf, ein Link, ein Bild. Was schon da ist, geht auch — und dann lassen wir die Finger davon.
Mehr nichtDer Buchungsablauf selbst wird erst geholt, wenn jemand wirklich klickt. Bis dahin kostet er deine Besucherin fast nichts.

Das Fragment

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

<button data-servetta-action="reserve">Tisch reservieren</button>

Dein öffentlicher Schlüssel

Im Fragment oben steht ein Beispiel. Deiner beginnt mit pk_live_ und gehört zu einem Restaurant, zwei Betriebe bedeuten also zwei Schlüssel. Frag ihn bei uns an — einen Bildschirm, auf dem du ihn selbst holst, gibt es noch nicht.

Frag deinen Schlüssel an

Was du mitgeben kannst

Setz ein Attribut auf das Skript-Element und jeder Knopf auf der Seite erbt es. Setz dasselbe Attribut auf einen Knopf, dann gewinnt dieser Knopf. Ein leerer Wert zählt als nicht gesetzt.

Attribut	Wo	Wenn du nichts angibst	Was es tut
`data-servetta-venue`	Skript oder Knopf	Pflicht	Der öffentliche Schlüssel deines Restaurants. Ohne ihn passiert nichts — siehe unten.
`data-servetta-action`	Auf dem Knopf	Wir zeichnen den Knopf	Setz das auf deinen eigenen Knopf und er öffnet den Bildschirm, den du nennst: reserve zum Reservieren, gift für Gutscheine, open für dasselbe wie reserve, und close zum Schließen. Funktioniert auch bei Knöpfen, die erst später auf die Seite kommen.
`data-servetta-open`	Auf dem Knopf	Wir zeichnen den Knopf	Markiert dein eigenes Element als das, was den Buchungsablauf öffnet. Es braucht keinen eigenen Wert. Steht das irgendwo auf der Seite, zeichnen wir selbst keinen Knopf.
`data-servetta-trigger`	Skript oder Knopf	Unten in der Ecke des Bildschirms	Setz das auf ein leeres Element und wir zeichnen unseren Knopf genau dort, statt unten in der Ecke. Auf dem Skript-Element bedeutet der Wert none, dass wir gar keinen Knopf zeichnen.
`data-servetta-locale`	Skript oder Knopf	Die Sprache deiner Besucherin, sonst die deines Restaurants	Die Sprache des Buchungsablaufs: nl, en, de, fr oder es. Eine Sprache, die wir nicht sprechen, wird ignoriert.
`data-servetta-party`	Skript oder Knopf	Der Gast wählt selbst	Die Personenzahl, mit der der Ablauf öffnet. Eine ganze Zahl ab 1; alles andere wird ignoriert.
`data-servetta-date`	Skript oder Knopf	Der Gast wählt selbst	Das Datum, mit dem der Ablauf öffnet, geschrieben als 2026-09-12. Anders geschrieben wird es ignoriert.
`data-servetta-time`	Skript oder Knopf	Der Gast wählt selbst	Die Uhrzeit, mit der der Ablauf öffnet, geschrieben als 19:30 im 24-Stunden-Format. Anders geschrieben wird sie ignoriert.
`data-servetta-area`	Skript oder Knopf	Der Gast wählt selbst	Die id eines Bereichs aus deinem Tischplan — deiner Terrasse zum Beispiel. Praktisch unter einem Foto genau dieser Terrasse.

data-couvert-bound setzt der Loader selbst auf jeden Knopf, den er schon kennt. Dieses Attribut gehört ihm; lass es in Ruhe.

Messen, was passiert

Das Widget feuert gewöhnliche Browser-Events. Hör sie mit deinem eigenen JavaScript ab oder mit einem eigenen HTML-Tag im Google Tag Manager. Sie sagen nie etwas über den Gast — keinen Namen, keine E-Mail-Adresse, keine Telefonnummer.

Google Tag Manager, oder dein eigenes Skript

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

Event	Wann
`servetta:loaded`	Das Skript ist geladen und der Knopf steht auf der Seite.
`servetta:opened`	Jemand hat das Widget geöffnet.
`servetta:closed`	Das Widget wurde wieder geschlossen.
`servetta:reservation-started`	Der Gast ist beim Buchungsformular angekommen.
`servetta:reservation-completed`	Die Buchung ist durchgegangen.
`servetta:gift-opened`	Jemand hat angefangen, einen Gutschein zu kaufen.
`servetta:gift-completed`	Der Gutschein wurde bezahlt.
`servetta:error`	Etwas ist schiefgegangen. In detail.reason steht kurz, was.

Zwei Dinge, mit denen du nicht rechnest

Kein Schlüssel, kein Ablauf

Steht nirgends ein data-couvert-venue, lässt der Loader den Klick in Ruhe: ein Link navigiert weiter und ein Knopf tut, was er vorher tat. Ein leeres Fenster ist schlimmer als ein Knopf, der noch funktioniert.

Knöpfe, die später auftauchen, zählen mit

Der Loader schaut deiner Seite weiter zu. Ein Knopf, der erst nach dem Laden erscheint — in einer React-Website, unter einem Cookie-Banner, in einem Footer, der später nachlädt — wird trotzdem erkannt.