Widget do site

O 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.

Você pode ter mais de um widget — por exemplo, um no site institucional e outro na loja virtual, cada um com cores, textos e equipe diferentes.

Como acessar

No menu lateral, clique em Atendimento → Configurações → Widgets. Para editar um, clique nele; para criar, use Novo widget.

Aparência

Campo	Para que serve
Nome do widget	Identificação interna, o visitante não vê
Cor principal e Cor secundária	Cores do balão e do cabeçalho
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 widget
Texto do botão e Ícone do botão	O que aparece antes de o visitante abrir
Nome da empresa e Logo	Identificação no cabeçalho
Título e Subtítulo do cabeçalho	As duas linhas do topo da janela
Ícone da origem	Aparece ao lado do nome do widget na tela de quem atende. Escolha entre mais de cinquenta ícones; o primeiro (globo) usa o padrão do tipo de canal
CSS	Ajustes finos de estilo, para quem quiser

Textos

• 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”)
• Mensagem offline — o que aparece fora do horário de atendimento
• Mensagem pré-chat — texto acima do formulário de identificação
• Idioma do widget — português, inglês ou espanhol

Comportamento

• Som de notificação — avisa o visitante quando chega resposta
• Esconder quando offline — o balão só aparece se houver alguém para atender
• 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
• Fotos dos operadores — com as fotos ligadas, 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
• 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. O tamanho máximo, os tipos aceitos e a quantidade por mensagem vêm de Atendimento → Configurações Gerais → Anexos, e o chat do cliente avisa com esses mesmos números quando um arquivo não passa
• 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 widget pelo cabeçalho. Ajuda quando o balão cobre justamente o que a pessoa precisa ver
• Auto-abrir após (segundos) — abre a janela sozinha depois de um tempo na página
• Mensagem proativa após (segundos) — envia um convite à conversa sem abrir a janela inteira
• Botões — atalhos que aparecem antes da conversa começar (WhatsApp, Instagram, Facebook, Telegram, telefone, e-mail), levando o visitante direto ao canal que ele preferir

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.

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.

É 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:

• – minimiza: a conversa some da tela e o balão volta. Nada é encerrado, e o visitante continua na fila ou no atendimento
• × 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.

Instalando no site

Na própria tela do widget há o código de instalação. Copie 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 widget. Se você criou dois widgets, cada site recebe o seu.

Dica

A tela mostra uma prévia ao vivo ao lado dos campos: cada mudança de cor ou texto aparece na hora, antes de salvar. São dois exemplos, um embaixo do outro — 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.

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 do código de instalação, fecha essa porta. Informe os endereços onde o widget deve funcionar e o chat 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 widget 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 widget 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 — o visitante não vê aviso nenhum.

Instalando dentro do próprio sistema

Além de sites, o widget 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 seção 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 — 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 sistema substitui variáveis no código antes de entregá-lo ao navegador:

Variável	Vira
{userName}	nome do usuário logado
{userEmail}	e-mail dele
{companyName}	nome da empresa e CNPJ

Escreva o código assim, antes da linha que carrega o widget:

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

A partir daí o atendimento chega identificado, e o operador vê nome, e-mail e empresa no painel da direita sem precisar perguntar.

Dica

As variáveis 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.

Continuando uma conversa

Quando o visitante volta ao site, o widget reconhece que ele já falou com você e oferece continuar um atendimento anterior ou abrir um novo — 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.

Robô de triagem

Cada widget pode ter um robô de atendimento ligado a um agente de IA. Ele responde as primeiras mensagens, entende o motivo do contato e passa para um operador quando o assunto exige — deixando um resumo da conversa na linha do tempo.

Configure em qual situação o robô responde, quantas mensagens ele pode trocar e quais palavras devem passar direto para um humano.