Estudos de Caso Empíricos e Registros de Decisão (ADRs)

Desenvolvendo um WebChat Customizável para Atendimento e Captação de Leads

O WebChat tornou-se uma das principais ferramentas de interação entre empresas e clientes no ambiente digital.

ferramentasobsidianworkflow

Desenvolvendo um WebChat Customizável para Atendimento e Captação de Leads

O WebChat tornou-se uma das principais ferramentas de interação entre empresas e clientes no ambiente digital.

Na prática, ele funciona como um componente plugável que pode ser incorporado em qualquer site, permitindo que visitantes iniciem conversas em tempo real com a empresa.

Além de servir como canal de atendimento, o WebChat também desempenha um papel estratégico na captura e qualificação de leads, mantendo o potencial cliente engajado durante sua jornada de navegação.

Muitas vezes o usuário acessa o site com uma dúvida simples, mas acaba abandonando a página antes de realizar uma compra ou entrar em contato. Um WebChat bem implementado permite capturar esse interesse e transformar uma visita em uma oportunidade comercial.

Webchat aberto

Atendimento Automatizado com Chatbots

Uma das funcionalidades mais comuns em plataformas modernas de WebChat é a utilização de chatbots.

Antes de encaminhar o atendimento para um operador humano, o chatbot pode realizar uma série de tarefas:

Exemplo:

text
Olá, seja bem-vindo!

Qual é o seu nome?
text
Marcelo
text
Qual assunto deseja tratar?

1 - Comercial
2 - Suporte
3 - Financeiro

Ao final desse fluxo, o operador humano já recebe informações relevantes para continuar o atendimento.


Utilizando Fluxos de Conversação

Para tornar a automação flexível, é comum utilizar um mecanismo de fluxos configuráveis.

Nesse modelo, o chatbot não possui regras fixas no código.

Em vez disso, existe um fluxo visual contendo:

Isso permite que a equipe ajuste o comportamento do chatbot sem necessidade de novas publicações do sistema.

Fluxo de execucao

Tela Administrativa para Gerenciamento

Outro componente importante é o painel administrativo.

Ele permite que usuários configurem novos canais de WebChat sem necessidade de alterar código.

Funcionalidades comuns:


Associação de Fluxos

Ao criar um novo canal, é possível definir qual fluxo será utilizado.

Exemplo:

text
Canal:
Site Comercial

Fluxo:
Pré-vendas

Outro canal pode utilizar:

text
Canal:
Portal de Clientes

Fluxo:
Suporte Técnico

Isso permite comportamentos diferentes para cada contexto.

Modo de execução

Domínios Personalizados

Uma funcionalidade muito valorizada por empresas é a utilização de domínios próprios.

Em vez de utilizar uma URL genérica da plataforma:

text
https://webchat.plataforma.com

é possível utilizar:

text
https://webchat.empresadocliente.com.br

Benefícios:

Essa abordagem é comum em soluções SaaS White Label.


Comunicação em Tempo Real com WebSockets

Para que o WebChat funcione de forma fluida, normalmente utiliza-se WebSockets.

Ao abrir o chat:

text
Usuário
    ↓
Conecta no WebSocket
    ↓
Autentica sessão
    ↓
Recebe eventos em tempo real
Webchat socket

Estabelecendo a Sessão

Durante a conexão, informações da sessão são enviadas:

json
{
  "sessionId": "abc123",
  "channelId": "site-comercial"
}

Esses dados permitem identificar corretamente o visitante.


Recebimento de Eventos

Quando uma nova mensagem é enviada:

text
Operador → Cliente

ou

text
Bot → Cliente

um evento é disparado pelo WebSocket.

O frontend recebe esse evento e atualiza a conversa instantaneamente.

Sem necessidade de:

text
Atualizar página
Pressionar F5
Realizar polling constante

Personalização do WebChat

Cada empresa possui sua própria identidade visual.

Por isso, um WebChat moderno deve permitir customizações como:

Exemplo:

text
Empresa A → Azul
Empresa B → Verde
Empresa C → Preto

Tudo utilizando a mesma infraestrutura.


Persistência Durante a Navegação

Um dos erros mais comuns em implementações simples de WebChat é assumir que o usuário permanecerá parado aguardando uma resposta.

Na realidade, o comportamento costuma ser diferente.

Exemplo:

  1. Cliente inicia conversa.
  2. Continua navegando pelo catálogo.
  3. Visualiza outros produtos.
  4. Consulta preços.
  5. Retorna ao chat minutos depois.

O WebChat precisa acompanhar essa jornada.


Manter Conversa Ativa

Mesmo durante mudanças de página, a conversa deve permanecer disponível.

Exemplo:

text
Página Produto A
      ↓
Página Produto B
      ↓
Carrinho
      ↓
Checkout

A conversa continua ativa durante toda a navegação.


Recuperação de Sessão

Caso o navegador seja fechado ou atualizado, a sessão pode ser recuperada através de:

Permitindo que o usuário continue exatamente de onde parou.


Escalabilidade

Um WebChat pode começar atendendo dezenas de usuários e rapidamente evoluir para milhares de conversas simultâneas.

Por isso a arquitetura deve considerar:

Garantindo que o crescimento da operação não comprometa a experiência dos usuários.