> For the complete documentation index, see [llms.txt](https://docs.gaiodataos.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.gaiodataos.com/gaio-dataos-portuguese/tools/tarefas/entrega/conteudo.md).
# Conteúdo
O componente **Conteúdo** permite construir elementos visuais personalizados utilizando **HTML, CSS (Style) e JavaScript (Script)**. É uma ferramenta poderosa para criar dashboards dinâmicos, interfaces interativas e apresentações de dados personalizadas, tudo dentro da plataforma Gaio.Essa tarefa oferece grande flexibilidade para usuários que possuem conhecimentos em programação.
***
### Como Utilizar o Editor de Conteúdo
#### 1. Selecionar o Componente Conteúdo
No painel lateral esquerdo, na seção "Entrega", arraste a tarefa **Conteúdo** para o seu fluxo. Conecte-a às tarefas ou tabelas cujos dados você deseja utilizar.
***
#### 2. Configurar a Tarefa
**Rótulo:** (opcional) Nome para identificar esta etapa no seu fluxo.
**Aba HTML (Estrutura Visual):**\
Utilize esta aba para construir a estrutura do seu output.
**Aba Script (Lógica em JavaScript):**\
Acesse suas tabelas de dados por meio do objeto `context`.\
É possível inserir valores dinamicamente no HTML.
**Aba Style (Estilização em CSS):**\
Personalize a aparência do seu conteúdo.
Mesmo que existam abas separadas com os nomes das linguagens, o usuário pode utilizar HTML, CSS e JavaScript combinados no mesmo código.
***
#### Contexto
Para utilizar dados de tabelas existentes no Gaio, elas precisam estar sinalizadas. Para isso, marque cada tabela que será utilizada para que o Gaio disponibilize seus dados nesta tarefa.
***
#### Opções
Define como o resultado visual do código será exibido:
* Com borda: gera um box ao redor do objeto
* Sem borda: o conteúdo se mistura ao fundo
Sem borda pode ser mais interessante ao utilizar imagens ou conteúdos visuais amplos.
***
#### Biblioteca
Aqui você seleciona qual biblioteca deseja utilizar.
***
#### Contéudo
Aqui é possível visualizar imagens, PDFs e outros arquivos enviados ao Gaio. Na tarefa Contéudo, é possível exibir imagens, PDFs, vídeos, mapas e qualquer outro recurso permitido pelo código.
***
### 3. Preview e Configurações de Exibição
A aba **Resulto** mostra uma pré-visualização em tempo real do output renderizado.
É possível:
* Combinar dados de múltiplas tabelas
* Aplicar cálculos
* Exibir resultados dinamicamente
Você pode controlar:
* **Largura (%)** – Quanto espaço horizontal o componente ocupará
* **Altura (px)** – Altura vertical do frame de resultado
Sempre que inserir códigos na área preta, é necessário clicar no botão **Executar** para visualizar o resultado abaixo.
***
### Boas Práticas
* Mantenha seu HTML e JS organizados e modulares
* Sempre verifique se os dados não são `null` ou `undefined` antes de utilizá-los
* Utilize `console.log()` para depuração quando necessário
---
# 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:
```
GET https://docs.gaiodataos.com/gaio-dataos-portuguese/tools/tarefas/entrega/conteudo.md?ask=
```
The question should be specific, self-contained, and written in natural language.
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.