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

# Widget iFrame

Incrusta una página web — un informe de BI, un mapa meteorológico o tráfico en vivo — en un panel IoT de Kilo con el Widget iFrame.

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

No todas las vistas que necesita un equipo de operaciones provienen de un sensor. Un supervisor de turno que vigila el piso de una planta también puede necesitar el informe corporativo de energía, el radar meteorológico regional, el tráfico en vivo en las carreteras de acceso al sitio o la página de estado de un servicio del que depende el sitio. El widget iFrame lleva esas vistas externas al mismo panel que sus datos de dispositivos, para que una sola pantalla cuente toda la historia operativa en lugar de dispersarla entre pestañas del navegador.

Un widget iFrame incrusta una página web externa en vivo dentro de un mosaico del panel. La página incrustada sigue funcionando exactamente como en su propio sitio: se actualiza, anima y se renueva en tiempo real, pero ahora se sitúa junto a sus paneles de Último dato, gráficos y vistas del edificio. Usted apunta el widget a una **URL de incrustación** de un servicio compatible, le da un nombre y se renderiza en el lugar.

Como el widget carga directamente una página de terceros, Kilo solo incrusta fuentes de una lista revisada de servicios que publican vistas seguras e integrables. Eso mantiene confiable un panel operativo compartido: un mosaico incrustado solo puede mostrar una página de un servicio que la plataforma ha verificado, nunca un sitio arbitrario pegado por error.

## Agregar un widget iFrame

Este tutorial incrusta un informe operativo corporativo de Power BI junto a los datos en vivo de los dispositivos en un panel de instalaciones. Los pasos son idénticos para cualquier fuente compatible: solo cambia la URL de incrustación.

1. Abra el panel en modo de edición y haga clic en el **botón de suma** en el encabezado, luego elija **iFrame** en el selector de widgets. Su mosaico está etiquetado *iFrame* con la nota «Conecta un servicio meteorológico o algo más».
2. El panel de configuración se abre en la **Fuente de datos** pestaña — titulada «Configuración de iFrame» — con una vista previa en vivo a la derecha. Busque el **Fuente de datos** campo.
3. Obtenga la **URL de incrustación** del servicio de origen — no la dirección en la barra de su navegador. En la mayoría de los servicios esto se encuentra en **Compartir → Incrustar** o una **Obtener código de incrustación** opción. Algunos servicios le dan un enlace listo; otros le dan un fragmento HTML completo como `<iframe width="650" height="450" src="https://…/embed…" frameborder="0"></iframe>`. **Pegue solo la dirección dentro de `src="…"`** — la parte que comienza con `https://`. Omita el contenedor exterior `<iframe …>` envoltorio; el campo toma la URL por sí solo, y una etiqueta pegada se rechaza.
4. Pegue la URL de incrustación en el **Fuente de datos** campo. Debajo, en **Los siguientes servicios están disponibles**, Kilo enumera las fuentes que admite, agrupadas por categoría; úselo para confirmar que su fuente está incluida. La URL debe comenzar con **https\://**. La vista previa de la derecha renderiza la página en cuanto la URL es válida y compatible; una URL no compatible o mal formada muestra el mensaje *«Introduzca una URL de incrustación https\:// válida»* en lugar de un marco.
5. Haz clic en **Siguiente** para pasar a la **Apariencia** .
6. Introduce un **Nombre del widget** (obligatorio) — por ejemplo «Informe de energía del sitio». Añada una **Descripción** opcional para indicar qué muestra la incrustación o quién es el propietario de la fuente.
7. Haz clic en **Guardar** en el panel y luego **Guardar** en el encabezado del panel. El informe ahora se renderiza en vivo en su mosaico junto a los widgets de sus dispositivos.

> **¿La vista previa sigue vacía?** Casi siempre el valor pegado no es una URL de incrustación simple. Compruebe que copió solo la `https://` dirección de dentro de `src="…"` (no todo el `<iframe …>` etiqueta), que empieza con `https://`, y que el servicio aparezca en la lista compatible debajo del campo. Una URL normal de página, un `http://` enlace, o un servicio que no esté en la lista no se renderizarán.

## Qué puede incrustar

Los servicios compatibles están agrupados por categoría en el selector, para que pueda buscar el que necesita. Fuentes representativas de cada categoría:

