Embed-Snippetsiframe-Code für WordPress — ein Snippet pro Produkt

Füge im WordPress-Editor einen Custom-HTML-Block (oder iframe-Block) ein und kopiere das gewünschte Snippet hinein. Empfehlung: pro Produkt eine eigene Seite bzw. einen eigenen Block, damit jedes Produkt einzeln benannt und verlinkt werden kann.

Die Snippets zeigen immer auf die publizierte URL https://oberthurgauer-wetter.lovable.app. Nach Code-Änderungen zuerst publishen, damit sie in WordPress sichtbar werden.

OT

Widget: Warnungen aktuell

Kompaktes Widget mit der Warnkarte und einer Liste der derzeit aktiven Warnungen — ohne Gefahrenfilter und ohne Push-Bereich.

Pfad /embed/widget-warnungen · empfohlene Höhe 560px

<link rel="preconnect" href="https://oberthurgauer-wetter.lovable.app" crossorigin>
<link rel="dns-prefetch" href="https://oberthurgauer-wetter.lovable.app">
<link rel="preconnect" href="https://wmts.geo.admin.ch" crossorigin>
<link rel="dns-prefetch" href="https://wmts.geo.admin.ch">
<iframe
  src="https://oberthurgauer-wetter.lovable.app/embed/widget-warnungen"
  loading="eager"
  fetchpriority="high"
  referrerpolicy="no-referrer-when-downgrade"
  allow="geolocation; fullscreen"
  style="width:100%;height:560px;border:0;display:block"
  title="Wetter-Karte"
></iframe>
OT

Widget: Radar aktuell (Messung)

Zeigt nur die letzte Radarmessung mit Zeitangabe — ohne Filmstrip, Play-Funktion und Prognose.

Pfad /embed/widget-radar · empfohlene Höhe 460px

<link rel="preconnect" href="https://oberthurgauer-wetter.lovable.app" crossorigin>
<link rel="dns-prefetch" href="https://oberthurgauer-wetter.lovable.app">
<link rel="preconnect" href="https://wmts.geo.admin.ch" crossorigin>
<link rel="dns-prefetch" href="https://wmts.geo.admin.ch">
<iframe
  src="https://oberthurgauer-wetter.lovable.app/embed/widget-radar"
  loading="eager"
  fetchpriority="high"
  referrerpolicy="no-referrer-when-downgrade"
  allow="geolocation; fullscreen"
  style="width:100%;height:460px;border:0;display:block"
  title="Wetter-Karte"
></iframe>
OT

Widget: Windprognose aktuell

Zeigt nur die Windprognose für die aktuelle bzw. kommende Stunde — ohne Filmstrip und Zeitsteuerung.

Pfad /embed/widget-wind · empfohlene Höhe 460px

<link rel="preconnect" href="https://oberthurgauer-wetter.lovable.app" crossorigin>
<link rel="dns-prefetch" href="https://oberthurgauer-wetter.lovable.app">
<link rel="preconnect" href="https://wmts.geo.admin.ch" crossorigin>
<link rel="dns-prefetch" href="https://wmts.geo.admin.ch">
<iframe
  src="https://oberthurgauer-wetter.lovable.app/embed/widget-wind"
  loading="eager"
  fetchpriority="high"
  referrerpolicy="no-referrer-when-downgrade"
  allow="geolocation; fullscreen"
  style="width:100%;height:460px;border:0;display:block"
  title="Wetter-Karte"
></iframe>

Wetterwarnungen

Warnkarte für alle Gemeinden im Oberthurgau: Gewitter, Regen, Schnee, Strassenglätte, Wind und Frost in vier Gefahrenstufen.

Pfad /embed/warnungen · empfohlene Höhe 760px

Push-Benachrichtigungen lassen sich im iframe nicht aktivieren — im Widget führt ein Button in einen eigenen Tab, dort funktioniert das Abo.

