Widget einbauen

Mit dem Reservierungswidget buchen Gäste direkt auf Ihrer eigenen Website — ohne Umweg über Portale und ohne Provision. Der Einbau ist ein einmaliger Copy-&-Paste-Schritt und dauert etwa fünf Minuten.

Einbau-Code kopieren

1. Öffnen Sie im Backoffice Einstellungen → Widget.
2. Kopieren Sie den angezeigten HTML-Code (ein <script>-Schnipsel).
3. Fügen Sie ihn an der gewünschten Stelle Ihrer Website ein — z. B. auf einer eigenen „Reservieren"-Seite. In Baukästen wie WordPress, Wix oder Jimdo nutzen Sie dafür den HTML-/Embed-Block.

Die Farbe im Konfigurator ist mit Ihrer Unternehmensfarbe aus Einstellungen → Erscheinungsbild vorbelegt (Abschnitt Unternehmensfarbe). Sie können sie hier jederzeit überschreiben — der Einbau-Code schreibt die gewählte Farbe immer als data-color mit. Ein Schnipsel, das schon auf Ihrer Website steht, verändert sich deshalb nicht, wenn Sie später eine andere Unternehmensfarbe pflegen: Kopieren Sie den Code in diesem Fall neu.

Größe der Widgets

Wie groß Ihre Widgets auf Ihrer Website erscheinen, legen Sie für alle auf einmal unter Einstellungen → Erscheinungsbild fest: Klein, Normal oder Groß. Schrift, Abstände, Karten und Knöpfe wachsen oder schrumpfen gemeinsam. Die Vorgabe gilt auch für Widgets, die schon eingebaut sind — Ihre Website müssen Sie dafür nicht anfassen. Bis die Änderung dort zu sehen ist, können wenige Minuten vergehen.

Soll ein einzelnes Widget abweichen, wählen Sie seine Größe im Konfigurator: Knöpfe frei in Prozent (50 bis 200 %), Karten, Raster, Listen und den Kalender in denselben drei Stufen. Der Einbau-Code trägt die Größe dann als data-size, z. B. data-size="l" oder data-size="130"; ohne diese Zeile gilt die Vorgabe aus dem Erscheinungsbild. Das Fenster, das sich nach dem Klick öffnet, die Form „Ganze Seite“ und das fest eingebaute Anfrageformular behalten ihre Größe.

Ihre Widgets erscheinen auf jeder Website in unserem Design: Eigenes CSS Ihrer Website (Schriften, Farben, Rahmen) greift nicht mehr in die Widgets hinein. Anpassen lassen sie sich über die Farbe und die Größe.

Domain freigeben

Aus Sicherheitsgründen läuft das Widget nur auf Domains, die Sie freigegeben haben. Tragen Sie im Backoffice unter Widget → Sicherheit Ihre Website-Adresse ein (z. B. www.mein-restaurant.de). Die Freigabe gilt für alle Widgets — Reservierung, Veranstaltungen, Gutscheine und Firmenanfragen. Ohne Eintrag läuft das Widget auf jeder Seite; mit Eintrag zeigt es überall sonst eine Fehlermeldung.

Spam-Schutz

Das Widget bringt mehrstufigen Schutz gegen automatisierte Buchungen mit (u. a. unsichtbare Bot-Prüfung). Sie müssen nichts konfigurieren — echte Gäste merken davon nichts.

Eigener Knopf auf Ihrer Website

Haben Sie auf Ihrer Website schon einen eigenen „Reservieren“-Knopf oder -Link, etwa im Menü oder im Kopfbereich? Dann kann genau dieser Knopf das Reservierungsfenster öffnen. Ergänzen Sie Ihren Einbau-Code um die Zeile data-trigger und tragen Sie dort ein, woran das Widget Ihren Knopf erkennt: einen CSS-Selektor, z. B. [data-reserve-table] oder .jetzt-reservieren. Ein Klick darauf öffnet dasselbe wie unser Knopf.

<script src="…/widget/v2.js?v=…"
        data-restaurant="ihr-betrieb"
        data-trigger="[data-reserve-table]"></script>

<a href="/reservierung" data-reserve-table>Jetzt reservieren</a>

