Crie Interfaces Personalizadas Para Seu Projeto

Interfaces permitem criar experiências personalizadas e semelhantes a aplicativos para seus projetos EKB. Em vez da interface de chat padrão, você pode construir aplicações multi-página com diferentes tipos de páginas, layouts personalizados e configurações adaptadas para corresponder aos seus casos de uso específicos.

Interfaces fornecem:

• Experiência de Usuário Personalizada: Substitua o modo de chat padrão por interfaces construídas para finalidades específicas
• Aplicações Multi-Página: Crie interfaces com múltiplas páginas, cada uma servindo funções diferentes
• Tipos de Página Flexíveis: Escolha entre chat, tabelas inteligentes, base de conhecimento, ações ou páginas personalizadas
• Publicação e Compartilhamento: Publique interfaces e defina-as como padrão para seu projeto
• Profissionalismo de Marca: Crie interfaces com marca para usuários externos

Conceitos Principais

Interface

Uma interface é uma coleção de páginas que juntas formam uma experiência completa para o usuário. Cada projeto pode ter múltiplas interfaces, mas apenas uma pode ser definida como padrão.

Propriedades da Interface:

• Nome: Nome de exibição da interface
• Descrição: Descrição opcional do propósito da interface
• Publicada: Se a interface está publicada e disponível para os usuários
• Padrão: Se esta é a interface padrão do projeto

Página

Uma página é uma tela individual dentro de uma interface. Páginas podem ser de diferentes tipos, cada uma com suas próprias opções de configuração.

Tipos de Página:

• Página de Chat: Fornece uma interface de chat interativa com um agente de IA
• Página de Tabela Inteligente: Exibe uma tabela de dados com filtragem, edição e visualizações avançadas
• Página de Base de Conhecimento: Oferece busca e navegação de documentos
• Página de Ações: Permite aos usuários navegar e executar ferramentas e fluxos de trabalho
• Página Personalizada: Permite construir uma página do zero usando elementos de arrastar e soltar

Configuração de Página

Cada tipo de página possui opções de configuração específicas que controlam seu comportamento e aparência.

Primeiros Passos

Criando uma Interface

1. Navegue até as Interfaces

   • Vá para o projeto
   • Clique em Interfaces na navegação do projeto

2. Crie uma Nova Interface

   • Clique em + Criar Interface
   • Uma nova interface com uma página de chat padrão será criada
   • Você será redirecionado para o Construtor de Interfaces

3. Configure a Interface

   • Use o construtor de interfaces para adicionar páginas, configurar definições e personalizar o layout
   • Para mais detalhes, consulte a seção Construtor de Interfaces

Definindo a Interface Padrão

1. Na Lista de Interfaces

   • Navegue até a página de Interfaces
   • Encontre a interface que deseja definir como padrão
   • Clique em Definir como Padrão

2. No Construtor de Interfaces

   • Abra a interface que deseja definir como padrão
   • Use as configurações da interface para exibir como padrão

Nota: Apenas uma interface pode ser padrão por vez. Ao definir uma nova padrão, a anterior será automaticamente desmarcada.

Construtor de Interfaces

O construtor de interfaces é onde você cria e configura suas interfaces. Ele fornece:

• Gerenciamento de Páginas: Adicione, edite, exclua e reordene páginas
• Configuração de Páginas: Configure as definições e comportamento de cada página
• Pré-visualização: Pré-visualize a interface antes de publicar
• Publicação: Publique a interface para torná-la disponível

Acessando o Construtor

1. Clique em uma interface na lista de interfaces
2. Ou clique em Abrir para ver a interface publicada

Layout do Construtor de Interfaces

O construtor possui três áreas principais:

1. Barra Lateral: Lista de páginas e painel de configurações
2. Tela de Exibição: Pré-visualização da página atual
3. Painel de Configurações: Definições da página selecionada

Tipos de Página

Página de Chat

Uma página de chat fornece uma interface de chat interativa onde os usuários podem conversar com um agente de IA.

Opções de Configuração:

• Seleção de Agente:

  • Agente Padrão: Define o agente padrão do chat
  • Modo Agente Único: Exibe apenas um agente (oculta o seletor)
  • Agentes Ativados: Lista de permissões de IDs de agentes disponíveis
  • Tipo de Exibição: Escolha entre 'simples' ou 'detalhado'

• Configurações de Chat:

  • Ocultar Rodapé: Oculta o rodapé do chat
  • Metadados: Metadados personalizados para transmitir na sessão de chat

Casos de Uso:

• Chatbot de suporte ao cliente
• Interface de Q&A interativa
• Interface de chat por agente

Página de Tabela Inteligente

A página de tabela inteligente exibe uma tabela de dados com recursos avançados de filtragem, ordenação e edição.

Tipos de Visualização:

1. Visualização de Tabela: Tabela de dados padrão com linhas e colunas

   • Ocultar Barra de Ferramentas: Oculta a barra de ferramentas da tabela
   • Somente Leitura: Define a tabela como somente leitura

