Chat do site

O chat do site (também chamado de widget) é o balão de conversa que aparece no canto do seu site. É por ele que o visitante fala com você sem sair da página.

Ele é um dos tipos de canal de atendimento: cada chat do site é um canal, com aparência, textos, equipe e regras próprios. Você pode ter mais de um, por exemplo um no site institucional e outro na loja virtual.

Como acessar

1. No menu lateral, clique em Atendimento.
2. Clique em Canais.

Depois:

• Criar: clique em Novo canal e escolha Chat do site. Ao salvar, o chat e o canal são criados juntos, com o nome informado em Nome do canal.
• Editar: clique em Configurar na linha do chat.
• Excluir: o botão Excluir, na lista, apaga o chat. Os sites que usam o código dele deixam de mostrar o balão; os atendimentos já feitos continuam.

A tela tem um menu lateral por assunto. O botão Salvar, no topo, grava tudo de uma vez, e o botão de voltar leva de volta a Canais.

1. Voltar: leva de volta a Canais.
2. Salvar: grava tudo de uma vez.
3. Menu de seções: cada assunto do chat tem a sua seção.
4. Formulário: os campos da seção escolhida. Nas seções Design e Formulário de contato, a prévia do chat aparece ao lado.

Seção	O que tem
Preferências	Nome do canal, idioma e comportamento do chat
Design	Cores, posição, estilo, textos, operadores e marca
Formulário de contato	Dados pedidos antes da conversa, mensagem offline e anexos
Botões pré-chat	Frases prontas para o visitante começar a conversa
Omni-channel	Atalhos para outros canais, como WhatsApp e Instagram
Atividades automáticas	Regras que valem só para este chat
Inteligência artificial	O robô que responde sozinho e a sugestão de resposta ao operador
Central de ajuda	Artigos na tela inicial do chat
Operadores e departamento	Quem atende, em qual departamento a conversa cai e a resposta automática
Avaliação de qualidade	O aviso de resolvido e o pedido de avaliação
Resgatar chat	O resgate de conversa sem resposta
Notificações	Os e-mails que a equipe recebe sobre o atendimento
Instalação	O código para colar no site e os domínios autorizados
Integração para desenvolvedores	Comandos para o seu site conversar com o chat

Algumas seções só aparecem para quem tem permissão de configurar o atendimento.

Preferências

1. Nome do canal e Idioma do widget.
2. As chaves Som de Notificação, Esconder quando não houver operador online, Mostrar o que o visitante digita e Mostrar dentro do sistema da própria empresa.
3. Esconder nestas páginas.
4. Auto-abrir após (segundos) e Abrir o chat com mensagem do atendente.

Cada campo, em detalhe:

• Nome do canal: identifica o chat para a sua equipe. Aparece na lista de canais e ao lado de cada conversa, indicando de onde o cliente falou. O visitante não vê esse nome: para ele valem o Título do Header e o Nome da Empresa
• Idioma do widget: português, inglês ou espanhol
• Som de Notificação: avisa o visitante quando chega resposta
• Esconder quando não houver operador online: o balão só aparece se houver alguém para atender
• Mostrar o que o visitante digita: ligado, quem atende vê o texto que o visitante está digitando antes de ele enviar
• Mostrar dentro do sistema da própria empresa: desligado por padrão. Quem está logado na empresa dona do chat não vê o próprio chat de suporte dentro do sistema, para o botão não ficar por cima da tela de atendimento. Ligue para testar o chat no próprio sistema. Nos sites e no portal do cliente o chat aparece normalmente
• Esconder nestas páginas: o chat não aparece quando o endereço da página contém um destes trechos, por exemplo /checkout. Digite um e pressione Enter
• Auto-abrir após (segundos): abre a janela sozinha depois de um tempo na página. 0 desliga
• Abrir o chat com mensagem do atendente: quando o atendente responde e o visitante está com o chat fechado, a janela abre sozinha. Não abrir (padrão) mantém só o contador e o som; Só no computador abre no computador e, no celular, onde o chat cobre a tela, avisa só com o contador e o som; No computador e no celular abre nos dois

Design

1. Cor Principal e Cor Secundária.
2. Ícone da origem.
3. Posição, Estilo, Tamanho e Fonte.
4. Texto do Botão e Ícone do Botão (URL).
5. Textos: nome da empresa, logo, títulos e mensagens de boas-vindas.
6. Prévia do widget: mostra como o visitante vê o chat, com operador disponível e sem ninguém para atender.

