> For the complete documentation index, see [llms.txt](https://docs.kiloiot.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.kiloiot.io/kilo-docs-de/kilo-iot-server/dashboards/adding-widgets/iframe-widget.md).

# iFrame-Widget

Betten Sie eine Webseite — einen BI-Bericht, eine Wetterkarte oder Live-Verkehr — mit dem iFrame-Widget in ein Kilo-IoT-Dashboard ein.

<figure><img src="https://895787959-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtNQh1wBSHSaknslMdOXm%2Fuploads%2Fgit-blob-4acc1e49ab710c17f37d483b97557a80989f1bc4%2Fiframe-widget.jpg?alt=media" alt="The iFrame Widget configurator — an embed URL in the Data source field, the supported-services list below, and a live preview"><figcaption></figcaption></figure>

Nicht jede Ansicht, die ein Betriebsteam braucht, stammt von einem Sensor. Eine Schichtleitung, die eine Anlagenfläche überwacht, braucht vielleicht auch den konzernweiten Energiebericht, das regionale Wetterradar, den Live-Verkehr auf den Zufahrtsstraßen zum Standort oder die Statusseite eines Dienstes, von dem der Standort abhängt. Das iFrame Widget bringt diese externen Ansichten auf dasselbe Dashboard wie Ihre Gerätedaten, sodass ein einziger Bildschirm die ganze Betriebsgeschichte erzählt, statt sie über Browser-Tabs zu verteilen.

Ein iFrame Widget bettet eine Live-Webseite eines externen Dienstes in eine Dashboard-Kachel ein. Die eingebettete Seite funktioniert genau so wie auf ihrer eigenen Website — sie aktualisiert sich, animiert und wird in Echtzeit aktualisiert — aber sie steht nun neben Ihren Last Data-Panels, Diagrammen und Gebäudeansichten. Sie verweisen das Widget auf eine **Einbettungs-URL** von einem unterstützten Dienst, geben ihr einen Namen, und sie wird an Ort und Stelle gerendert.

Da das Widget eine Drittanbieter-Seite direkt lädt, bettet Kilo nur Quellen aus einer geprüften Liste von Diensten ein, die sichere, einbettbare Ansichten bereitstellen. So bleibt ein gemeinsames Betriebsdashboard vertrauenswürdig: Eine eingebettete Kachel kann immer nur eine Seite von einem Dienst anzeigen, den die Plattform geprüft hat, niemals eine beliebige Website, die versehentlich eingefügt wurde.

## iFrame Widget hinzufügen

Dieses Beispiel bettet einen konzernweiten Power BI-Betriebsbericht neben den Live-Gerätedaten auf einem Gebäude-Dashboard ein. Die Schritte sind für jede unterstützte Quelle identisch — nur die Einbettungs-URL ändert sich.

1. Öffnen Sie das Dashboard im Bearbeitungsmodus und klicken Sie auf die **Plus-Schaltfläche** in der Kopfzeile, dann wählen Sie **iFrame** im Widget-Auswahlfeld. Die Kachel ist beschriftet *iFrame* mit dem Hinweis "Verbinden Sie einen Wetterdienst oder etwas anderes."
2. Das Einstellungsfeld öffnet sich auf dem **Datenquelle** Tab — mit dem Titel "iFrame-Konfiguration" — mit einer Live-Vorschau rechts. Suchen Sie das **Datenquelle** Feld.
3. Rufen Sie die **Einbettungs-URL** aus dem Quelldienst ab — nicht die Adresse in Ihrer Browserleiste. Bei den meisten Diensten finden Sie sie unter **Teilen → Einbetten** oder als ein **Einbettungscode abrufen** Option. Manche Dienste geben Ihnen einen fertigen Link; andere ein vollständiges HTML-Snippet wie `<iframe width="650" height="450" src="https://…/embed…" frameborder="0"></iframe>`. **Fügen Sie nur die Adresse innerhalb von `src="…"`** ein — den Teil, der mit `https://`beginnt. Lassen Sie den umgebenden `<iframe …>` Wrapper weg; das Feld übernimmt die URL allein, und ein eingefügtes Tag wird abgelehnt.
4. Fügen Sie die Einbettungs-URL in das **Datenquelle** Feld ein. Darunter, unter **Die folgenden Dienste sind verfügbar**, listet Kilo die unterstützten Quellen nach Kategorie auf — verwenden Sie das, um zu bestätigen, dass Ihre Quelle abgedeckt ist. Die URL muss mit **https\://**&#x62;eginnen. Die Vorschau rechts rendert die Seite, sobald die URL gültig und unterstützt ist; eine nicht unterstützte oder fehlerhafte URL zeigt die Meldung *"Geben Sie eine gültige https\://-Einbettungs-URL ein"* anstelle eines Rahmens.
5. Klicken Sie auf **Weiter** um zum **Darstellung** des Geräts ausgeführt worden.
6. Geben Sie einen **Widget-Name** (erforderlich) — zum Beispiel "Standort-Energiebericht". Fügen Sie eine optionale **Beschreibung** hinzu, um zu vermerken, was die Einbettung zeigt oder wem die Quelle gehört.
7. Klicken Sie auf **Speichern** im Bereich, dann **Speichern** in der Dashboard-Kopfzeile. Der Bericht wird nun live in seiner Kachel neben Ihren Geräte-Widgets gerendert.

> **Bleibt die Vorschau leer?** Fast immer ist der eingefügte Wert keine reine Einbettungs-URL. Prüfen Sie, ob Sie nur die `https://` Adresse aus `src="…"` (nicht das gesamte `<iframe …>` Tag) kopiert haben, dass sie mit `https://`beginnt, und dass der Dienst in der unterstützten Liste unter dem Feld aufgeführt ist. Eine normale Seiten-URL, ein `http://` Link oder ein Dienst, der nicht auf der Liste steht, wird nicht gerendert.

## Was Sie einbetten können

Die unterstützten Dienste sind im Auswahlfeld nach Kategorie gruppiert, sodass Sie den benötigten schnell finden können. Beispiele für Quellen in jeder Kategorie:

* **Dashboards & BI** — Power BI, Looker Studio, Tableau, Grafana. Bringen Sie einen bestehenden Unternehmensbericht oder ein Betriebsdashboard auf denselben Bildschirm wie die zugrunde liegenden Geräte.
* **Karten & Standort** — Google Maps, OpenStreetMap, Mapbox. Zeigen Sie einen Standortplan, einen Servicebereich oder eine Route.
* **Wetter & Luftqualität** — Windy, Meteoblue, Ventusky, IQAir. Überlagern Sie Bedingungen, die betriebliche Entscheidungen beeinflussen — Wind für einen Turbinenstandort, Luftqualität für ein Lüftungssystem.
* **Video- & Kamerafeeds** — YouTube, Vimeo, Twitch. Betten Sie einen veröffentlichten Stream oder einen kurzen Informationsclip ein.
* **Transport & Flüge** — Waze, Flightradar24, FlightAware. Beobachten Sie den Live-Straßenverkehr rund um einen Standort mit einer Waze-Karte oder verfolgen Sie ein ankommendes Luftfrachtgut.
* **Versand- & Paketverfolgung** — 17TRACK, AfterShip, TrackingMore. Verfolgen Sie eingehende oder ausgehende Sendungen.
* **Finanzen & Märkte** — TradingView, Investing.com, Trading Economics. Beobachten Sie Rohstoffpreise oder Indizes, die die Beschaffung beeinflussen.
* **Status & Doku** — Statuspage, Instatus, Google Docs. Heften Sie die Statusseite einer Abhängigkeit oder ein gemeinsames Runbook an.
* **Kalender & Formulare** — Google Calendar, Google Forms, Microsoft Forms, Calendly. Zeigen Sie einen Wartungsplan oder ein Eingabeformular an.

Die im Widget angezeigte Liste der unterstützten Dienste ist immer die aktuelle. Wenn der benötigte Dienst nicht dabei ist, verwenden Sie den **Bitte senden Sie eine Anfrage, um die gewünschte Ressource hinzuzufügen** Link unter dem Feld Datenquelle, und das Team kann ihn für die zulässige Liste prüfen.

## iFrame Widget vs. Karten-Widget

Diese beiden lassen sich leicht verwechseln, daher sollte der Unterschied klar sein:

* Das **iFrame-Widget** bettet eine externe *Webseite* ein — einschließlich einer Karte eines Drittanbieters wie einer Waze-Verkehrsansicht oder einer eingebetteten Google-Maps-Karte. Es zeigt, was diese Website zeigt; es weiß nichts über Ihre Geräte.
* Das [**Karten-Widget**](/kilo-docs-de/kilo-iot-server/dashboards/adding-widgets/map-widget.md) zeigt *eines Ihrer* GPS-meldenden Geräte auf einer interaktiven Karte an und folgt seiner Live-Position. Greifen Sie darauf zurück, wenn Sie ein Fahrzeug, ein Asset oder ein beliebiges auf der Plattform registriertes Tracker-Gerät verfolgen möchten — nicht auf das iFrame Widget.

## Beispielanwendungen

**Gebäude-Dashboard — Energiebericht im Kontext** Ein Dashboard für das Gebäudemanagement zeigt bereits HVAC-Sollwerte, Belegung und Raumtemperaturen von den Geräten des Standorts. Fügen Sie ein iFrame Widget hinzu, das auf den Energiebericht des Unternehmens in Power BI verweist, und die Schichtleitung sieht Verbrauchstrends neben den Anlagen, die sie erzeugen — ohne die Werkzeuge zu wechseln, um die Frage zu beantworten: "Ist die Last dort, wo sie sein sollte?"

**Windpark-Betrieb — Wetter neben den Turbinen** Ein Betriebsbildschirm verfolgt die Vibration und die Leistung pro Turbine. Eine eingebettete Windy-Karte des Windfelds am Standort ermöglicht es den Leitern, einen Leistungsabfall mit einer Flaute zu korrelieren oder eine Reduzierung bei starkem Wind vorherzusehen, all das auf dem Dashboard, das das Team ohnehin beobachtet.

**Vertriebszentrum — Verkehr auf der Zufahrtsstrecke** Ein Logistik-Dashboard überwacht Sensoren an den Laderampen und Temperaturen im Kühlhaus. Eine eingebettete Live-Verkehrskarte von Waze für die Routen zum Standort ermöglicht es dem Hofteam, sich aufbauende Staus zu erkennen und Ankünfte neu zu takten, bevor sich die Lkw am Tor stauen.

## Was das Widget anzeigt

<figure><img src="https://895787959-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtNQh1wBSHSaknslMdOXm%2Fuploads%2Fgit-blob-27037678133bcff59a9bcb0b8289267783755ecd%2Fiframe-widget-dashboard.jpg?alt=media" alt="A dashboard with an embedded Windy weather map in an iFrame Widget, beside a 3D building twin and a tank-level gauge"><figcaption></figcaption></figure>

Auf dem Dashboard rendert das iFrame Widget die eingebettete Seite live in seiner Kachel, direkt neben Ihren Geräte-Widgets — oben sitzt eine Windy-Wetterkarte neben einem Gebäudezwilling und einem Tankfüllstandsanzeiger. Die Seite verhält sich so, wie sie es auf ihrer eigenen Website tut: Sie aktualisiert sich nach ihrem eigenen Zeitplan, daher hat das Widget selbst keine separate Aktualisierungseinstellung. Ändern Sie im Bearbeitungsmodus Größe und Position der Kachel wie bei jedem anderen Widget, damit ein umfangreicher Bericht den Platz bekommt, den er braucht.

Das iFrame Widget ist eine Anzeigeoberfläche, keine Datenquelle: Es liest Ihre Geräte nicht aus, speist die Rules Engine nicht und löst keine Alarme aus. Verwenden Sie es, um externen Kontext auf das Dashboard zu bringen, und behalten Sie Gerätemetriken in den dafür vorgesehenen Widgets — Last Data, Chart, Image und dem Digital Building Twin.

## Siehe auch

* [Widgets hinzufügen](/kilo-docs-de/kilo-iot-server/dashboards/adding-widgets.md) — Bearbeitungsmodus und das Widget-Auswahlmenü
* [Karten-Widget](/kilo-docs-de/kilo-iot-server/dashboards/adding-widgets/map-widget.md) — Verfolgt die Live-Position eines GPS-Geräts (anders als das Einbetten einer Webkarte)
* [Digital Building Twin](/kilo-docs-de/kilo-iot-server/dashboards/adding-widgets/digital-building-twin.md) — Ein Live-3D-Modell einer Anlage


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.kiloiot.io/kilo-docs-de/kilo-iot-server/dashboards/adding-widgets/iframe-widget.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.