Widgets einbinden.

Ein Loader bindet Öffnungszeiten, Reservierungen und Speisekarte ein. Füge das Script einmal hinzu und setze danach den passenden Widget-Container an die gewünschte Stelle.

index.html

<script async src="https://tavorino.com/widget/v1.js"></script>

Vor dem Einbau

Das passende Modul muss für dein Restaurant aktiviert sein.
Die Restaurant-ID findest du in den Account-Einstellungen.
HTML, React, Next.js und Vue werden unterstützt.

Öffnungszeiten

Zeigt deine regulären Öffnungszeiten und berücksichtigt automatisch passende Sondertage.

data-show-week="false"

Zeigt nur den heutigen Tag. Das ist der Standardwert.

data-show-week="true"

Zeigt heute und die nächsten sechs Tage.

index.html

<div
  class="tavorino-widget"
  data-tavorino-opening-hours
  data-show-week="true"
  data-restaurant-id="550e8400-e29b-41d4-a716-446655440000"
></div>

<script async src="https://tavorino.com/widget/v1.js"></script>

Ein einmaliger Sondertag überschreibt den regulären Wochentag. Wiederkehrende Sondertage werden ebenfalls berücksichtigt.

Reservierungen

Binde das vollständige Reservierungsformular für Datum, Uhrzeit, Gäste und Kontaktdaten ein.

index.html

<div
  class="tavorino-widget"
  data-tavorino-reservation
  data-restaurant-id="550e8400-e29b-41d4-a716-446655440000"
></div>

<script async src="https://tavorino.com/widget/v1.js"></script>

Reservierungsregeln, Öffnungszeiten, Tischverfügbarkeit und Backend-Validierung werden automatisch angewandt.

Bestellungen

Zeigt die aktive Speisekarte. Auf Wunsch führt eine Schaltfläche direkt ins Bestellportal.

data-ordering-enabled="false"

Zeigt die Speisekarte ohne Bestellfunktion. Das ist der Standardwert.

data-ordering-enabled="true"

Ergänzt die Speisekarte um „Bestellung starten“.

index.html

<div
  class="tavorino-widget"
  data-tavorino-menu
  data-ordering-enabled="true"
  data-restaurant-id="550e8400-e29b-41d4-a716-446655440000"
></div>

<script async src="https://tavorino.com/widget/v1.js"></script>

Ist das Bestellportal nicht verfügbar, bleibt die Speisekarte sichtbar und es erscheint ein Hinweis.

Design anpassen

Lege die CSS-Variablen direkt auf dem Widget-Container fest. Sie gelten für Öffnungszeiten, Reservierungen und Speisekarte.

styles.css

.tavorino-widget {
  --tavorino-primary: #7a3026;
  --tavorino-card-background: #ffffff;
  --tavorino-text: #292524;
  --tavorino-color-scheme: light;
  --tavorino-border: #e7e5e4;
  --tavorino-button-background: #7a3026;
  --tavorino-button-text: #ffffff;
  --tavorino-radius: 20px;
  --tavorino-padding: 28px;
}

Variable	Wirkung	Standard
--tavorino-background	Äußerer Hintergrund	transparent
--tavorino-card-background	Karten- und Eingabeflächen	#f8f5ed
--tavorino-header-background	Kopfbereich	transparent
--tavorino-content-background	Inhaltsbereich	transparent
--tavorino-footer-background	Fußbereich	transparent
--tavorino-primary	Primärfarbe und Überschriften	#123622
--tavorino-secondary	Sekundäre Akzente	#7f987d
--tavorino-text	Textfarbe	#17251d
--tavorino-muted	Sekundärtext und Platzhalter	#6d726b
--tavorino-border	Rahmen und Trennlinien	#ded8cd
--tavorino-color-scheme	Native Feldfarben	light
--tavorino-focus	Fokusrahmen	Sekundärfarbe
--tavorino-danger	Fehler und Pflichtfelder	#9b6a63
--tavorino-error-background	Fehlerflächen	#fff7f5
--tavorino-button-background	Aktionsflächen	Primärfarbe
--tavorino-button-text	Text auf Aktionsflächen	#ffffff
--tavorino-disabled-background	Deaktivierte Flächen	#f0ede6
--tavorino-disabled-text	Deaktivierter Text	#9b9a93
--tavorino-shadow	Schatten	rgba(0, 0, 0, 0.03)
--tavorino-radius	Kartenradius	8px
--tavorino-control-radius	Feldradius	Kartenradius
--tavorino-button-radius	Aktionsradius	Kartenradius
--tavorino-spacing	Abstände	16px
--tavorino-padding	Innenabstände	24px
--tavorino-max-width	Maximale Breite	1024px

Gleichnamige Data-Attribute wie data-primary="#7a3026" funktionieren ebenfalls und haben Vorrang vor CSS-Variablen.

JavaScript-API

Der Loader erkennt Container automatisch. Für dynamische Inhalte kannst du Widgets gezielt mounten.

widget.js

window.TavorinoOpeningHours.mount("#hours", restaurantId);
window.TavorinoReservation.mount("#reservation", restaurantId);
window.TavorinoMenu.mount("#menu", restaurantId);

window.TavorinoMenu.mountAll();

Events & Sicherheit

Höre auf den Ladezustand des Widgets und reagiere auf neue Reservierungen.

Das Event tavorino:ready enthält die Restaurant-ID und den Widget-Typ. Nach erfolgreicher Buchung wird tavorino:reservation-created ausgelöst.

tavorino:ready

Das Widget ist vollständig geladen.

tavorino:reservation-created

Eine Reservierung wurde erfolgreich angelegt.

events.js

const widget = document.querySelector("[data-tavorino-reservation]");

widget.addEventListener("tavorino:ready", (event) => {
  console.log("Bereit", event.detail.widgetType);
});

widget.addEventListener("tavorino:reservation-created", () => {
  console.log("Reservierung wurde angelegt");
});

Isoliertes iframe

Formular und Verarbeitung laufen innerhalb der Tavorino-Domain.

Nur notwendige Signale

Ausgetauscht werden Status- und Größeninformationen.

Keine Gästedaten

DOM-Events enthalten keine persönlichen Kundendaten.

Fehlerhilfe

Prüfe diese Punkte, wenn ein Widget nicht wie erwartet erscheint.

Widget bleibt leer

Prüfe Script, Datenattribut und Restaurant-ID.

Sondertag fehlt

Öffnungszeiten werden aus den aktiven Sondertagen geladen.

Bestellen nicht möglich

Prüfe, ob Bestellportal und ORDERS-Modul aktiviert sind.

Widget erscheint doppelt

Binde das Script nur einmal ein; der Loader erkennt montierte Container.

Design fehlt

Setze Variablen direkt auf den Container. Data-Attribute haben Vorrang.