Ein Stück Code auf deiner Website

Füg diesen Code in deine Website ein, dann erscheint dort ein Reservierungsknopf in der Form und den Farben, die du in Servetta wählst. Deine Website muss dafür nicht neu gebaut werden. Betreut jemand anderes deine Website? Dann schick diese Seite weiter oder mail die Anleitung mit deinem eigenen Code direkt aus Servetta.

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 einSetz es einmal auf jede Seite mit dem Knopf, kurz vor dem schließenden Body-Tag. Das Skript lädt nach deiner Seite und hält sie nicht auf.
Oder setz es auf deinen eigenen KnopfHast du schon einen Knopf oder Link zum Reservieren? Setz data-couvert-open darauf, dann öffnet er den Buchungsablauf. Einen eigenen Knopf in der Ecke zeichnen wir dann nicht.
Mehr braucht es nichtDer Buchungsablauf lädt erst, wenn jemand auf den Knopf klickt. Bis dahin merken deine Besucher fast nichts davon.

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 Code oben steht ein Beispielschlüssel. Dein eigener Schlüssel beginnt mit pk_live_ und gehört zu einem Restaurant. Hast du zwei Betriebe, hast du zwei Schlüssel. Deinen Code findest du in Servetta unter Einstellungen → Reservierungs-Widget → Einbau. Dort gibt es auch eine Anleitung für jedes Website-System, einen Knopf, der alles an deinen Webentwickler mailt, und einen Buchungslink, falls auf deiner Website kein Code möglich ist.

Hilfe per Mail anfragen

Zwei Aufteilungen, dieselbe Reservierung

Du wählst selbst, wie das Fenster seine Fragen stellt. Beide Formen fragen dasselbe und ergeben dieselbe Reservierung. Du wechselst mit einem Klick in deinen Einstellungen, ohne etwas an deiner Website zu ändern.

Alles auf einem Bildschirm

Personenzahl, Datum und Uhrzeit stehen untereinander und klappen zu, sobald sie ausgefüllt sind. Der Gast sieht sofort, was er gewählt hat, und kann es ändern. So liegen möglichst wenige Bildschirme zwischen einem Klick und einem Tisch.

Eine Frage pro Bildschirm

Eine Frage nach der anderen, mit einem Fortschrittsbalken oben und einem Bildschirm „Stimmt das so?“ vor dem Formular. Auf einem kleinen Telefon ist das angenehm und die Knöpfe sind größer. Dein Gast kennt diese Form von anderen Reservierungssystemen.

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 Schlüssel 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. Das funktioniert auch bei Knöpfen, die erst später auf der Seite erscheinen.
`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. Jeder andere Wert 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, zum Beispiel deiner Terrasse. 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 dem Loader, also lass es stehen.

Messen, was passiert

Das Widget sendet gewöhnliche Browser-Events. Du kannst sie mit deinem eigenen JavaScript abfangen oder mit einem eigenen HTML-Tag im Google Tag Manager. Darin steht nie etwas über den Gast selbst: kein Name, 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.