<link rel="preconnect" href="https://oberthurgauer-wetter.lovable.app" crossorigin>
<link rel="dns-prefetch" href="https://oberthurgauer-wetter.lovable.app">
<link rel="preconnect" href="https://wmts.geo.admin.ch" crossorigin>
<link rel="dns-prefetch" href="https://wmts.geo.admin.ch">
<iframe
  src="https://oberthurgauer-wetter.lovable.app/embed/warnungen"
  loading="eager"
  fetchpriority="high"
  referrerpolicy="no-referrer-when-downgrade"
  allow="geolocation; fullscreen"
  style="width:100%;height:760px;border:0;display:block"
  title="Wetter-Karte"
></iframe>
OT

Lokalprognose Amriswil (Monitor-Version)

Kompakte HTML-Prognose mit Wettersymbolen, ohne JavaScript. Passt neben die TWINT-Spalte; die Höhe 520px ist auf die Unterkante des TWINT-Labels abgestimmt.

Pfad /api/public/embed/region-lokal-static · empfohlene Höhe 520px

<link rel="preconnect" href="https://oberthurgauer-wetter.lovable.app" crossorigin>
<link rel="dns-prefetch" href="https://oberthurgauer-wetter.lovable.app">
<iframe
  src="https://oberthurgauer-wetter.lovable.app/api/public/embed/region-lokal-static"
  loading="eager"
  fetchpriority="high"
  referrerpolicy="no-referrer-when-downgrade"
  scrolling="no"
  style="width:100%;height:520px;border:0;display:block;background:#ffffff;border-radius:8px"
  title="Lokalprognose Amriswil"
></iframe>

Wetterkarte Region

Symbolprognose, Temperatur und Wind für die Region Oberthurgau. Ein Klick auf eine Gemeinde öffnet die Lokalprognose direkt im gleichen Widget — ohne Wetterboard-Rahmen, mit „Zurück zur Karte“-Button.

Pfad /embed/region · empfohlene Höhe 600px

Das Snippet enthält ein kleines Skript für die Höhenanpassung, damit die aufklappende Lokalprognose vollständig sichtbar ist; in WordPress in einen Custom-HTML-Block einfügen.

<link rel="preconnect" href="https://oberthurgauer-wetter.lovable.app" crossorigin>
<link rel="dns-prefetch" href="https://oberthurgauer-wetter.lovable.app">
<link rel="preconnect" href="https://wmts.geo.admin.ch" crossorigin>
<link rel="dns-prefetch" href="https://wmts.geo.admin.ch">
<iframe
  id="otw-region"
  src="https://oberthurgauer-wetter.lovable.app/embed/region"
  loading="eager"
  fetchpriority="high"
  referrerpolicy="no-referrer-when-downgrade"
  scrolling="no"
  allow="geolocation"
  style="width:100%;height:600px;border:0;display:block;background:transparent;border-radius:8px;transition:height .25s ease"
  title="Wetterkarte Region"
></iframe>
<script>
(function () {
  var frame = document.getElementById('otw-region');
  var MIN = 520;
  var current = 600;
  var shrinkTimer = null;
  function apply(h) {
    current = h;
    frame.style.height = h + 'px';
  }
  window.addEventListener('message', function (e) {
    if (e.origin !== 'https://oberthurgauer-wetter.lovable.app') return;
    if (e.source !== frame.contentWindow) return;
    var d = e.data;
    if (!d || d.type !== 'lovable-weather:height') return;
    var h = Math.ceil(Number(d.height));
    if (!isFinite(h) || h < MIN || h > 4000) return;
    if (h > current) {
      if (shrinkTimer) { clearTimeout(shrinkTimer); shrinkTimer = null; }
      apply(h);
      return;
    }
    if (current - h <= 40) return;
    // Verkleinerung erst übernehmen, wenn sie stabil bleibt
    if (shrinkTimer) clearTimeout(shrinkTimer);
    shrinkTimer = setTimeout(function () {
      shrinkTimer = null;
      apply(h);
    }, 500);
  });
})();
</script>
OT

