Interface e navegação

Estrutura da tela

Todas as telas do painel seguem o mesmo desenho, em quatro áreas:

O painel do Copiloto vive do lado de fora das telas: você navega pelo sistema inteiro e a conversa com ele continua aberta, sem recarregar e sem perder o contexto. O Copiloto também enxerga a conversa de atendimento que está aberta na tela. Veja Copiloto.

Todas as telas se atualizam sozinhas: conversas novas, mensagens, contadores do menu e avisos aparecem em poucos segundos, sem apertar F5.

Onde cada um começa

Depois do login, o ChatISP abre a tela que faz sentido para o perfil de quem entrou:

O logotipo no alto do menu leva sempre de volta a essa tela inicial. Se alguém abre uma tela para a qual não tem permissão (por um link antigo, por exemplo), o sistema também o leva para a tela inicial.

Instalação recém-feita

Enquanto não há nenhum número conectado e nenhuma conversa no histórico, a tela Conversas mostra Bem-vindo ao ChatISP ("Conecte um número de WhatsApp e monte sua equipe para começar a atender seus clientes.") com três atalhos, cada um visível para quem tem a permissão correspondente:

• Conectar WhatsApp: vincule o número que vai receber as conversas dos clientes.
• Montar a equipe: cadastre os atendentes e organize os departamentos.
• Ajustar o atendimento: defina horários, modos de atendimento e integrações.

Visão geral (painel de gestão)

Para quem supervisiona, a Visão geral é a primeira separação da tela Conversas: "Números, resultados e desempenho da equipe em um só lugar." Ela reúne o que está acontecendo Ao vivo (fila, espera mais longa, conversas com a IA, na automação e em atendimento, quem está em pausa) e os números do período escolhido nos botões Hoje, 7 dias, 30 dias e 90 dias: volumes, funil do atendimento, desempenho da IA, equipe, satisfação, ordens de serviço e o mapa de calor dos horários.

Para sair da Visão geral e atender, clique em outra separação do menu (Minhas, Fila, Todas e assim por diante) ou abra uma conversa. O detalhe de cada indicador está em Relatórios e gestão.

Menu lateral

O menu lateral aparece em todas as telas do painel. Cada item só aparece para quem tem a permissão correspondente: um atendente comum vê um menu mais curto que o administrador. As permissões são definidas por perfil em Usuários e perfis.

Seção Atendimento

Seção Administração

Se nenhum item de uma seção estiver liberado para o usuário, o título da seção também some.

Separações da tela Conversas

Quando a tela Conversas está aberta, logo abaixo do item Conversas o menu ganha as separações da lista, cada uma com o seu contador:

Recolher e expandir

O botão ao lado do logotipo (Recolher menu: "Mostra ou esconde os nomes do menu.") alterna entre o menu recolhido, só com ícones, e o menu expandido, com os nomes. O menu começa recolhido; a escolha fica guardada no navegador e vale para as próximas visitas. Com o menu recolhido, os contadores viram bolinhas sobre os ícones e, ao passar o mouse sobre um ícone, aparece um cartão com o nome do item e uma frase explicando para que ele serve.

Rodapé do menu

• Seu nome e perfil (Administrador, Supervisor, Atendente ou o nome do perfil personalizado), com a inicial do nome no círculo. Clicar abre Minha conta: nome, senha, verificação em duas etapas, sons e Google Agenda. Veja Minha conta.
• Entrar em pausa: pede um Motivo da pausa opcional (almoço, reunião) e, em pausa, você não recebe novas conversas da fila; as que já são suas continuam com você. Enquanto durar, o rodapé mostra Em pausa com o motivo, e o botão vira Voltar da pausa. A pausa aparece para os supervisores na Visão geral.
• Sair: encerra a sua sessão neste navegador.

Topo da tela

O topo mostra o título da tela e, logo abaixo, um subtítulo curto dizendo para que ela serve (em Conversas, por exemplo: "Acompanhe e atenda seus clientes em tempo real"). À direita ficam os botões de ação:

