Crie Interfaces Personalizadas Para Seu Projeto

Interfaces é um construtor de aplicativos no-code que permite aos administradores de projeto criar aplicativos personalizados de várias páginas sobre recursos de projeto existentes — agentes, chats, tabelas inteligentes, dashboards, bases de conhecimento, ações, fluxos de trabalho, documentos e reuniões. Em vez da experiência de chat padrão, você pode construir interfaces propósito-específicas com múltiplas páginas, widgets de arrastar e soltar, marca personalizada e uma URL pública compartilhável.

Aplicativos Multi-Página

Crie interfaces com múltiplas páginas, cada uma servindo uma função diferente, organizadas em uma navegação personalizada.

Tela de Arrastar e Soltar

Construa páginas usando uma grade de 12 colunas com uma biblioteca de widgets de IA, dados, ações e conteúdo.

Marca Personalizada

Personalize logotipos, cores, layout de navegação, favicon e CSS para corresponder à sua marca.

Publicação e Compartilhamento

Publique interfaces via URL pública e controle o acesso dos membros.

Conceitos Principais

Interface

Uma interface é uma coleção de páginas que juntas formam uma experiência completa de usuário para um projeto. Cada projeto pode ter múltiplas interfaces.

Propriedade	Descrição
Nome	Nome de exibição da interface
Publicada	Se a interface está disponível para usuários finais via URL pública
Marca	Logotipo, cores, layout de navegação, favicon e CSS personalizados

Página

Uma página é uma tela individual dentro de uma interface. Cada página possui um nome, ícone e posição na navegação. As páginas são construídas arrastando widgets para uma tela e podem ser criadas a partir de modelos pré-construídos.

Widget

Widgets são os blocos de construção de uma página, colocados em uma grade de arrastar e soltar de 12 colunas. Consulte a seção Biblioteca de Widgets abaixo para a lista completa.

Biblioteca de Widgets

IA

Widget	Descrição
Chat	Chat de IA com seus agentes
Cartão de Agente	Cartão de seleção de agente

Dados

Widget	Descrição
Tabela Inteligente	Visualização de tabela, revisão, kanban ou dashboard
Dashboard	Dashboard analítico de tabela inteligente
Base de Conhecimento	Navegue e pesquise conhecimento
Analíticas	Analíticas de uso e feedback
Gráfico	Gráfico de visualização de dados
Grade de Dados	Dados tabulares de uma tabela inteligente
Filtro	Filtro de dropdown ou pesquisa
Campo de Formulário	Entrada de texto, número, data ou caixa de seleção
Seletor de Registros	Selecione registros de uma tabela inteligente

Ações

Widget	Descrição
Ações	Lista de ações disponíveis
Formulário de Ação	Única ação como formulário
Execuções de Fluxo de Trabalho	Status e histórico de execução de fluxos de trabalho
Histórico de Execução	Histórico de execução de fluxos de trabalho

Conteúdo

Widget	Descrição
Documento	Visualizador e editor de documentos
Reuniões	Transcrições e notas de reuniões
Construtor JSON	Editor JSON estruturado
Texto	Conteúdo de texto rico
Botão	Botão interativo com ações
Imagem	Exibe uma imagem
Número / KPI	Exibe uma métrica ou KPI

Primeiros Passos

Criando uma Interface

1. Navegue até Interfaces

   Clique em Interfaces na barra lateral do projeto.

2. Crie uma nova interface
   • Se nenhuma interface existir ainda, clique em + Crie Sua Primeira Interface no centro da página.
   • Se interfaces já existirem, clique em + Nova Interface" no canto superior direito.
3. Nomeie sua interface

   Um modal Nova Interface aparecerá. Insira um nome e clique em Criar. Você será levado ao Construtor de Interfaces.

Layout do Construtor de Interfaces

Dentro do Construtor de Interfaces, você verá três áreas principais:

Área	Descrição
Barra Lateral Esquerda	Lista de páginas e painel de Widgets
Tela	Área de edição da página — arraste widgets aqui para construir
Painel Direito	Configurações do widget selecionado

A barra superior contém os seguintes controles:

Desfazer / Refazer

Volte ou avance etapas através de suas alterações.

Visualização Responsiva

Alterne entre visualizações Desktop, Tablet e Mobile.

Editar / Visualizar

Alterne entre modo de edição e uma visualização no construtor.