Campo	Para que serve
Cor Principal e Cor Secundária	Cores do balão e do cabeçalho; a secundária pinta os links e botões de dentro do chat
Ícone da origem	Aparece ao lado do nome do canal na tela de quem atende. Escolha entre mais de cinquenta ícones; o primeiro (globo) usa o padrão do tipo de canal
Posição	Inferior direito ou inferior esquerdo
Estilo	Bolha (o balão redondo) ou barra
Tamanho	Compacto, médio ou grande
Fonte	Tipografia usada dentro do chat
Texto do Botão e Ícone do Botão (URL)	O que aparece antes de o visitante abrir

Nos Textos:

• Nome da Empresa e Logo (URL): identificação no cabeçalho
• Título do Header e Subtítulo do Header: as duas linhas do topo da janela
• Título de Boas-vindas e Mensagem de Boas-vindas: a primeira coisa que o visitante lê
• Texto de Tempo de Resposta: a expectativa que você quer passar (ex.: “Costumamos responder em poucos minutos”)

Em Operadores e marca:

1. Operadores e marca: nomes e fotos dos operadores, marca da plataforma, ampliar e arrastar o chat.
2. CSS Customizado: o campo CSS, para ajustes finos de estilo.

Em detalhe:

• Mostrar Nomes dos Operadores: ligado por padrão. Desligado, as respostas chegam sem o nome de quem atende e o botão em barra diz só “Atendimento em andamento”, sem dizer com quem
• Mostrar Fotos dos Operadores: a imagem de quem atende aparece ao lado de cada resposta no chat do cliente. A foto é a do perfil do usuário (Perfil → foto); quem não tem foto cadastrada aparece sem imagem
• Exibir marca da plataforma: mostra a assinatura da plataforma no rodapé do chat. Desligue para o chat aparecer só com a sua marca
• Permitir ampliar o chat: o visitante expande a conversa para quase toda a tela e restaura no mesmo botão. Útil quando o histórico é longo
• Permitir arrastar o chat pela tela: o visitante move o chat pelo cabeçalho. Ajuda quando o balão cobre justamente o que a pessoa precisa ver

Para ajustes finos de estilo, o campo CSS aceita regras adicionais aplicadas ao chat. É opcional e avançado.

Dica

A tela mostra uma prévia ao vivo ao lado dos campos de Design e do Formulário de contato: cada mudança de cor ou texto aparece na hora, antes de salvar. São dois exemplos, um embaixo do outro, mostrando como o visitante vê com operador disponível e sem ninguém para atender, para você conferir a mensagem offline sem precisar simular o horário fechado.

Formulário de contato

1. Exigir Nome, Exigir Email e Exigir Telefone.
2. Mensagem Pré-chat.
3. Mensagem Offline.
4. Permitir anexos do visitante.

Formulário pré-chat

São os dados pedidos ao visitante antes de a conversa começar:

• Exigir Nome, Exigir Email e Exigir Telefone: ligue os que o visitante precisa informar. Com todos desligados, a conversa começa sem formulário
• Mensagem Pré-chat: texto acima do formulário (ex.: “Preencha os dados para iniciar o atendimento”)

O formulário só pede o que o site ainda não sabe. Se o visitante já foi identificado pelo site, os dados que vieram na identificação não são perguntados de novo; quando tudo o que é exigido já veio, o formulário nem aparece.

Sem operador online

A Mensagem Offline é o que aparece no chat fora do horário de atendimento ou quando não há ninguém online.

Anexos

Permitir anexos do visitante libera o clipe, a gravação de áudio e o colar imagem no chat do cliente. Desligado, o visitante não consegue enviar arquivos.

Por padrão, cada arquivo pode ter até 10 MB e cada mensagem leva até 5 anexos. O chat do cliente avisa com esses mesmos números quando um arquivo não passa. Cada mensagem de texto tem até 10.000 caracteres.

Botões pré-chat

São frases prontas que aparecem como botões antes de a conversa começar (ex.: “Tenho uma dúvida”, “Quero um orçamento”). O visitante clica e a frase é enviada como a primeira mensagem dele.

1. Texto do botão: a frase que o visitante vê e que é enviada ao clicar.
2. Lixeira: remove o botão.
3. Adicionar botão: inclui mais uma frase.

Omni-channel