Algumas telas acrescentam ao topo os seus próprios botões (como criar um registro ou abrir filtros). Nas telas com limite de plano (atendentes, conexões, fluxos e chaves de API), o cabeçalho mostra também o medidor de uso do plano. Veja Planos e limites.

Entre o título e os botões pode aparecer a faixa de licença, descrita em Faixa de licença.

Modos do atendimento

O Modo atendimento é a tela de trabalho do atendente: imersiva, com o atendimento no centro e sem o resto do sistema em volta. Ele abre pelo item Modo atendimento do menu e é a tela inicial de quem não supervisiona.

O menu do modo atendimento

No lugar do menu completo, o modo atendimento tem um menu próprio, enxuto:

• Painel: o kanban dos atendimentos em tempo real, coluna por situação.
• Conversas: a lista de conversas e o chat, com bolinha de não lidas.
• Ordens de serviço: o quadro de ordens de serviço sem sair do atendimento, com o contador de pendentes.
• Agenda: os compromissos da equipe.
• Os filtros da lista (Minhas, Fila, Automação, IA, Encerradas e Todas), com contadores.
• No rodapé: Copiloto, Tema, Entrar em pausa e o botão de saída. Para quem supervisiona, ele se chama Voltar à gestão (volta para Conversas); para o atendente, Voltar ao sistema (volta para Ordens de serviço e o restante do menu).

Esse menu também recolhe e expande pelo botão ao lado do logotipo, como o menu principal.

Simples e Alta performance

No topo do painel, ao lado do título Atendimento e da data, o seletor Modo do painel oferece dois jeitos de trabalhar:

• A escolha fica salva no seu perfil e vale nas próximas vezes que você abrir o modo atendimento.
• A opção Alta performance só aparece em telas com pelo menos 1024 pixels de largura. Em telas menores, o painel mostra o modo Simples, sem mexer na sua preferência: ela volta a valer em uma tela larga.
• No palco, o arranjo dos cards é lembrado durante a sessão do navegador: recarregar a página devolve a tela como estava.

O funcionamento completo dos dois modos, do kanban, do palco e do chat está em Atendimento.

Tema claro e escuro

O ChatISP tem tema claro e tema escuro em todo o sistema, inclusive no modo atendimento, no palco, no painel do Copiloto e nas janelas de diálogo.

• Como alternar: pelo botão de sol e lua no topo da tela (ou no rodapé do menu do modo atendimento). A troca é instantânea, sem recarregar a página.
• A escolha é da sua conta: o tema fica salvo no seu usuário e acompanha você em qualquer computador ou navegador em que você entrar.
• Telas de entrada: a tela de login e a de boas-vindas também têm o botão de tema. Antes da primeira escolha, elas seguem o tema do sistema operacional do computador.
• Primeiro administrador: o tema escolhido na tela de boas-vindas vira a preferência da conta criada ali, e o assistente e o painel já abrem nele.
• Logotipo e ícone da aba trocam sozinhos entre as versões clara e escura.

Idiomas

O ChatISP é trilíngue: Português, Inglês (English) e Espanhol (Español). Todas as telas, mensagens de erro, avisos e a página de Novidades existem nos três idiomas.

O idioma do sistema vale para o painel inteiro e para todos os usuários, inclusive a tela de login.

Uso no celular e no tablet

O painel é responsivo e funciona no navegador do celular e do tablet, sem instalar nada. A interface se adapta à largura da tela:

• Até 900 pixels de largura (celulares e tablets em pé): o menu lateral fica sempre recolhido, só com ícones, para sobrar espaço para o conteúdo. A faixa de licença do topo também se esconde nessa largura.
• Telas de toque: os cartões de dica que aparecem ao passar o mouse ficam desligados, porque não existe "passar o mouse" no toque. Os ícones continuam com o nome acessível para leitores de tela.
• Modo atendimento: abaixo de 1024 pixels, o painel mostra o modo Simples (kanban), mesmo que a sua preferência seja Alta performance. Em telas bem estreitas, o topo do painel quebra em duas linhas para o seletor de modo e os filtros caberem.
• Copiloto: em telas de celular, o painel do Copiloto aberto ocupa a tela inteira; feche-o pelo mesmo botão para voltar ao sistema.

