> 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-fr/kilo-iot-server/dashboards/adding-widgets/iframe-widget.md).

# Widget iFrame

Intégrez une page web — un rapport BI, une carte météo ou le trafic en direct — sur un tableau de bord Kilo IoT avec le widget iFrame.

<figure><img src="https://3675309505-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>

Tous les points de vue dont une équipe d’exploitation a besoin ne viennent pas d’un capteur. Un superviseur de quart qui surveille un atelier peut aussi avoir besoin du rapport énergétique de l’entreprise, du radar météo régional, du trafic en direct sur les routes menant au site, ou de la page d’état d’un service dont le site dépend. Le widget iFrame apporte ces vues externes sur le même tableau de bord que les données de vos appareils, afin qu’un seul écran raconte toute l’histoire opérationnelle au lieu de la disperser dans plusieurs onglets du navigateur.

Un widget iFrame intègre une page Web externe en direct dans une tuile du tableau de bord. La page intégrée continue de fonctionner exactement comme sur son propre site — elle se met à jour, s’anime et s’actualise en temps réel — mais elle se trouve désormais à côté de vos panneaux Last Data, de vos graphiques et de vos vues de bâtiment. Vous dirigez le widget vers une **URL d’intégration** d’un service pris en charge, donnez-lui un nom, et il s’affiche à cet emplacement.

Comme le widget charge directement une page tierce, Kilo n’intègre que des sources issues d’une liste vérifiée de services qui publient des vues sûres et intégrables. Cela permet de conserver la fiabilité d’un tableau de bord d’exploitation partagé : une tuile intégrée ne peut afficher qu’une page provenant d’un service validé par la plateforme, jamais un site arbitraire collé par erreur.

## Ajouter un widget iFrame

Cette procédure intègre un rapport d’exploitation Power BI de l’entreprise à côté des données en direct des appareils sur un tableau de bord des installations. Les étapes sont identiques pour toute source prise en charge — seule l’URL d’intégration change.

1. Ouvrez le tableau de bord en mode édition et cliquez sur le **bouton plus** dans l’en-tête, puis choisissez **iFrame** dans le sélecteur de widgets. Sa tuile est libellée *iFrame* avec la note « Connectez un service météo ou autre chose. »
2. Le panneau de paramètres s’ouvre sur le **Source de données** onglet — intitulé « configuration iFrame » — avec un aperçu en direct à droite. Repérez le **Source de données** champ.
3. Obtenez l’ **URL d’intégration** depuis le service source — pas l’adresse dans la barre de votre navigateur. Sur la plupart des services, cela se trouve sous l’option **Partager → Intégrer** ou une **Obtenir le code d’intégration** . Certains services fournissent un lien prêt à l’emploi ; d’autres fournissent un extrait HTML complet tel que `<iframe width="650" height="450" src="https://…/embed…" frameborder="0"></iframe>`. **Collez uniquement l’adresse à l’intérieur de `src="…"`** — la partie qui commence par `https://`. Omettez le `<iframe …>` conteneur ; le champ accepte l’URL seule, et une balise collée est rejetée.
4. Collez l’URL d’intégration dans le **Source de données** champ. En dessous, sous **Les services suivants sont disponibles**, Kilo répertorie les sources qu’il prend en charge, regroupées par catégorie — servez-vous-en pour vérifier que votre source est couverte. L’URL doit commencer par **https\://**. L’aperçu à droite affiche la page dès que l’URL est valide et prise en charge ; une URL non prise en charge ou mal formée affiche le message *"Saisissez une URL d’intégration https\:// valide"* à la place d’une trame.
5. Cliquez sur **Suivant** pour passer au **Apparence** de l'appareil.
6. — par exemple « Niveau du puisard » — et une **Nom du widget** (obligatoire) — par exemple « Rapport énergétique du site ». Ajoutez un **Description** facultatif pour indiquer ce que l’intégration affiche ou à qui appartient la source.
7. Cliquez sur **Enregistrer** dans le panneau, puis **Enregistrer** dans l’en-tête du tableau de bord. Le rapport s’affiche désormais en direct dans sa tuile, à côté de vos widgets d’appareils.

> **L’aperçu reste vide ?** Dans la grande majorité des cas, la valeur collée n’est pas une simple URL d’intégration. Vérifiez que vous avez copié uniquement l’ `https://` adresse à l’intérieur de `src="…"` (et non tout le `<iframe …>` code), qu’elle commence par `https://`, et que le service figure dans la liste des services pris en charge sous le champ. Une URL de page normale, un `http://` lien, ou un service qui ne figure pas dans la liste ne s’affichera pas.

## Ce que vous pouvez intégrer

Les services pris en charge sont regroupés par catégorie dans le sélecteur, afin que vous puissiez repérer celui dont vous avez besoin. Sources représentatives dans chaque catégorie :

