HTML

Insira conteúdos visuais personalizados em formulários

O campo do tipo HTML permite adicionar conteúdos visuais personalizados dentro de formulários, tarefas e telas do ENSPACE.

Diferente de outros campos, ele não é utilizado para coleta de dados do usuário. Seu objetivo é exibir conteúdos estáticos ou informativos, como textos formatados, imagens, ícones, links, avisos ou estruturas visuais personalizadas.

Esse campo é especialmente útil para melhorar a experiência visual dos formulários e fornecer contexto adicional durante o preenchimento.

Quando usar este campo

Utilize o campo HTML quando precisar exibir conteúdos visuais ou informativos dentro de formulários.

Ele é ideal para:

• Instruções de preenchimento
• Mensagens explicativas
• Separadores visuais
• Títulos e subtítulos
• Avisos importantes
• Links externos
• Imagens
• Ícones
• Blocos informativos
• Estruturas visuais personalizadas

Informações básicas do campo

Todo campo no ENSPACE possui quatro informações básicas que são definidas no momento da criação:

• Nome do campo — nome interno utilizado nas configurações da categoria. Possui limite de 31 caracteres. Não é necessariamente o nome exibido para o usuário final.
• Rótulo Visível (Label) — nome exibido para os usuários em formulários, tarefas e telas. Possui limite de 255 caracteres. Pode ser mais descritivo que o nome interno e pode ser alterado posteriormente sem impactar automações ou referências técnicas.
• Referência técnica — identificador técnico do campo, gerado automaticamente em formato snake_case. É utilizado em expressões, variáveis, fluxos, automações e referências internas.
• Descrição — descrição interna para adicionar contexto ao campo. Ajuda configuradores a entenderem a finalidade do campo e auxilia recursos de IA do ENSPACE durante pesquisas e interpretações automáticas.

Como o campo funciona

O campo HTML funciona como um elemento de renderização visual: ele exibe o conteúdo que você montou, sem coletar nenhuma informação do usuário.

O conteúdo é escrito no editor de texto do ENSPACE, onde a formatação, as imagens, os títulos, as listas e os links são aplicados pela barra de ferramentas. Não é necessário escrever marcação à mão: o nome do campo vem do formato em que o conteúdo pode ser lido, e não da forma de escrevê-lo.

O que você monta no editor aparece da mesma forma no formulário, na tarefa ou na tela em que o campo for utilizado.

Editor de conteúdo

O conteúdo do campo HTML é escrito no editor de texto do ENSPACE, que reúne em um só lugar a formatação do texto, a inserção de imagens e a referência a informações que já existem no workspace.

O conteúdo é armazenado em um formato estruturado e pode ser lido como JSON, Markdown ou HTML, conforme o uso. Isso permite que o mesmo texto sirva tanto para exibição na tela quanto para geração de e-mails e documentos, sem precisar reescrever o conteúdo para cada finalidade.

Compatibilidade com conteúdo existente

Textos escritos em versões anteriores do editor continuam funcionando normalmente. Ao abrir um conteúdo antigo, o sistema faz a conversão para o formato estruturado sem perda de informação: a formatação, os links e as imagens são preservados.

Não é necessária nenhuma ação de migração. O conteúdo é convertido quando você abre o campo para edição.

Barra de ferramentas

A barra de ferramentas concentra as ações de escrita e formatação:

• Desfazer e refazer — volta ou repete a última alteração feita no campo.
• Formatação de texto — negrito, itálico, sublinhado, cores e demais estilos.
• Títulos — organiza o conteúdo em níveis de cabeçalho.
• Listas — listas com marcadores e listas numeradas.
• Blocos de código — trechos de código com espaçamento preservado.
• Imagens — insere imagens diretamente no corpo do texto.
• Referências a entidades — aponta para registros do workspace dentro do texto.
• Variáveis — insere valores que são substituídos no momento em que o texto é usado.

Cores do texto

O editor oferece dois controles de cor, com finalidades diferentes:

• Cor do Texto — pinta a letra do trecho selecionado.
• Cor de Destaque — pinta o fundo do trecho, como um marca-texto.

No editor de um item, os dois ficam em um único controle da barra de ferramentas, que abre um menu dividido nessas duas seções. Cada seção traz a opção Padrão, que remove a cor aplicada, e um conjunto de cores nomeadas. Na seção de cor do texto, cada nome aparece escrito na própria cor, o que funciona como prévia; na seção de destaque os nomes ficam em preto, porque ali a cor é de fundo.

Selecione o trecho antes de abrir o controle. A cor entra como estilo do próprio trecho no conteúdo do campo, e não como formatação da tela: ela acompanha o texto onde quer que o conteúdo seja exibido.

Na pré-visualização do campo, dentro da configuração da categoria, a cor da fonte tem um controle próprio, separado do de destaque. Além do conjunto de amostras, ele abre um seletor livre de cor, com quadro de saturação e brilho, faixa de matiz, faixa de opacidade e campo de código hexadecimal. O código é preenchido automaticamente com a cor escolhida no quadro, o que permite anotar o valor exato de uma cor da identidade visual da empresa.