* **Paneles y BI** — Power BI, Looker Studio, Tableau, Grafana. Lleve un informe corporativo existente o un panel operativo a la misma pantalla que sus dispositivos subyacentes.
* **Mapas y ubicación** — Google Maps, OpenStreetMap, Mapbox. Muestre un mapa del sitio, un área de servicio o una ruta.
* **Meteorología y calidad del aire** — Windy, Meteoblue, Ventusky, IQAir. Superponga condiciones que impulsan decisiones operativas: viento para un sitio con turbinas, calidad del aire para un sistema de ventilación.
* **Vídeo y cámaras** — YouTube, Vimeo, Twitch. Incruste una transmisión publicada o un clip informativo.
* **Transporte y vuelos** — Waze, Flightradar24, FlightAware. Observe el tráfico vial en vivo alrededor de un sitio con un mapa de Waze, o siga la carga aérea entrante.
* **Envíos y seguimiento de paquetes** — 17TRACK, AfterShip, TrackingMore. Siga los envíos entrantes o salientes.
* **Finanzas y mercados** — TradingView, Investing.com, Trading Economics. Observe los precios de materias primas o los índices que afectan las compras.
* **Estado y documentación** — Statuspage, Instatus, Google Docs. Fije la página de estado de una dependencia o un manual de procedimientos compartido.
* **Calendarios y formularios** — Google Calendar, Google Forms, Microsoft Forms, Calendly. Muestre un calendario de mantenimiento o un formulario de recepción.

La lista de servicios compatibles que se muestra en el widget es siempre la actual. Si el servicio que necesita no está allí, use el **por favor envíe una solicitud para añadir el recurso deseado** enlace debajo del campo Fuente de datos, y el equipo puede revisarlo para incluirlo en la lista permitida.

## Widget iFrame frente a widget de mapa

Estos dos se confunden fácilmente, así que mantenga clara la distinción:

* El **Widget de iFrame** incrusta una *página web* — incluso un mapa de terceros como una vista de tráfico de Waze o un Google Map incrustado. Muestra lo que muestra ese sitio web; no sabe nada de sus dispositivos.
* El [**Widget de mapa**](/kilo-docs-es/kilo-iot-server/dashboards/adding-widgets/map-widget.md) traza uno de *sus propios* dispositivos con reporte GPS en un mapa interactivo y sigue su posición en vivo. Úselo cuando quiera rastrear un vehículo, un activo o cualquier dispositivo rastreador registrado en la plataforma, no el widget iFrame.

## Ejemplos trabajados

**Panel de instalaciones: informe de energía en contexto** Un panel de gestión de edificios ya muestra los puntos de consigna de HVAC, la ocupación y las temperaturas de las salas de los dispositivos del sitio. Añada un widget iFrame que apunte al informe de energía de Power BI de la organización, y el supervisor de turno verá las tendencias de consumo junto al equipo que las produce: sin cambiar de herramienta para responder «¿está la carga donde debería estar?»

**Operaciones de parque eólico: el tiempo junto a las turbinas** Una pantalla de operaciones hace seguimiento de la vibración y la producción por turbina. Un mapa de Windy incrustado del campo eólico del sitio permite a los controladores correlacionar una caída en la producción con una calma, o anticipar una reducción por vientos fuertes, todo en el panel que el equipo ya vigila.

**Centro de distribución: tráfico en el acceso** Un panel logístico supervisa sensores de puertas de muelle y temperaturas de cámaras frigoríficas. Un mapa de tráfico en vivo de Waze incrustado de las rutas de acceso al sitio permite al equipo de patio ver cómo se forma la congestión y reprogramar las llegadas antes de que los camiones se acumulen en la entrada.

## Qué muestra el widget

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

En el panel, el widget iFrame renderiza la página incrustada en vivo dentro de su mosaico, justo al lado de los widgets de sus dispositivos — arriba, un mapa meteorológico de Windy se sitúa junto a un gemelo del edificio y un indicador de nivel de tanque. La página se comporta como en su propio sitio: se actualiza y se refresca según su propio calendario, por lo que el widget en sí no tiene una configuración de actualización aparte. Cambie el tamaño y la posición del mosaico en modo de edición como cualquier otro widget para darle a un informe denso el espacio que necesita.

El widget iFrame es una superficie de visualización, no una fuente de datos: no lee sus dispositivos, no alimenta el Motor de reglas ni dispara alarmas. Úselo para llevar contexto externo al panel y mantenga las métricas de los dispositivos en los widgets creados para ellas: Último dato, Gráfico, Imagen y el Gemelo Digital del Edificio.

## Ver también

* [Añadir widgets](/kilo-docs-es/kilo-iot-server/dashboards/adding-widgets.md) — Modo de edición y el selector de widgets
* [Widget de mapa](/kilo-docs-es/kilo-iot-server/dashboards/adding-widgets/map-widget.md) — Haga seguimiento de la posición en vivo de un dispositivo GPS (a diferencia de incrustar un mapa web)
* [Gemelo Digital del Edificio](/kilo-docs-es/kilo-iot-server/dashboards/adding-widgets/digital-building-twin.md) — Un modelo 3D en vivo de una instalación


---

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