Oferece ao visitante outros canais além do chat, como atalhos que aparecem ao clicar no botão do chat. Ligue os que quiser e informe o contato de cada um:

Canal	O que informar
WhatsApp	Número com DDI (ex.: 5584999998888)
Instagram	Usuário (ex.: minhaempresa)
Facebook	Página (ex.: minhaempresa)
Telegram	Usuário do bot ou da conta
Telefone	Número para ligação
E-mail	Endereço de e-mail

Cada atalho abre o aplicativo correspondente já com o seu contato.

1. Chave de cada canal: liga o atalho.
2. Campo do contato: o número, o usuário ou o endereço do canal.

Atividades automáticas

São automações que valem só para este chat, montadas aqui mesmo. As que valem para todos os canais ficam em Atendimento → Automações.

É aqui que se monta o convite proativo: o chat abre sozinho para quem está há um tempo numa página, com a mensagem que você escrever, e cada página pode ter o seu texto. Veja Convite proativo.

Inteligência artificial

Liga o chatbot, que responde o visitante sozinho com um agente de IA e passa para um operador quando o assunto exige, e o copiloto, que escreve a resposta para o operador usar, editar ou descartar. Funciona igual nos outros canais: veja Inteligência artificial no atendimento.

Central de ajuda

1. Exibir artigos na tela inicial do widget
2. Placeholder da busca

Em detalhe:

• Exibir artigos na tela inicial do widget: mostra os artigos da Central de Ajuda antes da conversa
• Placeholder da busca: o texto de exemplo dentro do campo de busca de artigos (ex.: “Buscar artigos…”)

Operadores e departamento

Quem atende as conversas deste chat e em qual departamento elas caem, editados na própria tela do chat:

• Departamento padrão: as conversas já nascem nesse departamento. Em branco, o chat não fixa departamento
• Operadores delegados: quem atende este chat. Sem operador delegado, atendem os operadores do departamento; sem eles também, qualquer operador online
• Responder automaticamente quando não houver ninguém para atender: escolha a resposta automática, enviada uma vez, na abertura do atendimento, fora do horário ou sem operador online

Com o canal inativo na lista de Canais, a tela avisa que essas regras não valem enquanto ele estiver assim.

Avaliação de qualidade

O primeiro quadro resume a configuração geral, que vale para todos os canais: o aviso de atendimento resolvido, a pesquisa de satisfação, a pergunta, a escala, quando a avaliação é pedida e o agradecimento. Para mudar, use Configurar em Ajustes (veja Ajustes).

O quadro Neste canal deixa este chat ter a sua regra, com Avisar que o atendimento foi resolvido e Pedir a avaliação do atendimento: Seguir a configuração geral, Ligado neste canal ou Desligado neste canal.

Resgatar chat e Notificações

São configurações gerais, que valem para todos os canais. Resgatar chat mostra o tempo do resgate de conversa sem resposta, com o atalho para mudar em Ajustes. Notificações traz os e-mails que a equipe recebe sobre o atendimento, os mesmos da aba Notificações de Ajustes, e salva junto com o chat.

Instalação

Instalando no site

Em Instalação fica o Código de Instalação, que aparece depois de salvar o chat pela primeira vez. Copie a Tag HTML e cole antes do fechamento da tag </body> em todas as páginas onde o balão deve aparecer.

O código é diferente para cada chat. Se você criou dois, cada site recebe o seu.

1. Tag HTML: o código para colar no site, com o botão de copiar.
2. Console do navegador: o código para testar e para instalar dentro do sistema.
3. Domínios autorizados: os endereços onde o chat pode funcionar.

Domínios autorizados (opcional)

O código de instalação é público: quem abrir o seu site consegue copiá-lo e colar em outro endereço, e a partir dali usar o seu atendimento, ocupando a fila dos seus operadores com conversas que não são suas.

O campo Domínios autorizados, na seção Instalação, fecha essa porta. Informe os endereços onde o chat deve funcionar e ele deixa de abrir em qualquer outro:

• cliente.com.br vale também para www.cliente.com.br e loja.cliente.com.br
• Vários endereços podem ser informados; digite um e pressione Enter

Deixando o campo vazio, o chat funciona em qualquer site. É assim que ele vem, e para a maioria dos casos está bom.

Cuidado

Preenchendo, informe todos os endereços onde o chat aparece hoje, inclusive o do sistema quando o chat estiver instalado dentro dele. Endereço que ficar de fora simplesmente não mostra o balão, e o visitante não vê aviso nenhum.

