Integrieren Sie eine Live-Wetterkarte mit nur einer Codezeile in jede beliebige Website – ohne ein Wetter-Backend entwickeln zu müssen und ohne API-Schlüssel im Browser preiszugeben. Perfekt für Immobilienangebote, Reise- und Eventseiten, Veranstaltungsorte und Dashboards.
Das Problem
Wenn Sie eine Website betreiben, bedeutet die Anzeige von lokalem Live-Wetter meistens: Registrierung für eine Wetter-API, Schreiben von Server-Code für die Anbindung, Caching der Antworten, um das Limit nicht zu sprengen, und das Fernhalten von Schlüsseln aus dem clientseitigen Code. Das ist ein echtes Projekt. Dabei wollten Sie doch nur eine einfache Karte.
So funktioniert es
Binden Sie einfach ein Custom Element ein – fertig:
<script
src="https://app.weatherintouch.com/embed.js"
data-api-base="https://api.weatherintouch.com"
></script>
<wx-weather-card
lat="50.08"
lon="14.44"
lang="en"
theme="auto"
></wx-weather-card>
Die Karte wird in einem Shadow DOM gerendert, sodass ihre Styles niemals mit dem CSS Ihrer Website kollidieren. Sie zeigt die aktuelle Wetterlage und optional eine kurze Vorhersage. Sie bevorzugen ein iframe? Es gibt eine Variante, die ihre Höhe über postMessage automatisch anpasst. Die gesamte Konfiguration erfolgt über Attribute – Koordinaten, Sprache, Theme und Ihr API-Schlüssel.
Was es besonders macht
- Geteilter Cache. Ihr Widget liest aus demselben Vorhersage-Cache wie die Haupt-App. Eine Karte auf Ihrer Website und der Haupt-App-Tab eines Besuchers mit denselben Koordinaten verursachen nur einen Upstream-Aufruf – nicht zwei.
- Kein Leak von API-Schlüsseln. Der Backend-Batch-Endpunkt liefert die Daten; Ihr API-Schlüssel ist im Scope begrenzt und Domain-restringiert – es liegt niemals ein ungeschützter Provider-Schlüssel im Quelltext der Seite.
- Keine CSS-Konflikte. Durch die Shadow DOM-Isolierung sieht die Karte auf jeder Website exakt gleich aus.
- Individuelle Domain-Allowlist. Sie haben die volle Kontrolle darüber, auf welchen Domains Ihre Karte angezeigt werden darf.
Preise
Das einbettbare Widget ist ein Pro-Feature – es beinhaltet einen eigenen API-Schlüssel und eine Domain-Allowlist, damit Sie es sicher auf all Ihren Websites einsetzen können.
FAQ
Wie binde ich es ein? Fügen Sie das Script-Tag und ein <wx-weather-card>-Element mit Ihren Koordinaten hinzu – oder nutzen Sie die iframe-Variante.
Custom Element oder iframe? Das Custom Element lässt sich nahtloser integrieren (Theming, Layout); das iframe bietet die stärkste Isolierung und ist die einfachste Drop-in-Lösung.
Kann ich das Design anpassen? Ja – über theme="auto|light|dark". Zudem übernimmt die Karte, wo möglich, Ihre Akzentfarbe.
Wie sehen die Rate Limits aus? Der Batch-Endpunkt ist gedrosselt und arbeitet nach dem Cache-First-Prinzip; bei normaler Einbettung bleiben Sie problemlos innerhalb der Limits, da identische Koordinaten dedupliziert werden.
Muss ich Weather InTouch als Quelle angeben? Ja – die Karte enthält einen kleinen Attribution-Link, entsprechend den Nutzungsbedingungen unserer Datenanbieter.