Lokalprognose (wie Original)

Die Lokalprognose genau wie auf der Website — Ortssuche, Tageskacheln mit „7 Tage“-Umschalter, Tagesbalken, Stundenverlauf und Fussleiste — nur ohne Wetterboard-Rahmen. Startet schlank mit dem Suchfeld, nach der Ortswahl klappt die volle Prognose auf.

Pfad /embed/lokalprognose · empfohlene Höhe 230px

Das Snippet enthält ein kleines Skript für die Höhenanpassung; in WordPress in einen Custom-HTML-Block einfügen (nicht in einen reinen iframe-Block).

<link rel="preconnect" href="https://oberthurgauer-wetter.lovable.app" crossorigin>
<link rel="dns-prefetch" href="https://oberthurgauer-wetter.lovable.app">
<iframe
  id="otw-lokalprognose"
  src="https://oberthurgauer-wetter.lovable.app/embed/lokalprognose"
  loading="eager"
  fetchpriority="high"
  referrerpolicy="no-referrer-when-downgrade"
  scrolling="no"
  allow="geolocation"
  style="width:100%;height:230px;border:0;display:block;background:transparent;border-radius:8px;transition:height .25s ease"
  title="Lokalprognose (wie Original)"
></iframe>
<script>
(function () {
  var frame = document.getElementById('otw-lokalprognose');
  var MIN = 120;
  var current = 230;
  var shrinkTimer = null;
  function apply(h) {
    current = h;
    frame.style.height = h + 'px';
  }
  window.addEventListener('message', function (e) {
    if (e.origin !== 'https://oberthurgauer-wetter.lovable.app') return;
    if (e.source !== frame.contentWindow) return;
    var d = e.data;
    if (!d || d.type !== 'lovable-weather:height') return;
    var h = Math.ceil(Number(d.height));
    if (!isFinite(h) || h < MIN || h > 4000) return;
    if (h > current) {
      if (shrinkTimer) { clearTimeout(shrinkTimer); shrinkTimer = null; }
      apply(h);
      return;
    }
    if (current - h <= 40) return;
    // Verkleinerung erst übernehmen, wenn sie stabil bleibt
    if (shrinkTimer) clearTimeout(shrinkTimer);
    shrinkTimer = setTimeout(function () {
      shrinkTimer = null;
      apply(h);
    }, 500);
  });
})();
</script>

Lokalprognose (Karte)

5-Tage-Prognose im 3-Stunden-Takt für jeden Ort der Region.

Pfad /embed/lokal · empfohlene Höhe 600px

<link rel="preconnect" href="https://oberthurgauer-wetter.lovable.app" crossorigin>
<link rel="dns-prefetch" href="https://oberthurgauer-wetter.lovable.app">
<iframe
  src="https://oberthurgauer-wetter.lovable.app/embed/lokal"
  loading="eager"
  fetchpriority="high"
  referrerpolicy="no-referrer-when-downgrade"
  allow="geolocation; fullscreen"
  style="width:100%;height:600px;border:0;display:block"
  title="Wetter-Karte"
></iframe>

Windprognose (wie Original)

Die vollständige Windprognose wie auf der Website — animierte Windströmung, Böen, Zeitsteuerung und Quellenzeile — nur ohne Wetterboard-Rahmen.

Pfad /embed/wind · empfohlene Höhe 600px

<link rel="preconnect" href="https://oberthurgauer-wetter.lovable.app" crossorigin>
<link rel="dns-prefetch" href="https://oberthurgauer-wetter.lovable.app">
<link rel="preconnect" href="https://wmts.geo.admin.ch" crossorigin>
<link rel="dns-prefetch" href="https://wmts.geo.admin.ch">
<iframe
  src="https://oberthurgauer-wetter.lovable.app/embed/wind"
  loading="eager"
  fetchpriority="high"
  referrerpolicy="no-referrer-when-downgrade"
  allow="geolocation; fullscreen"
  style="width:100%;height:600px;border:0;display:block"
  title="Wetter-Karte"
