Einbettung

Binde die Wirtino-Widgets in deine Website ein. WĂ€hle die passende Variante fĂŒr dein System — von WordPress bis statische HTML-Seite.

1. Einmalig: Basis-Code einfĂŒgen

Wie bei der Standard-Variante muss der Basis-Code einmal pro Seite eingebunden werden.

<link rel="stylesheet" href="https://cdn.wirtino.at/themes/.css">
<script src="https://cdn.wirtino.at/wirtino-widget.iife.js" defer></script>

Was ist anders?

Bei dieser Variante wird der Inhalt zusĂ€tzlich als vorgerendertes HTML direkt von der Wirtino-API geladen. Google sieht den Inhalt sofort — auch ohne JavaScript. Der interaktive Widget ĂŒbernimmt danach im Browser.

Ideal fĂŒr SEO-kritische Seiten (Tageskarte, WochenmenĂŒ), die in der Google-Suche erscheinen sollen.

Webhooks nicht nötig: Der Inhalt wird bei jedem Seitenaufruf live geladen (CDN-Cache max. 5 Min.).

2. SEO-Widgets platzieren

WochenmenĂŒ

Zeigt das aktuelle WochenmenĂŒ (Montag–Sonntag) mit Heute-Markierung.

<!-- SEO: vorgerendertes HTML (wird von Google indexiert).
     Liegt im Slot des Custom-Elements: bleibt sichtbar bis das Widget-JS hydriert
     hat, danach ĂŒbernimmt das interaktive Widget. FĂ€llt das Widget-JS aus
     (no-JS / Crawler / Fehler), bleibt das SSR-HTML stehen. -->
<wirtino-wochenmenu tenant="" api="http://localhost:8000" style="display:block;max-width:800px;--wirtino-max-width:800px">
  <div id="wirtino-wochenmenu-ssr"></div>
</wirtino-wochenmenu>
<script>
  (function () {
    var ctrl = new AbortController();
    var t = setTimeout(function () { ctrl.abort(); }, 3000);
    fetch('http://localhost:8000/api/v1//wochenmenu/current/rendered', { signal: ctrl.signal })
      .then(function (r) { return r.ok ? r.text() : Promise.reject(); })
      .then(function (html) {
        clearTimeout(t);
        var el = document.getElementById('wirtino-wochenmenu-ssr');
        if (el) el.innerHTML = html;
      })
      .catch(function () { /* Silent: Slot bleibt ggf. leer, falls auch das Widget scheitert. */ });
  })();
</script>

Tageskarte

Zeigt die Ă -la-carte-Tageskarte des heutigen Tages.

<!-- SEO: vorgerendertes HTML (wird von Google indexiert).
     Liegt im Slot des Custom-Elements: bleibt sichtbar bis das Widget-JS hydriert
     hat, danach ĂŒbernimmt das interaktive Widget. FĂ€llt das Widget-JS aus
     (no-JS / Crawler / Fehler), bleibt das SSR-HTML stehen. -->
<wirtino-tageskarte tenant="" api="http://localhost:8000" style="display:block;max-width:800px;--wirtino-max-width:800px">
  <div id="wirtino-tageskarte-ssr"></div>
</wirtino-tageskarte>
<script>
  (function () {
    var ctrl = new AbortController();
    var t = setTimeout(function () { ctrl.abort(); }, 3000);
    fetch('http://localhost:8000/api/v1//tageskarte/today/rendered', { signal: ctrl.signal })
      .then(function (r) { return r.ok ? r.text() : Promise.reject(); })
      .then(function (html) {
        clearTimeout(t);
        var el = document.getElementById('wirtino-tageskarte-ssr');
        if (el) el.innerHTML = html;
      })
      .catch(function () { /* Silent: Slot bleibt ggf. leer, falls auch das Widget scheitert. */ });
  })();
</script>

Speisekarte

Zeigt die als Default markierte Speisekarte. FĂŒr eine bestimmte Karte (z.B. Saisonkarte) den Embed-Code direkt im Modul „Speisekarten" generieren.

<!-- SEO: vorgerendertes HTML (wird von Google indexiert).
     Liegt im Slot des Custom-Elements: bleibt sichtbar bis das Widget-JS hydriert
     hat, danach ĂŒbernimmt das interaktive Widget. FĂ€llt das Widget-JS aus
     (no-JS / Crawler / Fehler), bleibt das SSR-HTML stehen. -->
<wirtino-speisekarte tenant="" api="http://localhost:8000" style="display:block;max-width:800px;--wirtino-max-width:800px">
  <div id="wirtino-speisekarte-ssr"></div>