Visualização Completa

Abra a interface em uma nova aba como os usuários finais verão.

Paleta de Comandos (⌘K)

Acesso rápido a ações do construtor via teclado.

Publicar / Salvar

Salve seu trabalho ou publique a interface em uma URL pública.

Construindo Páginas

Adicionando uma Página

1. Abra o modal Nova Página

   Clique em + ao lado de PÁGINAS na barra lateral esquerda.

2. Escolha um modelo

   Filtre por categoria (Todos os Modelos, Iniciar, Inicial, Avançado) e selecione um dos modelos disponíveis.

   Página em Branco

   Comece do zero com uma tela vazia.

   Dashboard Analítico

   Cartões KPI, gráficos e tabela de atividade recente.

   Formulário de Ação

   Formulário centralizado para acionar uma ação.

   Visualização de Tabela

   Tabela de dados de largura total com cabeçalho.

   Espaço de Trabalho de Chat

   Chat incorporado com contexto na barra lateral.

   Hub de Agentes

   Grade de cartões de agente com cabeçalho e filtros.

   Painel de Ações

   Grade pesquisável de todas as ações disponíveis.

   Chat + Tabela

   Visualização de chat e dados lado a lado.

3. Nomeie a página

   Insira o nome da página na parte inferior do modal (o padrão é o nome do modelo).

4. Crie a página

   Clique em Criar Página. A página será adicionada à sua interface e aberta na tela.

Adicionando Widgets

1. Encontre um widget

   No painel Widgets à esquerda, navegue por categoria ou use a barra de pesquisa.

2. Adicione à tela

   Arraste o widget para a tela ou clique nele para colocá-lo automaticamente.

3. Posicione e redimensione

   Mova e redimensione widgets na grade de 12 colunas para alcançar o layout desejado.

4. Configure o widget

   Selecione um widget para abrir suas configurações no painel direito.

Gerenciando Páginas

Para acessar as opções da página, passe o mouse sobre uma página na barra lateral e clique no ⋯ (menu de três pontos) que aparece. Isso oferece as seguintes opções:

Renomear

Clique em Renomear para transformar o nome da página em um campo de texto editável diretamente na barra lateral. Digite o novo nome e confirme.

Alterar ícone

Clique em Alterar ícone para abrir um seletor de ícones abaixo do nome da página. Clique em qualquer ícone para aplicá-lo imediatamente — nenhuma etapa de salvar é necessária.

Adicionar ao grupo

Clique em Adicionar ao grupo para abrir um painel inline com um campo de entrada de texto. Insira um nome de grupo (ex.: "Admin", "Relatórios") e clique em Salvar para organizar páginas sob um grupo rotulado na navegação. Para remover uma página de seu grupo, deixe o campo vazio e clique em Salvar.

Reordenar páginas

Clique e arraste páginas na lista para reordená-las. A ordem determina a ordem de navegação na interface publicada.

Excluir

Clique em Excluir para acionar um diálogo de confirmação do navegador: "Excluir esta página? Isso não pode ser desfeito." Clique em OK para confirmar ou Cancelar para abortar. Uma interface deve sempre ter pelo menos uma página.

Pré-visualizando Sua Interface

Toggle Editar / Visualizar

Use o toggle Editar / Visualizar na barra superior para alternar entre modo de edição e uma visualização no construtor da página atual. Isso é útil para verificar seu layout enquanto constrói sem sair do construtor.

Visualização Completa

Clique em Visualização Completa no canto superior direito para abrir a interface em uma nova aba do navegador exatamente como os usuários finais verão. Isso renderiza a interface completa — incluindo navegação na barra lateral, marca e todas as páginas — fora do ambiente do construtor.

Marca da Interface

Clique no ícone de paleta ao lado do nome da interface na barra superior para abrir o modal Marca da Interface.

Geral

Configuração	Descrição
Título de exibição	Texto exibido no cabeçalho da barra lateral
URL do Logotipo	Imagem quadrada, recomendado 256×256 PNG

Navegação

Layout de navegação — controla como os usuários finais se movem entre páginas:

Layout	Descrição
Barra Lateral	Menu vertical à esquerda — melhor para aplicativos com muitas páginas
Barra Superior	Navegação horizontal acima do conteúdo — ótimo para uma sensação de landing page
Flutuante	Menu hambúrguer em um drawer — maximiza o espaço da tela
Sem navegação	Modo de página única — use botões dentro da página para navegar

