O WebChat permite que você ofereça atendimento diretamente no site da sua empresa, por meio de um widget personalizado que facilita a conexão com os visitantes. Esse canal é ideal para suporte, atendimento comercial e automação via chatbot. Para acessá-lo vá em Configurações > Canais > WebChat.
Por que usar o WebChat?
Com o canal ativo, você pode:
- Automatizar interações com chatbots
Crie fluxos automatizados para responder dúvidas frequentes, qualificar leads ou redirecionar para atendimento humano.
Exemplo: Um cliente acessa seu site fora do horário comercial e recebe automaticamente um menu de opções para obter informações sobre produtos ou registrar sua solicitação. - Oferecer atendimento de suporte
Atenda clientes que buscam ajuda diretamente no seu site, com agilidade e organização.
Exemplo: Um cliente acessa a página de FAQ e, não encontrando a resposta desejada, inicia um chat com a equipe de suporte para resolver o problema. - Realizar atendimento comercial
Use o WebChat para captar leads e conduzi-los até a conversão.
Exemplo: Um cliente entra no site interessado em comprar um produto. O WebChat inicia com uma mensagem de boas-vindas e oferece um botão “Ver promoções”. O cliente clica, interage com o chatbot, visualiza o catálogo e, em seguida, é transferido para um agente comercial que conclui a venda.
Com o canal ativo é possível:
Configurar Aparência e estilo
Nesta etapa, é possível configurar a aparência, as cores, as imagens, as dimensões e o estilo visual da janela do WebChat.
A tela está dividida em três etapas:
1. Nome do chat
Informe o nome que será utilizado para identificar o chat.
2. Cores e Avatar
A seção Cores e avatar permite personalizar a identidade visual do WebChat.
Cor principal: Define a cor principal utilizada na interface do WebChat. Informe ou selecione o código hexadecimal da cor desejada.
Aplicar cor principal ao cabeçalho: Quando habilitada, a cor principal configurada também será aplicada ao cabeçalho da janela do WebChat.
Cor do botão flutuante: Define a cor do botão flutuante utilizado para abrir o WebChat.
Logo: O campo Logo permite adicionar uma imagem para representar a marca ou o serviço no WebChat. Como adicionar:
Clique em Escolher arquivo.
Selecione a imagem desejada no dispositivo.
Verifique o arquivo selecionado no campo de upload. Tamanho máximo: 42 × 42 px
Avatar: O campo Avatar permite definir a imagem utilizada para representar o atendente, assistente ou agente do WebChat. Como adicionar:
Clique em Escolher arquivo.
Selecione a imagem desejada.
Confirme se o arquivo foi carregado corretamente. Tamanho máximo: 42 × 42 px.
3. Dimensões
A seção Dimensões permite definir o tamanho da janela de conversa e seus espaçamentos.
Dimensões personalizadas: Utilize o botão de ativação Dimensões personalizadas para habilitar a configuração manual das dimensões.
Largura: Define a largura da janela de conversa. Exemplo: 400 px.
Altura: Defina a altura da janela de conversa.
As unidades disponíveis são exibidas ao lado dos campos e, no exemplo apresentado, estão configuradas como px (pixels).
- Espaçamento: É possível configurar o espaço entre a janela do WebChat e as bordas da tela.
- Margem inferior: Define a distância entre a parte inferior da janela e a borda inferior da tela. Exemplo: 16 px.
- Margem direita: Define a distância entre a lateral direita da janela e a borda direita da tela. Exemplo: 40 px.
- Personalização usando CSS: A opção Personalize usando CSS permite aplicar regras de CSS para modificar a aparência da janela do WebChat.
Para utilizar esse recurso, ative a opção Personalize usando CSS e insira as propriedades desejadas no campo Editar CSS.
A tela também disponibiliza um link para a documentação, que pode ser consultado para verificar quais elementos podem ser personalizados.
Exemplo de CSS
Ex h1 {
font-size: 11px;
color: #000;
}
Atenção: Alterações realizadas por CSS podem modificar a aparência padrão do WebChat. Utilize regras compatíveis com os elementos disponíveis na documentação.
Após isso, clique em Avançar.
2. Mensagem inicial
A opção Mensagem de boas-vindas permite definir uma mensagem que será apresentada ao usuário no início da conversa.
Respostas rápidas
A opção Respostas rápidas permite disponibilizar opções pré-configuradas para que o usuário possa iniciar uma interação rapidamente.
- Texto: Informe o texto que será exibido no botão da resposta rápida. Esse texto corresponde à opção que o usuário visualizará e poderá selecionar.
- Payload: O campo Payload permite informar um valor adicional associado à resposta rápida. O payload pode ser utilizado para transmitir uma informação específica ao sistema quando a resposta rápida for selecionada.
- Adicionar resposta rápida: Para criar mais opções de respostas rápidas, clique em: Adicionar resposta +. Cada resposta adicionada pode possuir seu próprio Texto e, opcionalmente, um Payload.
- Adição de mídia: A opção Adição de mídia permite configurar conteúdo de mídia na mensagem inicial. Para configurar esse recurso:
Marque a caixa de seleção Adição de mídia.
Expanda a seção utilizando a seta à direita.
Preencha as informações solicitadas. São aceitos PNG, JPG, SVG ou GIF (máx. 42x42 px).
Botões (CTA)
A seção Botões (CTA) permite configurar botões de chamada para ação (Call to Action). Os botões podem ser utilizados para apresentar ações específicas ao usuário diretamente na interface inicial. Para configurar:
Marque Botões (CTA).
Clique na seta para expandir a seção.
Configure os campos disponibilizados.
Cartão
A opção Cartão permite configurar um componente visual em formato de cartão para apresentar informações ao usuário. Para utilizar:
Marque a opção Cartão.
Expanda a seção pela seta localizada à direita.
Preencha as informações solicitadas.
O cartão pode ser utilizado para organizar informações e ações em um componente visual próprio.
Carrossel
A opção Carrossel permite apresentar vários itens em sequência, organizados em cartões que o usuário pode navegar. Para configurar:
Marque a opção Carrossel.
Expanda a seção clicando na seta.
Configure os itens apresentados no carrossel.
Esse recurso é adequado para situações em que é necessário apresentar mais de uma opção ao usuário.
Com isso clique em Próximo passo.
3. Comportamento
Esta é a última etapa.
1.Salvar histórico da conversa
Quando habilitada, permite que o histórico da conversa seja preservado. O cliente poderá continuar a conversa de onde parou e se retornar ao site usando o mesmo navegador e dispositivo. Essa opção é indicada quando se deseja permitir que o usuário retome uma conversa anterior sem precisar iniciar uma nova interação ao retornar ao site.
3. Notificações sonoras
Quando habilitada, o WebChat emite um som sempre que o cliente recebe uma nova mensagem. De acordo com a descrição: Emite um som para o cliente a cada nova mensagem recebida. O usuário também poderá silenciar o chat diretamente na própria janela.
4. Compartilhamento de contexto de tela para análise de IA
Essa configuração permite que a Inteligência Artificial receba informações sobre os elementos presentes na página atual para auxiliar na análise do contexto da interação. Segundo a descrição apresentada na tela, ao habilitar essa opção:
A IA pode receber informações sobre elementos específicos da página.
O recurso permite obter informações mais precisas e contextualizadas.
A IA pode utilizar elementos como tags, IDs ou classes HTML.
O contexto pode ser utilizado para compreender melhor o cenário em tempo real.
O recurso utiliza somente as informações que forem autorizadas.
Por fim, clique em Criar Webchat e pronto! O seu Webchat foi criado.
Lembrando que, agora é possível gravar áudio. Além disso, o Webchat apresenta uma jornada fluida com o WhatsApp, migrando de um aplicativo sem fechar o outro.
Finalizando a configuração
Após seguir todas as etapas, clique em Salvar.
Todos os WebChats criados ficarão salvos na tela principal do canal, em uma lista com:
Título da página;
ID do WebChat;
Data de criação;
Última atualização;
Atendimento atribuído;
Ações disponíveis.
Próximos passos
Para o Atendimento comercial: Atribuir atendimento
Selecione o agente ou grupo responsável pelo atendimento para que todas as mensagens que cheguem por ele sejam atendidas pela pessoa ou time responsável. Saiba mais em Atribuir atendimento da conta.
Configurar embed
Você pode adicionar o WebChat ao seu site de duas maneiras diferentes:
Snippet: copie os códigos gerados para incorporar diretamente no HTML do seu site.
Link: copie a URL direta do WebChat, útil para abrir o chat em uma nova aba ou redirecionar usuários a partir de um botão, por exemplo.
Saiba mais em Como publicar seu fluxo de WebChat.