Embed API: Einbinden von Menüplänen

Diese Schnittstelle ermöglicht das Einbinden von mittag.at / mittag.com Menüplänen auf externen Webseiten.

Beispiel

HTML-Code

Um ein Widget einzubinden, einfach einen HTML-Link zu einer Restaurant-Seite mit einem class="mittagio" Attribut erstellen und unser JavaScript SDK einbinden. Bei mehreren Embeds auf einer Seite reicht ein script tag.

Somit einfach an der gewünschten Stelle folgenden HTML Code einfügen:

<a href="https://www.mittag.at/r/test" class="mittagio">Mittagsmenü - Testrestaurant</a>
<script async defer src="https://www.mittag.io/e/js"></script>

Dabei test und Testrestaurant entsprechend mit der Restaurant-URL und dem Restaurant-Namen ersetzen.

Widget Optionen

Linksbündig

Standardmäßig wird das Widget im Container-Element zentriert angezeigt. Um das Widget linksbündig anzuzeigen, einfach beim Link zum Restaurant das Attribut data-align="left" setzen.

Beispiel:

<a href="https://www.mittag.at/r/test" data-align="left" class="mittagio">Mittagsmenü - Testrestaurant</a>
<script async defer src="https://www.mittag.io/e/js"></script>

Minimalistisches Design

Um das Widget minimalistischer anzuzeigen, einfach beim Link zum Restaurant das Attribut data-minimal setzen.

Beispiel:

<a href="https://www.mittag.at/r/test" data-minimal class="mittagio">Mittagsmenü - Testrestaurant</a>
        <script async defer src="https://www.mittag.io/e/js"></script>

Wochenansicht

Standardmäßig wird ein Widget mit dem Mittagsmenü des aktuellen Tages angezeigt. Um die Mittagsmenüs der ganzen Woche einzubinden, einfach dem Link das Attribut data-week hinzufügen.

Beispiel:

<a href="https://www.mittag.at/r/test" data-week class="mittagio">Speiseplan - Testrestaurant</a>
<script async defer src="https://www.mittag.io/e/js"></script>

So sieht's aus:

Speiseplan - Salz und Pfeffer

Newsletter-Anmeldung

Um ein Anmeldeformular für den Menü-Newsletter einzubinden, einfach dem Link das Attribut data-newsletter hinzufügen.

Beispiel:

<a href="https://www.mittag.at/r/test" data-newsletter class="mittagio">Newsletter-Anmeldung - Testrestaurant</a>
<script async defer src="https://www.mittag.io/e/js"></script>

So sieht's aus:

Newsletter-Anmeldung - Seeber Imbiss

CSS anpassen (PREMIUM Option)

Mit einem PREMIUM-Eintrag kann das CSS der Einbindung angepasst werden. Dazu einfach beim Link zum Restaurant das Attribut data-style="" mit dem jeweiligen CSS-Code als Attributs-Inhalt setzen. Wichtig ist hier, dass der Attributsinhalt keine Zeilenumbrüche enthält und die verwendeten Anführungszeichen im CSS vermieden werden. Stattdessen können zB einfache Hochkomma verwendet werden.

Beispiel:

<a href="https://www.mittag.at/r/test" class="mittagio"
   data-style="#restaurant a { color:#f00; }">Mittagsmenü - Testrestaurant</a>
        <script async defer src="https://www.mittag.io/e/js"></script>