></iframe>

Niederschlagsradar

Radarmessung und Kurzfristprognose des Niederschlags.

Pfad /embed/radar · empfohlene Höhe 600px

<link rel="preconnect" href="https://oberthurgauer-wetter.lovable.app" crossorigin>
<link rel="dns-prefetch" href="https://oberthurgauer-wetter.lovable.app">
<link rel="preconnect" href="https://wmts.geo.admin.ch" crossorigin>
<link rel="dns-prefetch" href="https://wmts.geo.admin.ch">
<iframe
  src="https://oberthurgauer-wetter.lovable.app/embed/radar"
  loading="eager"
  fetchpriority="high"
  referrerpolicy="no-referrer-when-downgrade"
  allow="geolocation; fullscreen"
  style="width:100%;height:600px;border:0;display:block"
  title="Wetter-Karte"
></iframe>

Satellit (mit Bedienleiste)

MTG-Satellitenbilder mit Regionsauswahl und Zeitleiste.

Pfad /embed/satellit · empfohlene Höhe 600px

<link rel="preconnect" href="https://oberthurgauer-wetter.lovable.app" crossorigin>
<link rel="dns-prefetch" href="https://oberthurgauer-wetter.lovable.app">
<link rel="preconnect" href="https://wmts.geo.admin.ch" crossorigin>
<link rel="dns-prefetch" href="https://wmts.geo.admin.ch">
<link rel="preconnect" href="https://view.eumetsat.int" crossorigin>
<link rel="dns-prefetch" href="https://view.eumetsat.int">
<iframe
  src="https://oberthurgauer-wetter.lovable.app/embed/satellit"
  loading="lazy"
  fetchpriority="low"
  referrerpolicy="no-referrer-when-downgrade"
  allow="geolocation; fullscreen"
  style="width:100%;height:600px;border:0;display:block"
  title="Wetter-Karte"
></iframe>
OT

Satellit Loop (Schweiz & Alpen)

Automatischer Loop der MTG-Satellitenbilder — ohne Regions-Umschaltung und ohne Zeitleiste, als reines Widget.

Pfad /embed/satellit-loop · empfohlene Höhe 520px

<link rel="preconnect" href="https://oberthurgauer-wetter.lovable.app" crossorigin>
<link rel="dns-prefetch" href="https://oberthurgauer-wetter.lovable.app">
<link rel="preconnect" href="https://wmts.geo.admin.ch" crossorigin>
<link rel="dns-prefetch" href="https://wmts.geo.admin.ch">
<link rel="preconnect" href="https://view.eumetsat.int" crossorigin>
<link rel="dns-prefetch" href="https://view.eumetsat.int">
<iframe
  src="https://oberthurgauer-wetter.lovable.app/embed/satellit-loop"
  loading="lazy"
  fetchpriority="low"
  referrerpolicy="no-referrer-when-downgrade"
  allow="geolocation; fullscreen"
  style="width:100%;height:520px;border:0;display:block"
  title="Wetter-Karte"
></iframe>
OT

Komplett-Board (alle Karten mit Tabs)

Region, Lokalprognose, Wind und Radar in einer einzigen Einbettung. Besucher wechseln im iframe selbst.

Pfad /embed/all · empfohlene Höhe 760px

<link rel="preconnect" href="https://oberthurgauer-wetter.lovable.app" crossorigin>
<link rel="dns-prefetch" href="https://oberthurgauer-wetter.lovable.app">
<link rel="preconnect" href="https://wmts.geo.admin.ch" crossorigin>
<link rel="dns-prefetch" href="https://wmts.geo.admin.ch">
<iframe
  src="https://oberthurgauer-wetter.lovable.app/embed/all"
  loading="eager"
  fetchpriority="high"
  referrerpolicy="no-referrer-when-downgrade"
  allow="geolocation; fullscreen"
  style="width:100%;height:760px;border:0;display:block"
  title="Wetter-Karte"
></iframe>