2. Visualização de Revisão: Interface de revisão para validação de dados

   • Filtros Pré-configurados: Filtros pré-configurados para a visualização de revisão
   • Ocultar Filtros: Oculta os controles de filtro
   • Modo de Edição Padrão: Inicia no modo de edição

3. Visualização de Dashboard: Dashboard analítico com gráficos e métricas

   • ID da Visualização do Dashboard: ID do dashboard a ser exibido
   • Ocultar Seletor de Período: Oculta o seletor de período
   • Período Padrão: Período padrão do dashboard

Suporte a Abas:

A página de tabela inteligente pode ter múltiplas abas, cada uma exibindo diferentes tabelas ou visualizações:

• Aba de Tabela: Cada aba exibe uma tabela inteligente diferente
• Aba de Visualização: Cada aba exibe uma visualização diferente da mesma tabela
• Configuração de Abas: Configure cada aba independentemente

Casos de Uso:

• Interface de gerenciamento de dados
• Fluxos de trabalho de validação e aprovação
• Dashboards analíticos
• Visualização de dados multi-tabela

Página de Base de Conhecimento

A página de base de conhecimento fornece recursos de busca e navegação de documentos.

Opções de Configuração:

• Ativar Busca: Ativa/desativa a funcionalidade de busca
• Ativar Categorias: Exibe/oculta categorias de documentos

Casos de Uso:

• Interface de biblioteca de documentos
• Repositório de conhecimento
• Central de ajuda

Página de Ações

A página de ações permite aos usuários navegar e executar ferramentas e fluxos de trabalho.

Modos de Exibição:

1. Modo Múltiplas Ações: Exibe múltiplas ações em uma grade ou lista

   • Exibir Busca: Ativa a funcionalidade de busca
   • Modo de Visualização: Escolha entre 'grade' ou 'lista'
   • Ocultar Barra de Ferramentas: Oculta a barra de ferramentas das ações
   • Ativar Filtragem: Ativa a filtragem de ações

2. Modo Ação Única: Exibe uma única ação como formulário

   • ID da Ação Selecionada: ID específico da ação a ser exibida
   • Ocultar Cabeçalho do Formulário: Oculta o título/descrição da ação
   • Execução Automática: Inicia automaticamente ao carregar se todos os campos obrigatórios tiverem valores padrão

Casos de Uso:

• Interface de execução de fluxos de trabalho
• Biblioteca de ferramentas
• Formulário de ação única
• Interface de automação de processos

Página Personalizada

A página personalizada permite construir uma página do zero usando elementos de arrastar e soltar.

Elementos Disponíveis:

Elementos de Dados:

• Grade: Exibe uma grade de dados
• Gráfico: Visualização de gráfico
• Número: Exibe um número
• Filtro: Controle de filtro

Elementos de Interface:

• Texto: Exibe texto
• Botão: Botão interativo
• Divisor: Divisor visual

Elementos Interativos:

• Seletor de Registro: Componente de seleção de registro
• Campo: Campo de formulário

Casos de Uso:

• Dashboards personalizados
• Interfaces de formulário
• Páginas de visualização de dados
• Páginas de destino com marca

Gerenciamento de Páginas

Adicionando Páginas

1. No construtor de interfaces, clique em + Adicionar Página
2. Selecione o modelo de página:
   • Página de Chat
   • Tabela Inteligente
   • Base de Conhecimento
   • Ações
   • Página Personalizada
3. Configure as definições da página
4. A página será adicionada à interface

Editando Páginas

1. Selecione a página na barra lateral
2. Configure as definições da página no painel
3. As alterações são salvas automaticamente

Reordenando Páginas

1. Clique e arraste páginas na lista para reordenar
2. Esta ordem determina a navegação na interface publicada

Excluindo Páginas

1. Selecione a página a ser excluída
2. Clique no botão de exclusão
3. Confirme a exclusão

Nota: Não é possível excluir a última página de uma interface. Pelo menos uma página deve sempre existir.

Publicando a Interface

Publicando

1. No Construtor de Interfaces:

   • Abra a interface a ser publicada
   • Nas configurações da interface, clique em Publicar
   • A interface será marcada como publicada

2. Na Lista de Interfaces:

   • Encontre a interface a ser publicada
   • Use o toggle de publicação

Interfaces publicadas estão:

• Disponíveis para os usuários ao acessarem o projeto
• Exibidas na lista de interfaces com um selo "Publicada"
• Acessíveis através da URL do aplicativo do projeto

Despublicando uma Interface

1. Abra a interface publicada
2. Nas configurações da interface, clique em Despublicar
3. A interface não estará mais disponível para os usuários

Melhores Práticas

Design da Interface

1. Planeje Antes de Começar: Planeje a estrutura antes de construir

   • Identifique as páginas necessárias
   • Determine os tipos de página
   • Planeje o fluxo de navegação

