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

# Widget iFrame

Incorpore uma página Web — um relatório de BI, mapa meteorológico ou tráfego em direto — num painel IoT Kilo com o Widget iFrame.

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

Nem toda visualização de que uma equipe de operações precisa vem de um sensor. Um supervisor de turno que observa o piso de uma planta também pode precisar do relatório corporativo de energia, do radar meteorológico regional, do trânsito ao vivo nas estradas até o local, ou da página de status de um serviço do qual o local depende. O iFrame Widget traz essas visualizações externas para o mesmo painel que os dados dos seus dispositivos, de modo que uma única tela conte toda a história operacional em vez de espalhá-la por várias abas do navegador.

Um iFrame Widget incorpora uma página web externa ao vivo dentro de um bloco do painel. A página incorporada continua funcionando exatamente como funciona no seu próprio site — ela é atualizada, anima e se ajusta em tempo real — mas agora fica ao lado dos seus painéis Last Data, gráficos e visualizações do edifício. Você aponta o widget para uma **URL de incorporação** de um serviço compatível, dá um nome a ele e ele é renderizado no local.

Como o widget carrega uma página de terceiros diretamente, o Kilo só incorpora fontes de uma lista revisada de serviços que publicam visualizações seguras e incorporáveis. Isso mantém confiável um painel de operações compartilhado: um bloco incorporado só pode mostrar uma página de um serviço que a plataforma tenha validado, nunca um site arbitrário colado por engano.

## Adicionar um iFrame Widget

Este passo a passo incorpora um relatório corporativo do Power BI de operações ao lado dos dados ao vivo dos dispositivos em um painel de instalações. As etapas são idênticas para qualquer fonte compatível — apenas a URL de incorporação muda.

1. Abra o painel no modo de edição e clique em **botão +** no cabeçalho e, em seguida, escolha **iFrame** no seletor de widgets. O seu bloco é rotulado *iFrame* com a nota "Conecte um serviço de meteorologia ou outra coisa."
2. O painel de configurações abre na **Fonte de dados** aba — intitulada "Configuração do iFrame" — com uma pré-visualização ao vivo à direita. Encontre o **Fonte de dados** campo.
3. Obtenha a **URL de incorporação** do serviço de origem — não o endereço na barra do navegador. Na maioria dos serviços, isso fica em **Partilhar → Incorporar** ou uma **Obter código de incorporação** opção. Alguns serviços fornecem um link pronto; outros fornecem um trecho HTML completo, como `<iframe width="650" height="450" src="https://…/embed…" frameborder="0"></iframe>`. **Cole apenas o endereço dentro de `src="…"`** — a parte que começa com `https://`. Deixe de fora o `<iframe …>` invólucro; o campo aceita a URL por si só, e uma tag colada é rejeitada.
4. Cole a URL de incorporação no **Fonte de dados** campo. Abaixo dele, em **Os seguintes serviços estão disponíveis**, o Kilo lista as fontes que suporta, agrupadas por categoria — use isso para confirmar que sua fonte está contemplada. A URL deve começar com **https\://**. A pré-visualização à direita renderiza a página assim que a URL é válida e compatível; uma URL não suportada ou malformada mostra a mensagem *"Insira uma URL de incorporação https\:// válida"* em vez de um quadro.
5. Clique em **Seguinte** para ir para a **Aparência** .
6. Insira um **Nome do widget** (obrigatório) — por exemplo, "Relatório de energia do site". Adicione uma **Descrição** opcional para indicar o que a incorporação mostra ou quem é o proprietário da origem.
7. Clique em **Salvar** no painel e, em seguida, **Salvar** no cabeçalho do painel. O relatório agora é renderizado ao vivo no seu bloco, ao lado dos widgets de dispositivos.

> **A pré-visualização continua vazia?** Quase sempre o valor colado não é uma URL de incorporação pura. Verifique se você copiou apenas o `https://` endereço de dentro de `src="…"` (não a tag inteira `<iframe …>` ), que ele começa com `https://`, e que o serviço aparece na lista de compatíveis abaixo do campo. Uma URL normal da página, um `http://` link, ou um serviço que não esteja na lista não será renderizado.

## O que você pode incorporar

Os serviços suportados são agrupados por categoria no seletor, para que você possa localizar o que precisa. Fontes representativas em cada categoria:

