Speisekarte auf der Webseite einbinden

Um die Speisekarte als Widget auf deiner Webseite einzubinden, gehe im Adminbereich zu „Speisekarten Einstellungen“ und scrolle bis ganz nach unten.

Dort kannst du ein neues Widget erstellen. Gib dafür die Domain der Webseite ein, auf der das Widget eingebunden werden soll.

Klicke anschließend auf das Schlüsselsymbol, um das Widget zu erzeugen.

Nach der Erstellung findest du den Einbindungscode in der rechten Spalte. Diesen kannst du kopieren und in deine Webseite einfügen.

Beispiel Widget Code #

        "<div data-menu-widget=\"1\" data-widget-id=\"INDIVIDUELLE-ID\" data-token=\"INDIVIDUELLER TOKEN\" data-lang=\"DE\" data-show-food=\"true\" data-show-beverages=\"true\"><\/div>\n<script src=\"https:\/\/admin.gastroinfoscreen.de\/appsrc\/api\/menu\/\" defer><\/script>\n<link rel=\"stylesheet\" href=\"https:\/\/admin.gastroinfoscreen.de\/appsrc\/api\/menu\/style.css\">"    

Anpassbare Parameter des Widgets #

Das Widget kann über die Attribute data-show-food, data-show-beverage und data-lang individuell konfiguriert werden.

data-lang
Mit diesem Parameter legst du die Sprache des Widgets fest. Wichtig: Es können nur Sprachen verwendet werden, die im System bereits vorhanden sind.
Wird eine nicht verfügbare Sprache angegeben, wird das Widget nicht angezeigt.

data-show-food / data-show-beverage
Mit diesen Parametern steuerst du, ob Speisen oder Getränke angezeigt werden.
Setze den jeweiligen Wert auf true (aktiv) oder false (inaktiv). Wenn nur einer der beiden Bereiche aktiv ist, wird die Navigation zum Wechseln automatisch ausgeblendet.

Speisekarten-Widget per CSS anpassen #

Das eingebundene Speisekarten-Widget kann über eigene CSS-Regeln auf der Kundenwebseite gestaltet werden.
Die eigenen CSS-Einstellungen nach dem Widget einfügen, damit diese vorher geladenene CSS-Einstellungen überschrieben werdem.
Dafür können folgende Klassen verwendet werden:

Gesamtes Widget

• .menu-widget
  Hauptcontainer des Widgets

Tabs für Speisen / Getränke

• .menu-widget__tabs
  Bereich mit den Umschaltflächen
• .menu-widget__tab
  einzelner Tab-Button

Inhaltsbereiche

• .menu-widget__panel
  Bereich für Speisen oder Getränke

Kategorien

• .menu-widget__cat
  einzelner Kategorieblock
• .menu-widget__cattitle
  Überschrift der Kategorie
• .menu-widget__catdesc
  Beschreibung der Kategorie
• .menu-widget__items
  Container für die Artikel einer Kategorie

Artikel

• .menu-widget__item
  einzelner Artikel
• .menu-widget__name
  Name des Artikels
• .menu-widget__row
  Zeile mit Beschreibung und Preis
• .menu-widget__desc
  Beschreibungstext
• .menu-widget__amount
  Mengenangabe
• .menu-widget__price
  Preis
• .menu-widget__price-stack
  Bereich für mehrere Preiszeilen

Statusmeldungen

• .menu-widget__loading
  Ladeanzeige
• .menu-widget__error
  Fehlermeldung
• .menu-widget__empty
  Leeran­zeige, wenn keine Einträge vorhanden sind

Beispiel CSS #

        ".menu-widget {\n  max-width: 1100px;\n  margin: 0 auto;\n  font-family: sans-serif;\n  color: #222;\n}\n\n.menu-widget__tabs {\n  display: flex;\n  gap: 12px;\n  margin-bottom: 24px;\n}\n\n.menu-widget__tab {\n  background: #f3f3f3;\n  color: #222;\n  border: 0;\n  padding: 12px 18px;\n  border-radius: 999px;\n  cursor: pointer;\n}\n\n.menu-widget__tab[aria-selected=\"true\"] {\n  background: #111;\n  color: #fff;\n}\n\n.menu-widget__cat {\n  margin-bottom: 40px;\n  padding: 24px;\n  background: #fff;\n  border: 1px solid #e5e5e5;\n  border-radius: 18px;\n}\n\n.menu-widget__cattitle {\n  margin: 0 0 8px;\n  font-size: 28px;\n}\n\n.menu-widget__catdesc {\n  margin: 0 0 20px;\n  color: #666;\n}\n\n.menu-widget__items {\n  display: grid;\n  gap: 18px;\n}\n\n.menu-widget__item {\n  padding-bottom: 18px;\n  border-bottom: 1px solid #eee;\n}\n\n.menu-widget__name {\n  margin: 0 0 6px;\n  font-size: 20px;\n}\n\n.menu-widget__row {\n  display: flex;\n  justify-content: space-between;\n  gap: 20px;\n}\n\n.menu-widget__desc {\n  color: #555;\n}\n\n.menu-widget__amount {\n  display: inline-block;\n  margin-left: 8px;\n  color: #888;\n}\n\n.menu-widget__price {\n  white-space: nowrap;\n  font-weight: 700;\n}\n"