Instalando dentro do próprio sistema

Além de sites, o chat pode aparecer para os seus clientes dentro do sistema. É assim que uma revenda atende quem usa a plataforma dela.

1. Copie o código da parte Console do navegador (JavaScript puro, sem a tag <script>)
2. Vá em Sistema → Configuração → aba Suporte ao Cliente
3. Cole em Código Javascript do chat de suporte e clique em Salvar suporte

Use o botão certo

Salve pelo Salvar suporte, dentro da aba, e não pelo Salvar do topo da tela. E o chat só aparece no próximo acesso: quem estiver com o sistema aberto precisa sair e entrar de novo.

Identificando quem está falando

Sem identificação, o atendimento chega como “Visitante”, sem nome, sem e-mail e sem saber de qual empresa. Para resolver, o site informa ao chat quem é a pessoa, com o código abaixo colocado antes da linha que carrega o chat:

window.SIGEFLEX_IDENTIFY = { name: "Maria Souza", email: "[email protected]", phone: "5548999990000", company: "Empresa Ltda" };

Campo	O que é
name	Nome da pessoa
email	E-mail
phone	Telefone
company	Empresa
distinct_id	Um código seu que identifica a pessoa (por exemplo, o código do cliente no seu site). Serve para reconhecê-la mesmo sem e-mail

Todos são opcionais: informe o que o seu site souber. A partir daí o atendimento chega identificado, o operador vê os dados no painel da direita sem precisar perguntar, e o formulário pré-chat deixa de pedir o que já veio.

Quando o código está dentro do sistema (o campo Código Javascript do chat de suporte), não é preciso escrever os dados de ninguém: o sistema troca as marcações abaixo pelos dados de quem está logado antes de entregar o código ao navegador.

Marcação	Vira
{userName}	nome do usuário logado
{userEmail}	e-mail dele
{companyName}	nome da empresa e CNPJ

window.SIGEFLEX_IDENTIFY = { name: "{userName}", email: "{userEmail}", company: "{companyName}" };

Nesse caso o sistema também confirma ao chat quem é a pessoa, e é isso que faz o chat reencontrar as conversas dela mesmo quando ela entra por outro computador.

Dica

As marcações valem para qualquer chat colado naquele campo, não só o do sistema. Se você usa outra ferramenta de chat, o mesmo mecanismo serve para passar os dados do cliente a ela.

Integração para desenvolvedores

Na seção Integração para desenvolvedores há o exemplo do SDK JavaScript, pronto para copiar. Depois que o chat carrega, o seu site consegue conversar com ele:

Comando	O que faz
$sigeflex.push(["set", "user:nickname", "Maria"])	Informa o nome do visitante
$sigeflex.push(["set", "user:email", "[email protected]"])	Informa o e-mail
$sigeflex.push(["set", "user:phone", "5548999990000"])	Informa o telefone
$sigeflex.push(["do", "chat:open"])	Abre o chat
$sigeflex.push(["do", "chat:close"])	Minimiza o chat
$sigeflex.push(["do", "message:send", "Olá!"])	Envia uma mensagem em nome do visitante
$sigeflex.push(["on", "message:received", funcao])	Chama a sua função a cada mensagem recebida

Serve, por exemplo, para um botão “Fale conosco” do seu site abrir o chat, ou para identificar o visitante depois que ele faz login sem recarregar a página. É assunto para quem cuida do código do site.

O que o visitante vê

Na fila

1. Abrir em janela: leva a conversa para uma janela própria. Veja Conversa em janela separada.
2. Encerrar atendimento (×): pergunta antes de encerrar.
3. Minimizar (traço): esconde a conversa, sem encerrar nada.
4. Posição na fila: o aviso Sua posição na fila e a Espera estimada.

Enquanto espera um atendente, o chat do visitante mostra “Conectando você a um atendente…” e, quando o sistema tem a informação, Sua posição na fila e Espera estimada. O aviso de fila enviado como mensagem segue o que estiver configurado em Ajustes.

O botão durante o atendimento

No estilo barra, enquanto há atendimento em curso o botão troca o texto configurado por “Falando com [nome do atendente]”. Com o chat minimizado é só ele que fica à vista, e assim o cliente sabe que tem alguém com ele. Ao encerrar, volta o texto configurado.

No estilo balão não há texto, então nada muda.

Atendimento resolvido e finalizado