</wirtino-speisekarte>
<script>
  (function () {
    var ctrl = new AbortController();
    var t = setTimeout(function () { ctrl.abort(); }, 3000);
    fetch('http://localhost:8000/api/v1//speisekarte/rendered', { signal: ctrl.signal })
      .then(function (r) { return r.ok ? r.text() : Promise.reject(); })
      .then(function (html) {
        clearTimeout(t);
        var el = document.getElementById('wirtino-speisekarte-ssr');
        if (el) el.innerHTML = html;
      })
      .catch(function () { /* Silent: Slot bleibt ggf. leer, falls auch das Widget scheitert. */ });
  })();
</script>

SpezialitÀtentag

Zeigt den nÀchsten oder heutigen SpezialitÀtentag.

<!-- SEO: vorgerendertes HTML (wird von Google indexiert).
     Liegt im Slot des Custom-Elements: bleibt sichtbar bis das Widget-JS hydriert
     hat, danach ĂŒbernimmt das interaktive Widget. FĂ€llt das Widget-JS aus
     (no-JS / Crawler / Fehler), bleibt das SSR-HTML stehen. -->
<wirtino-spezialitaetentag tenant="" api="http://localhost:8000" style="display:block;max-width:800px;--wirtino-max-width:800px">
  <div id="wirtino-spezialitaetentag-ssr"></div>
</wirtino-spezialitaetentag>
<script>
  (function () {
    var ctrl = new AbortController();
    var t = setTimeout(function () { ctrl.abort(); }, 3000);
    fetch('http://localhost:8000/api/v1//spezialitaetentag/rendered', { signal: ctrl.signal })
      .then(function (r) { return r.ok ? r.text() : Promise.reject(); })
      .then(function (html) {
        clearTimeout(t);
        var el = document.getElementById('wirtino-spezialitaetentag-ssr');
        if (el) el.innerHTML = html;
      })
      .catch(function () { /* Silent: Slot bleibt ggf. leer, falls auch das Widget scheitert. */ });
  })();
</script>

Betriebsurlaub

Hinweis auf aktuellen oder bevorstehenden Betriebsurlaub.

<!-- SEO: vorgerendertes HTML (wird von Google indexiert).
     Liegt im Slot des Custom-Elements: bleibt sichtbar bis das Widget-JS hydriert
     hat, danach ĂŒbernimmt das interaktive Widget. FĂ€llt das Widget-JS aus
     (no-JS / Crawler / Fehler), bleibt das SSR-HTML stehen. -->
<wirtino-betriebsurlaub tenant="" api="http://localhost:8000" style="display:block;max-width:800px;--wirtino-max-width:800px">
  <div id="wirtino-betriebsurlaub-ssr"></div>
</wirtino-betriebsurlaub>
<script>
  (function () {
    var ctrl = new AbortController();
    var t = setTimeout(function () { ctrl.abort(); }, 3000);
    fetch('http://localhost:8000/api/v1//betriebsurlaub/active/rendered', { signal: ctrl.signal })
      .then(function (r) { return r.ok ? r.text() : Promise.reject(); })
      .then(function (html) {
        clearTimeout(t);
        var el = document.getElementById('wirtino-betriebsurlaub-ssr');
        if (el) el.innerHTML = html;
      })
      .catch(function () { /* Silent: Slot bleibt ggf. leer, falls auch das Widget scheitert. */ });
  })();
</script>

Events

Zeigt die nÀchsten Veranstaltungen als Liste.

<!-- SEO: vorgerendertes HTML (wird von Google indexiert).
     Liegt im Slot des Custom-Elements: bleibt sichtbar bis das Widget-JS hydriert
     hat, danach ĂŒbernimmt das interaktive Widget. FĂ€llt das Widget-JS aus
     (no-JS / Crawler / Fehler), bleibt das SSR-HTML stehen. -->
<wirtino-events tenant="" api="http://localhost:8000" style="display:block;max-width:800px;--wirtino-max-width:800px">
  <div id="wirtino-events-ssr"></div>
</wirtino-events>
<script>
  (function () {
    var ctrl = new AbortController();
    var t = setTimeout(function () { ctrl.abort(); }, 3000);
    fetch('http://localhost:8000/api/v1//events/upcoming/rendered', { signal: ctrl.signal })
      .then(function (r) { return r.ok ? r.text() : Promise.reject(); })
      .then(function (html) {
        clearTimeout(t);
        var el = document.getElementById('wirtino-events-ssr');
        if (el) el.innerHTML = html;
      })
      .catch(function () { /* Silent: Slot bleibt ggf. leer, falls auch das Widget scheitert. */ });
  })();
</script>
Fragen? Hilfe unter
0043 664 12 95 380