Estado inicial — se a barra lateral começa Expandida ou Recolhida.

Indicador de página ativa — estilo visual para a página selecionada:

• Pílula: fundo preenchido
• Suave: fundo tingido
• Barra: linha de destaque à esquerda

Cores

Configuração	Descrição
Cor primária	Usada para botões, links e estados ativos — insira um valor hexadecimal ou escolha das amostras predefinidas
Cor de destaque (opcional)	Cor de destaque da barra lateral; padrão é a cor primária

Uma Pré-visualização ao Vivo é atualizada em tempo real conforme você faz alterações.

Avançado

Configuração	Descrição
URL do Favicon	Ícone da aba do navegador — formato ICO ou PNG
CSS Personalizado	Aplicado à raiz do tempo de execução para estilização avançada

Clique em Salvar Marca para aplicar suas alterações.

Publicação

aviso

Salvar e publicar são ações separadas. Sempre salve suas alterações antes de publicar. Se você abrir o modal de Publicação com alterações não salvas, um banner de aviso o solicitará a salvar primeiro.

1. Abra o modal de Publicação

   Clique em Publicar no canto superior direito do Construtor de Interfaces.

2. Defina sua URL Pública

   Insira o slug da URL para sua interface. Apenas letras minúsculas, números e hífens.

3. Gerencie o acesso dos membros

   Em Gerenciar Acesso de Membros, revise ou adicione os usuários que devem ter acesso a esta interface.

4. Publique na web

   Clique em Publicar na web. Sua interface agora está no ar e acessível na URL pública.

Para tornar uma interface indisponível, abra o modal de Publicação e use a opção de despublicar.

Paleta de Comandos

Pressione ⌘K (Mac) ou Ctrl+K (Windows) — ou clique no botão ⌘K na barra superior — para abrir a paleta de comandos.

Comandos disponíveis

Comando	Atalho
Salvar alterações	⌘S
Publicar na web	—
Alternar visualização	—
Abrir configurações de marca	—
Nova página a partir de modelo	—
Desfazer	⌘Z
Refazer	⌘⇧Z
Mudar para página	Lista todas as páginas para navegação rápida

Digite um comando, nome de página ou nome de widget para pesquisar. Pressione Esc para fechar.

Casos de Uso

Suporte ao Cliente

Espaço de Trabalho de Chat — chat de suporte com contexto do agente

Base de Conhecimento — artigos de ajuda e documentação

Formulário de Ação — envie um chamado ou solicitação

Gerenciamento de Dados

Dashboard Analítico — cartões KPI e gráficos

Visualização de Tabela — tabela de dados completa para revisar registros

Página Personalizada — gráficos e widgets KPI para relatórios

Automação de Fluxos de Trabalho

Painel de Ações — navegue e execute fluxos de trabalho

Execuções de Fluxo de Trabalho — acompanhe status e histórico

Dashboard Analítico — métricas principais e histórico de execução

Solução de Problemas

Interface não aparece

Possíveis causas:

• A interface ainda não foi publicada
• Você está visualizando o projeto errado
• Você não possui as permissões necessárias

Verifique o status de publicação da interface e confirme que está no projeto correto.

Página não carrega

Possíveis causas:

• Um widget está mal configurado
• Um recurso referenciado (agente, tabela, ação, etc.) não existe mais ou é inacessível

Revise as configurações dos widgets no painel direito e verifique se todos os recursos referenciados estão disponíveis.

Aviso de alterações não salvas

O indicador Alterações não salvas aparece na barra superior e o botão Salvar fica laranja quando você tem alterações pendentes.

Clique em Salvar antes de pré-visualizar ou publicar para garantir que suas alterações mais recentes sejam aplicadas.

Banner de aviso no modal de Publicação

Isso aparece quando você tenta publicar com alterações não salvas.

Feche o modal, clique em Salvar, depois reabra o modal de Publicação e prossiga.

Próximos Passos

Agentes

Configure agentes para alimentar seus widgets de Chat.

Tabelas Inteligentes

Configure Tabelas Inteligentes para widgets de dados e dashboards.

Fluxos de Trabalho

Construa fluxos de trabalho para usar em widgets de Ação.

Base de Conhecimento

Gerencie sua base de conhecimento para widgets de BK.