Marcação convertida enquanto você escreve

A barra de ferramentas não é o único caminho para formatar: o editor converte a marcação no momento em que ela é digitada.

• ## seguido de espaço transforma a linha em título.
• Um trecho entre dois asteriscos de cada lado fica em negrito.
• Um trecho entre um asterisco de cada lado fica em itálico.
• Um trecho entre acentos graves fica com formatação de código.
• - seguido de espaço abre uma lista de marcadores, e a tecla Enter continua a lista na linha seguinte.

Digitar / em uma linha vazia abre um menu com as ações de estrutura do editor: texto simples, listas de marcadores, numeradas e de tarefas, cabeçalhos, citação, negrito, itálico e inserção de imagem.

Ao selecionar um trecho já escrito, uma barra flutuante aparece sobre o texto com as formatações mais usadas, o que evita ir até a barra do topo para aplicar negrito, itálico, sublinhado, tachado, código ou link.

Referências e variáveis

Dois elementos do editor apontam para informações que vivem fora do texto:

• Uma referência a entidade liga o texto a um registro do workspace, como um item, um membro ou uma categoria. A referência aparece como um elemento próprio no texto, e não como texto solto, o que mantém o vínculo com o registro mesmo que o nome dele mude.
• Uma variável representa um valor que só é conhecido no momento em que o texto é usado, como o nome do responsável por uma tarefa ou a data de vencimento. Ao gerar o conteúdo final, a variável é substituída pelo valor correspondente.

Esses elementos também são reconhecidos pelo Beni. Quando um texto contém referências, o assistente consegue consultar as informações apontadas para responder ou para gerar conteúdo, sem que você precise copiar os dados para dentro do texto.

Para entender como as variáveis se comportam dentro de um fluxo, consulte Spaceflow.

Escrita com apoio do Beni

O Beni está disponível dentro do próprio campo de texto, sem necessidade de abrir a janela de chat. A partir da seleção de um trecho, é possível pedir que ele:

• Continue escrevendo a partir do que já está no campo.
• Traduza o trecho selecionado para outro idioma.
• Resuma o conteúdo em uma versão mais curta.

O resultado é aplicado no próprio campo, e você mantém o controle sobre aceitar ou descartar a sugestão.

Para conhecer os agentes disponíveis e como escolher entre eles, consulte Beni AI.

Altura do editor

A área de escrita abre com uma altura fixa, confortável para textos curtos. Quando o conteúdo é mais longo, ou traz imagens, boa parte dele fica fora da vista e a leitura passa a depender da rolagem interna do próprio campo.

Para ganhar espaço, o editor tem uma alça de redimensionamento no canto inferior direito. Arraste a alça para baixo e a área de escrita cresce; arraste para cima e ela diminui, até o limite da altura inicial, que é a menor altura possível. A largura do campo não muda em nenhum dos dois movimentos, então a quebra de linha do texto continua a mesma.

Conforme a altura aumenta, a rolagem interna deixa de ser necessária: o trecho que estava escondido cabe na área visível, e dá para acompanhar o conteúdo inteiro de uma vez, imagens incluídas.

O ajuste vale para a edição em andamento. Ao recarregar a página, o campo volta à altura inicial.

Onde o editor aparece

O mesmo editor é usado em outros pontos do workspace, além do campo HTML das categorias:

• Descrições de tarefas geradas pelo Spaceflow.
• Modelos de e-mail.
• Prompts enviados para os nós de IA.

Como o conteúdo é o mesmo em todos esses pontos, um texto com variáveis e referências escrito uma vez se comporta da mesma forma onde quer que seja utilizado.

As ações oferecidas pela barra variam conforme o ponto em que o editor aparece. No editor de um item a barra é compacta e reúne desfazer e refazer, estilo de texto, negrito, itálico, sublinhado, tachado, código, cores, alinhamento e inserção. Na pré-visualização da configuração do campo a barra é mais completa, com níveis de título, tabela, imagem, link e visualização do HTML gerado.

Passo a passo: formatar o conteúdo do campo

A barra de ferramentas e os atalhos de digitação produzem o mesmo resultado:

Como configurar

Comportamento dos dados

Alterações feitas no campo HTML aplicam-se imediatamente em todas as utilizações:

• Modificações no conteúdo são refletidas automaticamente em formulários, tarefas e telas.
• Este campo não armazena informações preenchidas pelo usuário.
• Dados anteriores não são afetados, pois o campo não participa da coleta de dados.

Boas práticas

• Utilize o campo HTML para organizar visualmente formulários complexos e orientar usuários durante o preenchimento.
• Prefira estruturas simples, como títulos, parágrafos e separadores, para garantir legibilidade em telas de tamanhos diferentes.
• Ao inserir imagens por link, use endereços confiáveis e acessíveis para evitar quebras de exibição.
• Escreva o texto do campo pensando em quem preenche o formulário: instruções curtas e diretas funcionam melhor que blocos longos.