Aparência
Widget de Atendimento
O **Widget de Atendimento** é uma integração instalada no seu site para captar visitantes e direcioná-los ao canal de atendimento ideal: WhatsApp, WebChat, Instagram ou Messenger. Ao interagir com o widget, o visitante preenche um formulário e é encaminhado conforme o fluxo configurado.
O widget também registra automaticamente a origem da visita e as páginas acessadas pelo cliente, exibindo essas informações diretamente no atendimento.
Pré-requisitos:
- Perfil de administrador na plataforma.
- Acesso ao código do site para instalação do script.
- Ao menos um canal de atendimento configurado.
Acessar a configuração
No menu principal, acesse Ajustes → Integrações e clique em "Configurar" no card "Widget de Atendimento".
Criar um novo widget
Clique em "+ Novo botão" para abrir o modal de criação. Preencha o nome do widget (obrigatório, até 100 caracteres) para identificá-lo na listagem. O processo é dividido em duas etapas: configuração do fluxo e personalização visual.
Etapa 1: Configurar o fluxo
Definir o comportamento
Escolha o que acontece com o visitante após o preenchimento do formulário:
| Comportamento | Descrição | Canais compatíveis |
|---|---|---|
| Exibir opções de assuntos | O visitante escolhe um assunto que direciona para o canal correspondente. | WhatsApp, WebChat, Instagram, Messenger |
| Receber uma mensagem | O visitante é redirecionado ao canal com uma mensagem pré-definida carregada para envio. | WhatsApp, WebChat |
| Enviar uma mensagem | O sistema envia automaticamente um modelo de mensagem ao WhatsApp do visitante após o formulário. | Apenas WhatsApp |
Configurar por tipo de fluxo
Exibir opções de assuntos
- Configuração de assuntos (mínimo 3, máximo 9): cada assunto é vinculado a um canal específico.
- O assunto padrão "Enviar uma mensagem" é fixo e não pode ser removido.
- Os demais assuntos suportam até 35 caracteres cada.
- Ao clicar em um assunto, o visitante é redirecionado ao canal configurado e a mensagem com o nome do assunto é enviada automaticamente.
Receber uma mensagem
- Canal de atendimento: selecione o canal (WhatsApp ou WebChat).
- Mensagem do cliente: texto exibido pré-preenchido no campo de envio do visitante, editável antes do envio. Pré-preenchida com "Olá! Vi o site de vocês e gostaria de mais informações."
Ao utilizar o WebChat como canal, as mesmas regras do canal se aplicam: limites de arquivos, comportamento de sessão e funcionalidades de chat. Consulte o artigo do WebChat para mais detalhes.
Enviar uma mensagem
- Canal de atendimento: apenas WhatsApp.
- Modelo de mensagem: selecione o modelo que será enviado automaticamente ao número informado pelo visitante. Apenas modelos com preenchimento automático em todos os parâmetros são listados.
- Mensagem de agradecimento (obrigatório): exibida ao visitante após o preenchimento do formulário. Escolha entre:
- Exibir mensagem: texto exibido na mesma janela, pré-preenchido com "Obrigado! Seu contato foi registrado e nossa equipe retornará em breve." (até 1000 caracteres).
- Redirecionar para página: redireciona o visitante para uma URL específica. Informe uma URL válida no campo exibido (ex.:
https://exemplo.com.br).
Configurar o formulário de cadastro
O formulário é exibido ao visitante antes do redirecionamento. Os campos disponíveis são os campos padrão da plataforma e os campos personalizados do cadastro de contato:
Campos padrão da plataforma:
| Campo | Rótulo padrão | Situação |
|---|---|---|
| Nome | Nome completo | Exibido e obrigatório (fixo) |
| Telefone | Exibido e obrigatório (fixo) | |
| Opcional, removível | ||
| Opcional, removível |
Campos personalizados: campos configurados no cadastro de contato do CRM, exibidos na seção "Campos personalizados" ao adicionar um novo campo.
Os campos opcionais e personalizados permitem ativar ou desativar a obrigatoriedade individualmente. O formulário suporta até 9 campos no total.
Nos fluxos "Exibir opções de assuntos" e "Receber uma mensagem" com canal WebChat, um código OTP é solicitado ao visitante quando o número de telefone informado já foi utilizado em qualquer webchat ou widget da empresa e o visitante não possui sessão salva no navegador (outro dispositivo, navegador sem histórico ou mais de 30 dias sem acesso). Na primeira utilização do telefone, o visitante entra diretamente sem autenticação adicional.
Consentimento e rastreamento
Exigir consentimento (ativado por padrão): exibe um checkbox com mensagem personalizável no formulário. O visitante precisa marcá-lo para continuar. Texto padrão: "Concordo com o uso dos meus dados para fins de atendimento e comunicações da empresa." (até 100 caracteres).
Rastreamento do cliente (ativado por padrão): coleta a origem e as páginas acessadas no site. Essas informações aparecem no painel de atendimento, no card "Rastreamento".
Botão flutuante (ativado por padrão): exibe o ícone flutuante no canto inferior direito do site. Desative se preferir usar um botão próprio como acionador do widget.
Etapa 2: Personalizar a aparência
- Nome da empresa (obrigatório, até 25 caracteres): pré-preenchido com o nome da conta. Exibido no cabeçalho do widget.
- Mensagem de abertura (obrigatório, até 25 caracteres): pré-preenchida com "Como podemos ajudar?". Texto exibido ao visitante ao expandir o widget.
- Tema: Azul (padrão), Anil, Roxo, Rosa, Vermelho, Laranja, Amarelo, Verde, WhatsApp, Teal ou Preto.
- Imagem de perfil da empresa: exibida ao lado do nome no cabeçalho do widget. Se nenhuma imagem for adicionada, apenas o nome da empresa é exibido.
- Ícone do botão flutuante: pré-selecionado com o ícone de Chat. Selecione outro da biblioteca (Chat, Mensagens, Bot, Fone, WhatsApp) ou faça upload de uma imagem personalizada na aba "Anexo".
Todos os campos vêm pré-preenchidos e podem ser alterados. O preview em tempo real nas abas "Cadastro" e "Início" reflete as alterações antes de salvar.
Clique em "Testar widget" para abrir o modal "Testar widget de atendimento", onde é possível preencher o formulário e testar todas as interações disponíveis.
O teste inicia um atendimento real na plataforma e utiliza as configurações definidas para o canal.
Instalar o widget no site
Após salvar, clique no widget na listagem para abrir as instruções de instalação:
Script: copie o código e cole dentro da tag <head> do seu site.
html
<script type="..." src="..." data-companyid="..." data-widgetid="..."></script>Botões CTA: para acionar o widget em outros pontos do site (banners, botões de chamada etc.), adicione a classe h-widget-trigger ao elemento desejado:
html
<button class="h-widget-trigger">Falar conosco</button>Link público / QR Code: disponibilize um acesso direto ao WebChat por link ou QR Code, sem instalação no site. Ao acessar, o visitante é direcionado a uma página dedicada com o widget centralizado.
No campo "Domínios de instalação", informe os domínios onde o widget deve funcionar (ex.: meusite.com.br, loja.meusite.com.br). Se nenhum domínio for informado, o widget não funcionará em nenhum site.
Após informar os domínios, pode levar 1 a 2 minutos para que o widget passe a funcionar nos endereços cadastrados.
Migrar um widget da versão anterior
Se você utilizava o botão do WhatsApp e tag de rastreamento anterior, os widgets antigos aparecem com o badge "Versão obsoleta" na listagem. Para migrar para a nova versão:
- Abra o widget antigo.
- Clique em "Criar cópia" na faixa de aviso exibida no topo da tela.
- Confirme no modal. O sistema cria automaticamente uma cópia na nova versão com o nome "[nome] - Nova versão" e abre para edição.
A versão anterior permanece disponível após a migração. Ao acessá-la novamente, a faixa passa a exibir: "Uma cópia deste widget já foi criada na nova versão." com o botão "Ir para nova versão".
Após migrar para a nova versão e instalar o novo script no site, remova o script da versão antiga. Manter os dois scripts ativos ao mesmo tempo pode gerar conflitos no funcionamento do widget.