DinnerSpots
Hamburg

Städte auf DinnerSpots

Hamburg
Restaurant eintragen
  1. Start
  2. Für Restaurants
  3. Für Entwickler

Reservierungen auf deiner Website

Mit ein paar Zeilen Code nehmen Gäste direkt auf deiner Website Reservierungen an – im Look deines Restaurants, ohne Cookies und ohne Konto.

Bevor du startest

  • Online-Reservierungen sind im Kundenportal unter Reservierungen → Einstellungen eingeschaltet.
  • Du kennst den Namen deines Restaurants in der Adresse, z. B. https://dinnerspots.de/restaurant/dein-restaurant. In den Beispielen unten ersetzt du dein-restaurant durch diesen Namen.

Fertige Code-Schnipsel mit deinem Restaurant-Namen findest du im Kundenportal unter Reservierungen → Widget & Links. Dort kannst du sie direkt kopieren.

Es gibt drei Wege. Du kannst sie auch kombinieren:

Button auf jeder Seite

Füge diese Zeile vor </body> ein – am besten in der Vorlage, die alle Seiten deiner Website nutzen. Unten rechts erscheint dann ein Button „Tisch reservieren“.

<script src="https://dinnerspots.de/widget.js" data-restaurant="dein-restaurant" async></script>

Mit Farbe, eigenem Text und Platz links:

<script src="https://dinnerspots.de/widget.js" data-restaurant="dein-restaurant"
        data-color="2D6A4F" data-label="Jetzt reservieren" data-position="left" async></script>

Das Reservierungsfenster öffnet sich über deiner Website. Gäste schließen es mit dem Kreuz, mit der Esc-Taste oder mit einem Klick daneben.

Direkt in der Seite

Setze den Platzhalter dorthin, wo die Reservierung erscheinen soll. Das Skript darf an einer beliebigen Stelle der Seite stehen.

<div data-dinnerspots="dein-restaurant"></div>
<script src="https://dinnerspots.de/widget.js" async></script>

Die Höhe passt sich automatisch an. Der Platzhalter kennt data-color und data-source wie unten beschrieben.

Nutzt du den Button und eine eingebettete Reservierung auf derselben Website, binde das Skript nur einmal ein: <script src="…/widget.js" data-restaurant="dein-restaurant" async> zeigt den Button und füllt zusätzlich jeden Platzhalter.

Optionen

Alle Optionen sind freiwillig und stehen am <script>-Element.

AttributBedeutungStandard
data-restaurantName deines Restaurants aus der Adresse. Für Button und data-mode="inline" nötig.–
data-modebutton zeigt den schwebenden Button, inline setzt die Reservierung direkt hinter das Skript, none zeigt nichts zusätzlich.button
data-colorHauptfarbe als Hex-Wert, mit oder ohne #. Die Schriftfarbe auf Buttons wird automatisch passend gewählt.E74C3C
data-labelText auf dem schwebenden Button, höchstens 40 Zeichen.Tisch reservieren
data-positionright oder left – an welcher Ecke der Button sitzt.right
data-sourceKanal für deine Statistik, z. B. startseite. Kleinbuchstaben, Ziffern, ., _ und -, höchstens 40 Zeichen.website

Nach der Buchung

Sobald ein Gast reserviert hat, löst das Skript auf deiner Seite das Ereignis dinnerspots:booked aus. Es enthält nur den Status und den Namen deines Restaurants – nie Name, E-Mail-Adresse oder Telefonnummer des Gastes.

FeldInhalt
detail.statuspending, wenn du Reservierungen selbst bestätigst – sonst confirmed.
detail.restaurantName deines Restaurants aus der Adresse.

Das Ereignis kommt am Platzhalter oder am geklickten Link an und steigt bis zu document auf. Damit kannst du z. B. eine Conversion an den Meta-Pixel melden – aber nur, wenn der Gast dem auf deiner Website zugestimmt hat:

document.addEventListener('dinnerspots:booked', function (event) {
  // Nur mit Einwilligung – frag hier dein Cookie-Banner ab
  if (!window.hasMarketingConsent || !window.hasMarketingConsent()) return;
  if (typeof window.fbq === 'function') {
    window.fbq('track', 'Schedule', { content_name: event.detail.restaurant });
  }
});

hasMarketingConsent steht hier für die Abfrage deines Cookie-Banners. Wie die heißt, steht in dessen Anleitung.

JavaScript-Steuerung

Nach dem Laden stellt das Skript window.DinnerSpots bereit:

AufrufWirkung
DinnerSpots.open('dein-restaurant')Öffnet das Reservierungsfenster.
DinnerSpots.close()Schließt es wieder.
DinnerSpots.mount(element)Füllt einen Platzhalter, den du nachträglich eingefügt hast, z. B. in einer Single-Page-App.
 
<button type="button" onclick="DinnerSpots.open('dein-restaurant')">Tisch reservieren</button>
<script src="https://dinnerspots.de/widget.js" data-mode="none" async></script>

Datenschutz

  • Das Skript setzt keine Cookies und lädt nichts von Dritten.
  • Das Reservierungsformular läuft in einem eigenen Fenster (iframe) auf dinnerspots.de. Deine Website sieht die Eingaben des Gastes nicht.
  • Deine Website erfährt nur, dass gebucht wurde – über das Ereignis oben.
  • Erwähne die Reservierung über DinnerSpots.de in deiner Datenschutzerklärung. Für den Meta-Pixel und andere Tracking-Dienste brauchst du wie immer die Einwilligung deiner Gäste.

Eigene Systeme anbinden

Du willst Reservierungen aus einem Chatbot für Instagram, Facebook Messenger oder WhatsApp annehmen, sie in dein Kassensystem übernehmen oder bei jeder neuen Reservierung benachrichtigt werden? Dafür gibt es die DinnerSpots-API mit Webhooks.

Zur API-Dokumentation Frage stellen