* **Tableaux de bord et BI** — Power BI, Looker Studio, Tableau, Grafana. Affichez un rapport d’entreprise existant ou un tableau de bord opérationnel sur le même écran que les appareils sous-jacents.
* **Cartes et localisation** — Google Maps, OpenStreetMap, Mapbox. Affichez un plan de site, une zone de service ou un itinéraire.
* **Météo et qualité de l’air** — Windy, Meteoblue, Ventusky, IQAir. Superposez les conditions qui influencent les décisions opérationnelles — le vent pour un site d’éoliennes, la qualité de l’air pour un système de ventilation.
* **Vidéo et flux de caméras** — YouTube, Vimeo, Twitch. Intégrez un flux publié ou un clip de briefing.
* **Transport et vols** — Waze, Flightradar24, FlightAware. Surveillez le trafic routier en direct autour d’un site avec une carte Waze, ou suivez le fret aérien entrant.
* **Expédition et suivi de colis** — 17TRACK, AfterShip, TrackingMore. Suivez les expéditions entrantes ou sortantes.
* **Finance et marchés** — TradingView, Investing.com, Trading Economics. Surveillez les prix des matières premières ou les indices qui influencent les achats.
* **Statut et documents** — Statuspage, Instatus, Google Docs. Épinglez la page d’état d’une dépendance, ou un runbook partagé.
* **Calendriers et formulaires** — Google Calendar, Google Forms, Microsoft Forms, Calendly. Affichez un planning de maintenance ou un formulaire de saisie.

La liste des services pris en charge affichée dans le widget est toujours la version actuelle. Si le service dont vous avez besoin n’y figure pas, utilisez le **veuillez soumettre une demande pour ajouter la ressource souhaitée** lien sous le champ Source de données, et l’équipe pourra l’examiner pour l’ajouter à la liste autorisée.

## Widget iFrame vs widget Carte

Ces deux-là sont faciles à confondre, alors gardez bien la distinction :

* Le **Widget iFrame** intègre une *page Web* — y compris une carte tierce comme une vue trafic Waze ou une carte Google intégrée. Il affiche ce que ce site affiche ; il ne connaît rien de vos appareils.
* Le [**Widget Carte**](/kilo-docs-fr/kilo-iot-server/dashboards/adding-widgets/map-widget.md) place l’un de *vos propres* appareils signalant leur position GPS sur une carte interactive et suit sa position en direct. Utilisez-le lorsque vous voulez suivre un véhicule, un actif ou tout appareil de suivi enregistré sur la plateforme — pas le widget iFrame.

## Exemples concrets

**Tableau de bord des installations — rapport énergétique en contexte** Un tableau de bord de gestion technique du bâtiment affiche déjà les consignes CVC, l’occupation et les températures des pièces provenant des appareils du site. Ajoutez un widget iFrame pointant vers le rapport énergétique Power BI de l’organisation, et le superviseur de quart voit les tendances de consommation à côté des équipements qui les produisent — sans changer d’outil pour répondre à « la charge est-elle où elle devrait être ? »

**Opérations d’un parc éolien — météo à côté des éoliennes** Un écran d’exploitation suit les vibrations et la production de chaque éolienne. Une carte Windy intégrée du champ de vent du site permet aux opérateurs de mettre en relation une baisse de production avec une accalmie, ou d’anticiper une réduction de production par vent fort, le tout sur le tableau de bord que l’équipe consulte déjà.

**Centre de distribution — trafic sur la voie d’accès** Un tableau de bord logistique surveille les capteurs des portes de quai et les températures de la chambre froide. Une carte de trafic Waze en direct intégrée des routes menant au site permet à l’équipe de cour de voir la congestion se former et de réorganiser les arrivées avant que les camions ne fassent la queue à la porte.

## Ce que montre le widget

<figure><img src="https://3675309505-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>

Sur le tableau de bord, le widget iFrame affiche la page intégrée en direct dans sa tuile, juste à côté de vos widgets d’appareils — ci-dessus, une carte météo Windy se trouve à côté d’un jumeau numérique du bâtiment et d’une jauge de niveau de cuve. La page se comporte comme sur son propre site : elle se rafraîchit et se met à jour selon son propre calendrier, si bien que le widget lui-même n’a pas de réglage de rafraîchissement distinct. Redimensionnez et repositionnez la tuile en mode édition comme n’importe quel autre widget pour donner à un rapport dense l’espace dont il a besoin.

Le widget iFrame est une surface d’affichage, pas une source de données : il ne lit pas vos appareils, n’alimente pas le moteur de règles et ne déclenche pas d’alarmes. Utilisez-le pour apporter un contexte externe sur le tableau de bord, et gardez les métriques des appareils dans les widgets conçus pour elles — Dernière donnée, Graphique, Image et Jumeau numérique du bâtiment.

## Voir aussi

* [Ajout de widgets](/kilo-docs-fr/kilo-iot-server/dashboards/adding-widgets.md) — mode édition et sélecteur de widgets
* [Widget Carte](/kilo-docs-fr/kilo-iot-server/dashboards/adding-widgets/map-widget.md) — Suivre la position en direct d’un appareil GPS (différent de l’intégration d’une carte Web)
* [Jumeau numérique du bâtiment](/kilo-docs-fr/kilo-iot-server/dashboards/adding-widgets/digital-building-twin.md) — Un modèle 3D en direct d’une installation


---

# 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-fr/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.