Bevor Sie starten
- Online-Reservierungen sind im Kundenportal unter Reservierungen → Einstellungen eingeschaltet.
- Sie kennen den Namen Ihres Restaurants in der Adresse Ihrer DinnerSpots-Seite, z. B.
https://dinnerspots.de/restaurant/ihr-restaurant. In den Beispielen unten ersetzen Sieihr-restaurantdurch diesen Namen.
Fertige Code-Schnipsel mit Ihrem Restaurant-Namen finden Sie im Kundenportal unter Reservierungen → Widget & Links. Dort können Sie sie direkt kopieren.
Es gibt drei Wege, die Sie auch kombinieren können:
Button auf jeder Seite
Fügen Sie diese Zeile vor </body> ein – am besten in der Vorlage, die alle Seiten Ihrer Website nutzen. Unten rechts erscheint dann ein Button „Tisch reservieren“.
<script src="https://dinnerspots.de/widget.js" data-restaurant="ihr-restaurant" async></script>Mit eigener Farbe, eigenem Text und Platz links:
<script src="https://dinnerspots.de/widget.js" data-restaurant="ihr-restaurant"
data-color="2D6A4F" data-label="Jetzt reservieren" data-position="left" async></script>Das Reservierungsfenster öffnet sich über Ihrer Website. Gäste schließen es mit dem Kreuz, mit der Esc-Taste oder mit einem Klick daneben.
Direkt in der Seite
Setzen Sie den Platzhalter dorthin, wo die Reservierung erscheinen soll. Das Skript darf an einer beliebigen Stelle der Seite stehen.
<div data-dinnerspots="ihr-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.
Nutzen Sie den Button und eine eingebettete Reservierung auf derselben Website, binden Sie das Skript nur einmal ein: <script src="…/widget.js" data-restaurant="ihr-restaurant" async> zeigt den Button und füllt zusätzlich jeden Platzhalter.
Eigener Link oder Button
Sie haben schon einen Button im Design Ihrer Website? Geben Sie ihm data-dinnerspots-open. Mit dem Skript öffnet er die Reservierung als Fenster. Ohne Skript – oder in einem neuen Tab – öffnet sich die Reservierungsseite ganz normal.
<a href="https://dinnerspots.de/widget/ihr-restaurant" data-dinnerspots-open>Tisch reservieren</a>
<script src="https://dinnerspots.de/widget.js" data-mode="none" async></script>data-mode="none" sorgt dafür, dass kein zusätzlicher schwebender Button erscheint.
Optionen
Alle Optionen sind freiwillig und stehen am <script>-Element.
| Attribut | Bedeutung | Standard |
|---|---|---|
data-restaurant | Name Ihres Restaurants aus der Adresse. Für den Button und data-mode="inline" nötig. | – |
data-mode | button zeigt den schwebenden Button, inline setzt die Reservierung direkt hinter das Skript, none zeigt nichts zusätzlich. | button |
data-color | Hauptfarbe als Hex-Wert, mit oder ohne #. Die Schriftfarbe auf Buttons wird automatisch passend gewählt. | E74C3C |
data-label | Text auf dem schwebenden Button, höchstens 40 Zeichen. | Tisch reservieren |
data-position | right oder left – an welcher Ecke der Button sitzt. | right |
data-source | Kanal für Ihre Statistik, z. B. startseite. Kleinbuchstaben, Ziffern, ., _ und -, höchstens 40 Zeichen. | website |
Links für Instagram, Facebook & Co.
Überall, wo Sie kein Skript einbauen können, nutzen Sie einen Link. Er öffnet die Reservierung als eigene Seite. Am Ende des Links steht der Kanal – so sehen Sie im Kundenportal, woher Ihre Reservierungen kommen.
#E74C3CSo ist der Link aufgebaut:
https://dinnerspots.de/widget/ihr-restaurant?src=instagram&farbe=2D6A4F| Kanal | src= | Wohin damit? |
|---|---|---|
| Website | website | Für Buttons und Links auf Ihrer eigenen Website, wenn Sie das Skript nicht nutzen möchten. |
instagram | Im Profil unter „Profil bearbeiten“ → „Links“ oder als Link-Sticker in Ihrer Story. | |
facebook | Auf Ihrer Seite über „Button hinzufügen“ → „Jetzt buchen“ oder „Mehr erfahren“ – oder im Beitrag. | |
whatsapp | Im WhatsApp-Business-Profil als Website oder als Antwort auf Reservierungsanfragen im Chat. | |
google | In Ihrem Google-Unternehmensprofil als Link für Reservierungen. | |
| Newsletter | newsletter | Als Button in Ihrem Newsletter oder in Ihrer E-Mail-Signatur. |
| QR-Code | qr | Machen Sie daraus einen QR-Code für Tischaufsteller, Flyer oder die Rechnung. |
farbe= ist freiwillig. Eigene Kanäle wie src=flyer-sommer gehen auch – mit denselben Regeln wie bei data-source.
Nach der Buchung
Sobald ein Gast reserviert hat, löst das Skript auf Ihrer Seite das Ereignis dinnerspots:booked aus. Es enthält nur den Status und den Namen Ihres Restaurants – nie Name, E-Mail-Adresse oder Telefonnummer des Gastes.
| Feld | Inhalt |
|---|---|
detail.status | pending, wenn Sie Reservierungen selbst bestätigen – sonst confirmed. |
detail.restaurant | Name Ihres Restaurants aus der Adresse. |
Das Ereignis kommt am Platzhalter oder am geklickten Link an und steigt bis zu document auf. Damit können Sie z. B. eine Conversion an den Meta-Pixel melden – aber nur, wenn der Gast dem auf Ihrer Website zugestimmt hat:
document.addEventListener('dinnerspots:booked', function (event) {
// Nur mit Einwilligung – hier Ihr Cookie-Banner abfragen
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 Ihres Cookie-Banners. Wie sie heißt, steht in dessen Anleitung.
JavaScript-Steuerung
Nach dem Laden stellt das Skript window.DinnerSpots bereit:
| Aufruf | Wirkung |
|---|---|
DinnerSpots.open('ihr-restaurant') | Öffnet das Reservierungsfenster. |
DinnerSpots.close() | Schließt es wieder. |
DinnerSpots.mount(element) | Füllt einen Platzhalter, den Sie nachträglich eingefügt haben, z. B. in einer Single-Page-App. |
<button type="button" onclick="DinnerSpots.open('ihr-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. Ihre Website sieht die Eingaben des Gastes nicht.
- Ihre Website erfährt nur, dass gebucht wurde – über das Ereignis oben.
- Erwähnen Sie die Online-Reservierung über DinnerSpots.de in Ihrer Datenschutzerklärung. Für den Meta-Pixel und andere Tracking-Dienste brauchen Sie wie immer die Einwilligung Ihrer Gäste.
Eigene Systeme anbinden
Sie möchten Reservierungen aus einem Chatbot für Instagram, Facebook Messenger oder WhatsApp annehmen, sie in Ihr Kassensystem übernehmen oder bei jeder neuen Reservierung benachrichtigt werden? Dafür gibt es die Bontrivo-API mit Webhooks.