Quando o operador resolve, o chat do visitante mostra o aviso Atendimento resolvido, explicando que, se ainda precisar de algo, é só responder ali. Com a avaliação (CSAT) ligada, aparecem as estrelas para ele dar a nota.

1. Estrelas: a pergunta de avaliação e as notas.
2. Atendimento resolvido: o aviso de que o atendente concluiu. Os dois seguem a Avaliação de qualidade deste chat.

Quando o atendimento é encerrado, aparece o cartão Atendimento finalizado com dois botões: Reabrir atendimento, que retoma a mesma conversa, e Novo atendimento, que começa outra.

Aviso de resposta com o chat minimizado

Quando o atendimento fica parado e está prestes a ser encerrado por inatividade, o chat do cliente mostra um aviso destacado com a contagem regressiva até o fechamento. Ele some assim que alguém escreve: responder é o que segura o atendimento. Recarregar a página não apaga a contagem; ela continua de onde estava.

Quando a resposta chega e o visitante está com o chat fechado, o botão ganha um contador vermelho com quantas mensagens novas existem (a partir de dez, mostra “9+”). O número some assim que ele abre a conversa.

1. Contador vermelho: quantas respostas o visitante ainda não leu.

É o que garante que a pessoa perceba a resposta mesmo tendo saído da tela. O som toca uma vez e só avisa quem estava por perto na hora.

Nota

O contador sobrevive a recarregar a página ou trocar de página no site: o sistema sabe quais respostas o cliente ainda não leu e mostra o número de novo ao carregar. Ele zera quando o cliente abre a conversa.

Como o visitante fecha a conversa

O cabeçalho do chat tem dois botões, que fazem coisas diferentes:

• O botão de minimizar (traço) esconde a conversa e o balão volta. Nada é encerrado, e o visitante continua na fila ou no atendimento
• O × encerra: pergunta antes (“Encerrar este atendimento?”) e só então finaliza. A confirmação evita que um clique acidental derrube o atendimento

Nota

Enquanto a conversa está aberta, o balão desaparece. Ele volta assim que o visitante minimiza.

Conversa em janela separada

O botão Abrir em janela, no cabeçalho do chat, tira a conversa da página e abre numa janela própria do navegador, com o mesmo atendimento. Enquanto essa janela está aberta, o chat some da página do site, mesmo que o visitante navegue para outra página.

Para voltar, basta fechar a janela ou clicar em Voltar para o site, dentro dela: o chat reaparece aberto na página, com tudo o que foi conversado. Em telas pequenas, como no celular, o botão não aparece, porque o chat já ocupa a tela inteira.

Imagens na conversa

Clicar numa imagem da conversa abre a imagem ampliada por cima da página. No canto ficam os botões de baixar e de fechar; a tecla Esc ou um clique fora da imagem também fecham.

Continuando uma conversa

Quando o visitante volta ao site, o chat reconhece que ele já falou com você e oferece continuar um atendimento anterior ou abrir um novo, mostrando até as 10 conversas mais recentes, as abertas primeiro.

A lista vem do servidor, não do navegador: o que fica guardado ali é só quem é o contato. E são as conversas daquele chat: o que a pessoa tratou por WhatsApp fica no WhatsApp, porque não há como afirmar que o número de quem escreveu é a mesma pessoa do navegador.

Quando o site identifica quem está falando (o quadro acima), cada pessoa tem o seu histórico no mesmo navegador. Num computador compartilhado (o balcão da loja, a recepção), um usuário entrar não apaga as conversas do outro: cada um volta a ver as suas ao entrar de novo.

Computador novo ou navegador limpo

Quando o chat roda em área com login (dentro do sistema ou no Portal do Cliente), o próprio servidor reconhece a pessoa e devolve as conversas dela mesmo num computador recém-formatado. Nesses casos não há nada a fazer.

Em site aberto, sem login, o reconhecimento é só pelo navegador: apagar os dados começa do zero e o chat não mostra mais as conversas antigas. Elas não se perderam: continuam na fila e na busca do atendente, e quem usa o Portal do Cliente pode retomá-las por lá, pelo botão Continuar pelo chat.

Ao iniciar uma conversa, a barra do topo mostra Novo atendimento com o botão Voltar, que leva de volta à tela inicial do chat, com os artigos e as conversas anteriores. Assim ninguém fica preso na conversa em branco por ter clicado em “Iniciar conversa” sem querer.