Gastrobrand auf der eigenen Website

Der öffentliche Schlüssel (gbe_…) steht in Gastrobrand unter Einstellungen → Website; dort muss die Einbindung aktiviert und die Domain der Website eingetragen sein (bis zu 10 Domains, www. wird automatisch mitberücksichtigt). Ersetzen Sie gbe_IHR_SCHLUESSEL durch diesen Schlüssel.

<script src="https://gastrobrand.ch/embed/v1/gastrobrand.js" defer></script>

<gastrobrand-menu key="gbe_IHR_SCHLUESSEL" type="tagesmenu" lang="de"></gastrobrand-menu>
<gastrobrand-menu key="gbe_IHR_SCHLUESSEL" type="karte" lang="de"></gastrobrand-menu>
<gastrobrand-reservation key="gbe_IHR_SCHLUESSEL" lang="de"></gastrobrand-reservation>

Das <script> wird pro Seite nur einmal benötigt, egal wie viele Widgets darauf stehen. Es ist 8 KB gross (gzip), lädt verzögert (defer), setzt keine Cookies und hat keine Abhängigkeiten. Es wird eine Stunde gecacht: Fehlerbehebungen erreichen jede Website innerhalb einer Stunde, ohne dass jemand ein Snippet anfasst.

Der Schlüssel ist kein Passwort. Er steht im Quelltext der Website und sagt nur, welches Restaurant gemeint ist; lesbar sind ausschliesslich die Menüinhalte, die auch auf der öffentlichen Restaurant-Seite stehen. Bei Missbrauch wird er in Gastrobrand erneuert — danach müssen die Snippets auf der Website ersetzt werden (im WordPress-Plugin: nur ein Feld).

Das Widget rendert echtes HTML in die Seite (Shadow DOM, kein iframe): Es fliesst mit dem Layout, nimmt seine natürliche Höhe ein und übernimmt ohne Konfiguration Schrift und Textfarbe der Website.

• keyPflicht. Der öffentliche Schlüssel des Restaurants.
• typetagesmenu · wochenmenu · karte (Standard). Ein Tages-/Wochenmenü erscheint nur, wenn heute eines gilt; sonst ein kurzer Hinweis.
• langde (Standard) · en · it. Kann zur Laufzeit geändert werden (Sprachumschalter) — ohne neue Anfrage.
• headingauto (Standard: eigene Überschrift) · none (die Seite liefert die Überschrift).
• photosOhne Wert. Zeigt das Foto des Tages-/Wochenmenüs, falls hinterlegt.
• layoutlist (Standard: Textliste) · cards (Speisekarte als Karten: Foto, Name, Preis, eine Zeile Beschreibung). Gilt für die Gerichte der Speisekarte; Tages-, Wochen- und Saisonmenüs bleiben immer eine Liste — sie haben keine Fotos pro Gericht und sind eine Menüfolge. Gerichte ohne Foto erscheinen als reine Textkarte, nie als leerer Bildbereich.

Kartenlayout: 2 Spalten in schmalen Bereichen, bis zu 4 in breiten — bestimmt durch die Breite des Elements, nicht des Fensters. Fotos werden erst beim Sichtbarwerden geladen (loading="lazy") und sitzen in einem festen 4:3-Rahmen, damit sich das Seitenlayout beim Laden nie verschiebt. Kartenhintergrund über --gb-card-bg (Standard: transparent).

<gastrobrand-menu key="gbe_IHR_SCHLUESSEL" type="karte" lang="de" layout="cards"></gastrobrand-menu>