Alertas sonoros e avisos visuais

O ChatISP avisa a equipe do que pede atenção por som, por cartões na tela e pelo próprio ícone do sistema. Os avisos funcionam com o painel aberto em uma aba do navegador, mesmo que ela esteja em segundo plano.

Tipos de aviso sonoro

Para cada aviso se escolhe um som (Suave, Gota, Sino, Campainha, Cristal, Alerta, Toque de telefone ou Sem som), o Volume e o botão Ouvir para testar.

Onde configurar

1. Padrão do sistema: em Configurações, aba Atendimento, cartão Alertas sonoros ("Som padrão de cada aviso do painel de atendimento. Cada atendente pode ajustar os seus em Minha conta."). Exige a permissão Configurações.
2. Escolha de cada pessoa: em Minha conta, cartão Alertas sonoros. Por padrão vale Usar os sons padrão do sistema; desligue essa opção para escolher os seus sons e volumes.

Avisos visuais

• Ícone da aba do navegador: pulsa em vermelho enquanto houver conversa na fila, mensagem não lida nas suas conversas ou OS pendente para você. Com a aba em segundo plano, o ícone fica vermelho fixo, para o alerta continuar visível de longe.
• Logotipo do menu: os pontos do símbolo do ChatISP se movem e pulsam enquanto houver atendimento pedindo atenção (fila ou mensagens não lidas suas).
• Contadores do menu: os números de Ordens de serviço e das separações de Conversas se atualizam sozinhos.
• Lembretes da agenda: na hora marcada, um cartão aparece no canto da tela com o título do compromisso, o tipo, a hora, a antecedência e o cliente, e os botões Ver (abre o compromisso) e Link (quando o compromisso tem link de reunião). O cartão some sozinho depois de 2 minutos e não se repete em outras telas ou abas do mesmo navegador.

Faixa de licença

Para quem tem a permissão Configurações, o topo de todas as telas pode mostrar uma faixa com o estado da licença. O restante da equipe nunca vê essa faixa.

Registrar agora! abre a página de registro em chatisp.com.br em uma nova aba, já com o token da instalação. A faixa não aparece em telas com menos de 900 pixels de largura. Quando a licença deixa de valer, a faixa dá lugar à tela de licença. Tudo sobre teste, registro e bloqueio está em Licença e registro.

Página Novidades

A página Novidades ("Acompanhe a evolução do ChatISP") é o histórico de lançamentos do produto em forma de linha do tempo: do marco mais recente, no topo, aos mais antigos. É o jeito mais rápido de descobrir o que mudou no sistema depois de uma atualização.

1. No menu lateral, seção Administração, clique em Novidades (ícone de megafone, último item).
2. Role a página: cada marco traz a data, um título e a lista do que mudou, em linguagem de quem usa o sistema.

• No computador, os marcos alternam entre os dois lados da linha do tempo, com animação de entrada ao rolar; no celular, ficam em coluna única.
• O conteúdo segue o idioma do sistema (Português, Inglês ou Espanhol).
• O perfil Administrador vê a página sempre. Para os demais perfis, ela depende da permissão Novidades do sistema, que nasce desligada e pode ser ligada na tela Perfis de acesso.

Dicas e atalhos

Dicas na tela

• Cartão de dica do menu: com o menu recolhido, passar o mouse sobre um ícone mostra um cartão com o nome do item e uma frase sobre para que ele serve. Botões que são só ícone (pausa, sair, tema, Minha conta) mostram o cartão mesmo com o menu expandido. No trilho do cliente do palco, o cartão abre para a esquerda e traz o resumo do cliente selecionado.
• Dicas de botão: os botões de ícone do topo e das telas mostram uma etiqueta curta ao passar o mouse (por exemplo, Copiloto, Tema, Ouvir).
• Textos de ajuda nos campos: muitos campos de formulário trazem uma linha de explicação logo abaixo; os erros aparecem no próprio campo, em vermelho.

Teclado