* **Painéis e BI** — Power BI, Looker Studio, Tableau, Grafana. Traga um relatório corporativo existente ou um painel operacional para a mesma tela dos dispositivos subjacentes.
* **Mapas e localização** — Google Maps, OpenStreetMap, Mapbox. Mostre um mapa do local, uma área de atendimento ou uma rota.
* **Meteorologia e qualidade do ar** — Windy, Meteoblue, Ventusky, IQAir. Sobreponha as condições que orientam decisões operacionais — vento para um local com turbinas, qualidade do ar para um sistema de ventilação.
* **Vídeo e feeds de câmeras** — YouTube, Vimeo, Twitch. Incorpore uma transmissão publicada ou um clipe de briefing.
* **Transporte e voos** — Waze, Flightradar24, FlightAware. Acompanhe o tráfego rodoviário ao vivo ao redor de um local com um mapa Waze, ou siga a carga aérea de entrada.
* **Envio e rastreamento de encomendas** — 17TRACK, AfterShip, TrackingMore. Acompanhe remessas de entrada ou de saída.
* **Finanças e mercados** — TradingView, Investing.com, Trading Economics. Acompanhe os preços de commodities ou índices que afetam as compras.
* **Status e documentos** — Statuspage, Instatus, Google Docs. Fixe a página de status de uma dependência ou um runbook compartilhado.
* **Calendários e formulários** — Google Calendar, Google Forms, Microsoft Forms, Calendly. Exiba um cronograma de manutenção ou um formulário de recepção.

A lista de serviços suportados mostrada no widget é sempre a atual. Se o serviço de que você precisa não estiver lá, use o **por favor, envie uma solicitação para adicionar o recurso desejado** link abaixo do campo Fonte de dados, e a equipe pode avaliá-lo para inclusão na lista permitida.

## Widget iFrame vs Widget de Mapa

Esses dois são fáceis de confundir, então mantenha clara a distinção:

* A **Widget iFrame** incorpora uma *página da web* — incluindo um mapa de terceiros, como uma visualização de trânsito do Waze ou um Google Maps incorporado. Ele mostra o que esse site mostra; não sabe nada sobre seus dispositivos.
* A [**Widget Mapa**](/kilo-docs-pt/kilo-iot-server/dashboards/adding-widgets/map-widget.md) plota um dos *seus próprios* dispositivos com reporte por GPS em um mapa interativo e acompanha sua posição ao vivo. Use-o quando quiser rastrear um veículo, um ativo ou qualquer dispositivo rastreador registrado na plataforma — não o iFrame Widget.

## Exemplos trabalhados

**Painel de instalações — relatório de energia em contexto** Um painel de gestão predial já mostra pontos de ajuste do HVAC, ocupação e temperaturas das salas dos dispositivos do local. Adicione um iFrame Widget apontando para o relatório de energia do Power BI da organização, e o supervisor de turno vê as tendências de consumo ao lado do equipamento que as gera — sem alternar ferramentas para responder a "a carga está onde deveria estar?"

**Operações de parque eólico — meteorologia ao lado das turbinas** Uma tela de operações acompanha a vibração e a produção por turbina. Um mapa Windy incorporado do campo de vento do local permite aos controladores correlacionar uma queda na produção com uma calmaria, ou antecipar uma redução por vento forte, tudo no painel que a equipe já monitora.

**Centro de distribuição — tráfego na aproximação** Um painel logístico monitora sensores das portas de doca e temperaturas da câmara frigorífica. Um mapa de tráfego ao vivo do Waze incorporado das rotas de acesso ao local permite que a equipe do pátio veja o congestionamento se formando e reorganize as chegadas antes que os caminhões se acumulem no portão.

## O que o widget mostra

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

No painel, o iFrame Widget renderiza a página incorporada ao vivo dentro do seu bloco, bem ao lado dos seus widgets de dispositivos — acima, um mapa meteorológico Windy fica ao lado de um gêmeo digital do prédio e de um medidor de nível do tanque. A página se comporta como no seu próprio site: ela é atualizada conforme seu próprio cronograma, então o próprio widget não tem uma configuração de atualização separada. Redimensione e reposicione o bloco no modo de edição como qualquer outro widget para dar a um relatório denso o espaço de que ele precisa.

O iFrame Widget é uma superfície de visualização, não uma fonte de dados: ele não lê seus dispositivos, não alimenta o Rules Engine nem dispara alarmes. Use-o para trazer contexto externo para o painel e mantenha as métricas dos dispositivos nos widgets criados para isso — Last Data, Chart, Image e o Digital Building Twin.

## Ver também

* [Adicionar widgets](/kilo-docs-pt/kilo-iot-server/dashboards/adding-widgets.md) — modo de edição e o seletor de widgets
* [Widget Mapa](/kilo-docs-pt/kilo-iot-server/dashboards/adding-widgets/map-widget.md) — Acompanhe a posição ao vivo de um dispositivo GPS (diferente de incorporar um mapa da web)
* [Gémeo Digital de Edifício](/kilo-docs-pt/kilo-iot-server/dashboards/adding-widgets/digital-building-twin.md) — Um modelo 3D ao vivo de uma instalação


---

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