<style>
  gastrobrand-menu { --gb-card-bg: #ffffff; --gb-radius: 10px; }
</style>

Allergene erscheinen als nummerierte Chips (1–14, Schweizer Konvention) mit dem vollen Namen für Screenreader. Preise werden exakt so angezeigt wie auf der Restaurant-Seite. Ein Sprachwechsel auf der Seite setzt einfach das Attribut:

document.querySelectorAll("gastrobrand-menu").forEach(el => el.setAttribute("lang", "en"));

Ein Button, der den echten Reservierungsassistenten des Restaurants (Kalender mit freien Zeiten, Angaben, Bestätigung) in einem Fenster über der Website öffnet. Das Fenster ist ein iframe vom Gastrobrand-Server: Die Reservierungsdaten des Gasts werden nie in der Website des Restaurants verarbeitet, sondern direkt an Gastrobrand gesendet. Unter 640 px Breite wird es zum Bottom-Sheet; ESC, der Hintergrund und das X schliessen es; die Seite dahinter ist derweil gesperrt und scrollt nicht.

• keyPflicht.
• langSprache des Assistenten (wie oben).
• InhaltDer Text zwischen den Tags wird zur Beschriftung des Buttons; leer = «Tisch reservieren» in der gewählten Sprache.
• hiddenKein Button — die Seite öffnet das Fenster selbst (siehe unten).

Eigenen Link oder Button verwenden? Element unsichtbar einbinden und per JavaScript öffnen:

<gastrobrand-reservation key="gbe_IHR_SCHLUESSEL" lang="de" hidden></gastrobrand-reservation>
<a href="#" onclick="document.querySelector('gastrobrand-reservation').open(); return false;">Reservieren</a>

Das Element löst DOM-Events aus — gastrobrand:open, gastrobrand:close, gastrobrand:booked (bubbling). Sie enthalten bewusst keine Daten:

document.addEventListener("gastrobrand:booked", function () {
  // z. B. ein Analytics-Ereignis — die Nachricht enthält KEINE Gastdaten
});

Der Reservierungs-Seite ist das Einbetten nur von den in Gastrobrand eingetragenen Domains erlaubt (frame-ancestors, vom Browser erzwungen). Auf einer fremden Website bleibt das Fenster leer — das schützt Gäste vor nachgemachten Reservierungsformularen.

Standardmässig erben die Widgets Schrift und Textfarbe der Seite. Alles Weitere steuern CSS-Variablen, die auf dem Element (oder einem Elternelement) gesetzt werden:

• --gb-font-family— Standard: Schrift der Seite
• --gb-heading-font— Standard: wie --gb-font-family
• --gb-font-size— Standard: 1rem
• --gb-color-text— Standard: Textfarbe der Seite
• --gb-color-muted— Standard: #6b7280
• --gb-color-accent— Standard: Textfarbe
• --gb-color-bg— Standard: transparent
• --gb-color-border— Standard: rgba(0,0,0,0.12)
• --gb-radius— Standard: 6px
• --gb-space— Standard: 1rem
• --gb-max-width— Standard: none
• --gb-card-bg— Standard: transparent (nur layout="cards")
• --gb-button-bg— Standard: wie --gb-color-accent
• --gb-button-fg— Standard: #ffffff

gastrobrand-menu {
  --gb-font-family: inherit;
  --gb-color-accent: #8a5a2b;
  --gb-color-muted: #7a7a7a;
  --gb-max-width: 46rem;
}

Der Reservierungs-Button ist zusätzlich als ::part(button) ansprechbar (z. B. gastrobrand-reservation::part(button) { … }). Das Fenster selbst trägt das Erscheinungsbild des Restaurants aus Gastrobrand und wird nicht von der Website gestylt.

Nur relevant, wenn die Website eine eigene CSP sendet. Dann müssen diese Quellen erlaubt sein (die Werte gelten für diesen Gastrobrand-Server):

script-src  https://gastrobrand.ch
connect-src https://gastrobrand.ch
frame-src   https://gastrobrand.ch
img-src     https://gastrobrand.ch https://pub-45c3b7a8f6dc4fe59d90b76262fd93a5.r2.dev https:

• script-src — das Widget-Skript · connect-src — der Menü-Abruf (/api/embed/v1/menu) · frame-src — das Reservierungsfenster.
• img-src — Gerichtsfotos werden vom Gastrobrand-Server bzw. dessen Medienspeicher geladen; ein Restaurant kann aber auch externe Bild-URLs hinterlegen, daher https:.
• frame-ancestors ist unsere Direktive (auf der Reservierungs-Seite), nicht Ihre — die Website braucht dafür nichts.
• Ohne eigene CSP ist nichts zu tun. Die Widgets setzen keine Inline-Skripte und keine Inline-Styles in die Seite.

Die Menüs werden im Browser des Besuchers nachgeladen. Für Google und andere Suchmaschinen zählen sie nicht wie normaler Seiteninhalt — eine Seite, die nur aus Widgets besteht, ist für die Suche praktisch leer. Beschreiben Sie das Restaurant und sein Angebot weiterhin in den eigenen Texten der Website; die Widgets ergänzen sie um den tagesaktuellen Inhalt.

Was beim Einbinden technisch passiert: Der Browser des Besuchers lädt das Skript und die Menüdaten vom Gastrobrand-Server; dabei werden IP-Adresse, Browserangaben und die Adresse der aufrufenden Seite übermittelt. Es werden keine Cookies gesetzt, nichts im Browser gespeichert und kein Tracking betrieben. Bei einer Reservierung werden die eingegebenen Angaben an Gastrobrand übermittelt und dort für das Restaurant verarbeitet. Vom Webserver des Restaurants aus wird nichts gesendet.

Das Restaurant ist als Betreiber der Website verantwortlich, seine Besucher zu informieren. Ein Absatz für die Datenschutzerklärung — bitte Anbieter- und Firmenangaben an die eigene Erklärung anpassen:

Speisekarte und Tischreservierung (Gastrobrand)

Unsere Speisekarte, das Tagesmenü und die Online-Tischreservierung werden über den Dienst Gastrobrand eingebunden. Beim Aufruf einer Seite mit diesen Inhalten stellt Ihr Browser eine Verbindung zum Gastrobrand-Server (gastrobrand.ch) her und lädt die aktuellen Menüdaten. Dabei werden technisch bedingt Ihre IP-Adresse, Angaben zu Ihrem Browser sowie die Adresse der aufgerufenen Seite übermittelt. Es werden keine Cookies gesetzt und keine Daten in Ihrem Browser gespeichert; ein Tracking findet nicht statt.

Wenn Sie über den Reservierungs-Button einen Tisch reservieren, werden die von Ihnen eingegebenen Angaben (Name, Telefonnummer, E-Mail-Adresse, Personenzahl, Datum, Uhrzeit und allfällige Anmerkungen) an Gastrobrand übermittelt und dort ausschliesslich zur Bearbeitung Ihrer Reservierung durch unser Restaurant verarbeitet. Rechtsgrundlage ist die Anbahnung bzw. Erfüllung des Vertrags mit Ihnen. Gastrobrand verarbeitet diese Daten in unserem Auftrag.

Für WordPress-Websites gibt es ein Plugin, das dasselbe tut wie die Snippets oben — ohne HTML anzufassen: vier Blöcke (Kategorie «Gastrobrand»), vier Shortcodes, eine Einstellungsseite für Schlüssel und Sprache. Der Schlüssel wird nur dort gespeichert, nie im Seiteninhalt; nach einer Erneuerung ist er an einer Stelle zu ersetzen.

1. WordPress → Plugins → Installieren → Plugin hochladen, die ZIP-Datei wählen, aktivieren.
2. Einstellungen → Gastrobrand: den öffentlichen Schlüssel eintragen, Sprache wählen.
3. In Gastrobrand die Domain der WordPress-Website unter «Erlaubte Domains» eintragen.
4. Blöcke oder Shortcodes in die Seiten einfügen.

[gastrobrand_tagesmenu]
[gastrobrand_wochenmenu photos="1"]
[gastrobrand_karte heading="none"]
[gastrobrand_karte layout="cards"]
[gastrobrand_reservation label="Jetzt reservieren"]

Attribute: lang="de|en|it", heading="auto|none", photos="1", layout="list|cards" (ab Plugin 1.1.0), label="…". Voraussetzungen: WordPress 6.0+, PHP 7.4+. Lizenz GPLv2 oder später; die readme des Plugins enthält die Offenlegung des externen Dienstes (was wann an Gastrobrand gesendet wird).

• «Menü nicht verfügbar — bitte den Einbindungscode prüfen»: Schlüssel falsch oder erneuert, Einbindung in Gastrobrand nicht aktiviert, oder die Domain der Website fehlt in den erlaubten Domains. Die Browser-Konsole zeigt dann eine 404 (Schlüssel) bzw. 403 (Domain) auf /api/embed/v1/menu.
• Das Reservierungsfenster bleibt leer / «gerade nicht verfügbar»: dieselben drei Ursachen — die Seite darf nur von eingetragenen Domains eingebettet werden. Lokal testen geht mit localhost als eingetragener Domain (auch über http).
• Nichts erscheint, keine Fehlermeldung: Wird das Skript geladen? Quelle: https://gastrobrand.ch/embed/v1/gastrobrand.js. Ein Adblocker oder eine CSP der Website (siehe oben) kann es blockieren.
• Welche Version läuft? In der Konsole: window.gastrobrandEmbed.version.
• Änderung nicht sichtbar: Menüdaten sind bis zu 60 Sekunden gecacht, das Skript bis zu einer Stunde.