2. Use Nomes Descritivos: Use nomes claros e descritivos para interfaces e páginas

   • Ajuda os usuários a entenderem o propósito
   • Facilita o gerenciamento

3. Organize Páginas Logicamente: Posicione páginas em ordem lógica

   • Coloque as páginas mais importantes primeiro
   • Agrupe páginas relacionadas

Configuração de Páginas

1. Configure a Página de Chat com Cuidado:

   • Defina o agente padrão apropriado
   • Use modo agente único quando apenas um agente for necessário
   • Use lista de permissões para melhor controle

2. Otimize Páginas de Tabela Inteligente:

   • Escolha o tipo de visualização adequado para o caso de uso
   • Use abas para visualização multi-tabela
   • Configure filtros e definições adequadamente

3. Teste Páginas de Ações:

   • Teste em modos múltiplos e únicos
   • Verifique se a lista de permissões funciona corretamente
   • Teste o recurso de execução automática

Desempenho

1. Limite o Número de Páginas: Mantenha um número razoável de páginas

   • Muitas páginas podem tornar a interface lenta
   • Considere usar abas dentro das páginas

2. Otimize Páginas Personalizadas:

   • Não sobrecarregue páginas personalizadas com muitos elementos
   • Use composição eficiente de elementos

3. Teste Antes de Publicar: Sempre pré-visualize e teste antes de publicar

   • Verifique todas as configurações de página
   • Teste o fluxo de navegação
   • Confirme que todos os recursos funcionam

Casos de Uso

Interface de Suporte ao Cliente

Estrutura:

• Página 1: Chat - Chat principal de suporte com agente
• Página 2: Base de Conhecimento - Documentação e artigos de ajuda
• Página 3: Ações - Submissão de chamados ou solicitações

Configuração:

• Página de Chat: Modo agente único com agente de suporte
• Base de Conhecimento: Busca e categorias ativadas
• Ações: Modo multi-ação com fluxos de trabalho de suporte

Interface de Gerenciamento de Dados

Estrutura:

• Página 1: Dashboard - Visualização de dashboard de tabela inteligente
• Página 2: Entrada de Dados - Tabela inteligente com visualização de revisão
• Página 3: Relatórios - Tabela inteligente com múltiplas abas

Configuração:

• Dashboard: Período padrão definido, seletor de período visível
• Entrada de Dados: Filtros pré-configurados, modo de edição ativado
• Relatórios: Múltiplas abas com diferentes visualizações de tabela

Interface de Automação de Fluxos de Trabalho

Estrutura:

• Página 1: Ações - Navegação e execução de fluxos de trabalho
• Página 2: Status - Tabela inteligente exibindo status de fluxos de trabalho
• Página 3: Dashboard Personalizado - Página com gráficos e métricas

Configuração:

• Ações: Visualização em grade, busca ativada, filtragem por categoria
• Status: Visualização em tabela, somente leitura, atualização automática
• Dashboard: Elementos personalizados exibindo métricas principais

Solução de Problemas

Interface Não Aparece

Problema: A interface não aparece na lista ou não pode ser acessada.

Soluções:

• Verifique se a interface está publicada
• Confirme se está visualizando o projeto correto
• Verifique se possui as permissões adequadas

Página Não Carrega

Problema: A página não carrega ou exibe erros.

Soluções:

• Verifique a configuração da página
• Confirme se todos os recursos necessários (tabelas, agentes, ações) existem
• Verifique erros de configuração nas definições da página

Interface Padrão Não Funciona

Problema: A interface padrão não está sendo usada.

Soluções:

• Confirme se a interface está definida como padrão
• Verifique se outra interface também está definida como padrão
• Atualize a página ou limpe o cache

Problemas com Página de Tabela Inteligente

Problema: A página de tabela inteligente não exibe dados ou apresenta erros.

Soluções:

• Verifique se a tabela existe e pode ser acessada
• Confirme a configuração do tipo de visualização
• Verifique as permissões da tabela
• Se usar abas, verifique a configuração das abas

Problemas com Página de Ações

Problema: Ações não aparecem ou não podem ser executadas.

Soluções:

• Verifique a configuração da lista de permissões de ações
• Confirme se as ações existem e estão publicadas
• Verifique as permissões das ações
• Confirme as configurações do modo de exibição

Integração com API

Interfaces podem ser acessadas programaticamente através da API do EKB. Consulte a Referência da API para mais detalhes sobre:

• Criação e gerenciamento de interfaces
• Configuração de páginas
• Publicação de interfaces
• Acesso a dados de interfaces

Próximos Passos

• Aprenda sobre Agentes para configurar páginas de chat
• Explore Tabelas Inteligentes para gerenciamento de dados
• Verifique Fluxos de Trabalho para páginas de ações
• Revise a Base de Conhecimento para gerenciamento de documentos