Ihre übrigen Zeilen im Einbau-Code bleiben, wie sie sind. Der Widget-Knopf selbst darf dabei versteckt bleiben: Ein Container mit display:none um den Einbau-Code ist in Ordnung, das Fenster öffnet sich trotzdem. Ihr Link behält sein Ziel — ohne JavaScript führt er weiter auf Ihre Reservierungsseite.

Barrierefreie Version

Unter dem Widget steht ein kleiner Link „Barrierefreie Version". Er öffnet dasselbe Buchungsformular als eigene Seite in einem neuen Fenster — ohne eingebetteten Rahmen.

Gäste, die mit Screenreader oder Tastatur unterwegs sind, kommen darüber sicher zum Ziel, auch wenn der eingebettete Rahmen ihnen Schwierigkeiten macht. Sie müssen dafür nichts einrichten; der Link ist automatisch da.

Auch die Kalender-Variante lässt sich vollständig mit der Tastatur bedienen: mit den Pfeiltasten wechselt man zwischen den Tagen, mit Bild auf und Bild ab zwischen den Monaten, Pos1 und Ende springen an den Anfang bzw. das Ende einer Woche, Enter wählt den Tag. Ausgebuchte und vergangene Tage werden dabei übersprungen.

Wenn Sie im Konfigurator Ihre Hausfarbe wählen, steht direkt unter dem Farbfeld, wie gut sie sich von Weiß abhebt (z. B. „Kontrast zu Weiß: 3,8:1"). Liegt der Wert unter 4,5:1, setzt das Widget den Text auf farbigen Flächen automatisch dunkel und verwendet für Text in Ihrer Farbe eine etwas dunklere Variante — Ihre Marke bleibt erkennbar, der Text lesbar.

Ein bestimmtes Event einbinden

Statt aller kommenden Termine können Sie auch genau eine Veranstaltung auf Ihrer Seite zeigen — zum Beispiel auf der Unterseite, die ohnehin von diesem einen Kurs handelt. Im Widget-Konfigurator wählen Sie dazu oben „Ein bestimmtes Event“, danach den Termin und eine von drei Formen:

• Karte (data-variant="single") — eine breite Karte mit Bild, Datum, Preis, freien Plätzen, einem Auszug der Beschreibung und einem Buchungsknopf.
• Nur Knopf (data-variant="button") — ausschließlich der Knopf. Er öffnet dasselbe Buchungsfenster wie die Karte. Mit data-label="Platz sichern" geben Sie ihm einen eigenen Text; ohne die Zeile heißt er „Jetzt buchen“.
• Ganze Seite (data-variant="page") — die Detailseite der Veranstaltung erscheint direkt in Ihrer Seite: Bild, Galerie, Termin, Ort, Preis, Beschreibung und Stornobedingungen, darunter der Buchungsknopf. Ohne unsere Navigation, ohne Cookie-Banner, in Ihrer Hausfarbe.

Die Veranstaltung selbst steht im Einbau-Code als data-event="…". Ist sie ausgebucht, vorbei oder pausiert, bleibt das Widget stehen und sagt es — der Knopf ist dann nicht anklickbar.

Ist der Termin gelöscht oder noch nicht veröffentlicht, hängt es von der gewählten Form ab: bei Karte und Knopf erscheint gar nichts, Ihre Seite bleibt unversehrt. Bei Ganze Seite steht im Rahmen eine kurze Hinweisseite — der Rahmen selbst bleibt sichtbar, weil er die Seite trägt und nicht erst auf Daten wartet.

Auch für die eingebettete Seite gilt die Domain-Freigabe: ohne Ihre Adresse in der Liste zeigt der Rahmen eine Fehlermeldung.

Gutscheine: Fenster oder neuer Tab

Beim Gutschein-Widget entscheiden Sie im Konfigurator, wo der Kauf stattfindet:

• Fenster (data-mode="modal") — der Kauf öffnet sich in einem Fenster über Ihrer Seite, genau wie beim Veranstaltungs-Widget. Ihre Besucher bleiben auf Ihrer Website.
• Neuer Tab (data-mode="redirect") — die Kaufseite öffnet sich in einem neuen Tab. Das war bisher der einzige Weg und bleibt für alle bestehenden Einbindungen erhalten.

Bezahlt wird nie im Fenster. Nach dem Absenden steht im Fenster die Bestätigung, und der Bezahlknopf öffnet unsere Bezahlseite in der ganzen Seite — so sehen Sie und Ihre Kunden die Adresszeile. Die Zahlungsanbieter verlangen das so.

Ein einzelner Gutschein. Wählen Sie oben „Ein bestimmter Gutschein", zeigt das Widget genau einen statt der Liste (data-coupon="12") — als Karte (data-variant="single"), als reinen Knopf (data-variant="button") oder als ganze Kaufseite im Rahmen (data-variant="page"). Die Nummer setzt der Konfigurator für Sie ein.

Auch für das Fenster und die eingebettete Kaufseite gilt die Domain-Freigabe: ohne Ihre Adresse in der Liste bleibt der Rahmen leer beziehungsweise zeigt eine Fehlermeldung.

Funktion prüfen

1. Öffnen Sie Ihre Website und führen Sie eine Probe-Reservierung durch.
2. Die Buchung erscheint sofort in der Tagesansicht und in der Reservierungsliste — damit ist auch der Schritt „Probe-Reservierung" Ihrer Ersten Schritte erledigt.
3. Stornieren Sie die Probe-Buchung anschließend in der Reservierungsliste.

Gruppen- und Firmenanfragen

Größere Feiern, Firmen-Events und geschlossene Gruppen laufen über ein eigenes Formular — mit Anlass, Wunschtermin, Teilnehmerzahl, Budget und Extras. Sie können es direkt auf Ihrer Website anbieten, statt nur auf Ihre Seite bei uns zu verlinken.

Den Einbau-Code finden Sie im Backoffice unter Widget → Gruppenanfrage. Er lädt group-v2.js und kennt diese Einstellungen:

• data-variant="button" — ein Knopf auf Ihrer Seite; das Formular öffnet sich darüber. data-variant="inline" stellt das Formular stattdessen fest in die Seite.
• data-mode="modal" — der Gast bleibt auf Ihrer Seite. data-mode="redirect" öffnet stattdessen unsere Anfrage-Seite in einem neuen Tab — in der Sprache, die data-lang nennt. Gilt nur für den Knopf.
• data-label="Anfrage stellen" — Ihr eigener Knopftext. Ohne diese Zeile steht der Standardtext darauf. Beim fest eingebauten Formular ist es der Name des Rahmens, den ein Screenreader vorliest.
• data-color und data-lang wie bei den anderen Widgets.

Es gelten dieselben Domain-Freigaben wie für die übrigen Widgets: ohne freigegebene Adresse zeigt das Formular eine Fehlermeldung statt sich zu öffnen. Und dieselbe Spam-Prüfung — Sie müssen nichts einrichten.

Die Anfragen landen im Backoffice unter Anfragen, genau wie die über unsere eigene Seite. Voraussetzung ist, dass Ihr Paket Gruppenanfragen enthält.

Für Event-Anbieter

Das Widget zeigt bei Ihnen Ihre buchbaren Events statt eines Tisch-Kalenders. Der Einbau funktioniert identisch: Code kopieren, Domain freigeben, testen. Der Menüpunkt Einstellungen → Widget öffnet bei Ihnen direkt das Events-Widget; die Domain-Freigabe finden Sie in derselben Reiterleiste unter Sicherheit und tragen sie dort selbst ein.

Das Events-Widget kann zusätzlich einen Zeitraum-Filter über dem Raster anzeigen — zwei Datumsfelder und eine Wochentagsauswahl. Sie schalten ihn im Widget-Konfigurator ein; im Einbau-Code erscheint dann die Zeile data-filters="1". Gefiltert wird direkt im Browser Ihrer Besucher, es werden keine weiteren Daten nachgeladen. Bestehende Einbindungen ändern sich dadurch nicht: ohne diese Zeile bleibt alles wie bisher. Damit die Änderung auf Ihrer Website ankommt, kopieren Sie den Code einmal neu und tauschen ihn aus.