Como instalar e configurar o Web Chat do Vambe no seu site
Perfeito, vou criar o artigo do zero. Combinei o seu guia passo a passo com a explicação técnica do desenvolvedor e o que aparece nas capturas.
Como conectar e configurar o Web Chat da Vambe no seu site
O Web Chat da Vambe permite integrar um chat flutuante diretamente na sua página, conectando automaticamente os visitantes a um funil específico dentro da Vambe.
Cada conversa iniciada pelo Web Chat entra diretamente no seu funil, permitindo gerenciar leads, conversas e tickets em um só lugar. Além disso, agora você conta com um editor completo que inclui um painel de pré-visualização ao vivo, onde cada alteração que você fizer na configuração do chat será refletida.
Vantagens principais:
Solicitar dados do cliente antes de iniciar a conversa (e-mail, telefone, nome).
Conectar o chat a um funil específico.
Personalizar completamente a aparência, as seções e o comportamento do chat.
Adicionar abas (tabs) adicionais com links, recursos e atalhos.
Autenticar usuários com segurança por meio de JWT.
Criar o canal de Web Chat
Vá até o menu lateral esquerdo e entre na seção de Canais.
Clique em Adicionar canal.
Selecione Web Chat e depois clique em Conectar.
Será aberta a tela de configuração (Configurando Webchat), onde você poderá personalizar todo o comportamento e a aparência do chat. À direita, você verá sempre o painel Pré-visualizar alterações, que reflete ao vivo cada ajuste que você fizer.
Configuração principal
Nome do canal e funil
Nome do canal — O nome interno com o qual você identificará este Web Chat (por exemplo: Vambe web).
Funil — Selecione o funil para onde irão todos os tickets gerados por este canal. Cada contato que iniciar uma conversa criará um ticket automaticamente e entrará na etapa correspondente do funil.
Informações do assistente
Nome do assistente IA — Nome que o cliente verá na parte superior do Web Chat.
Idioma — Selecione o idioma do Web Chat.
URL do ícone — URL pública da imagem que será exibida como avatar do assistente. Deve apontar diretamente para a imagem.
Solicitação de dados antes de abrir o chat
Você pode pedir informações ao cliente antes que a conversa seja aberta:
Solicitar e-mail
Solicitar telefone
Solicitar nome
Se você ativar uma ou mais dessas opções, o cliente deverá preencher esses dados antes de poder abrir o Web Chat e iniciar a conversa.
Aparência
Cores — Defina a cor primária e secundária do botão e do chat.
Tema — Escolha como o chat será exibido entre Modo claro e Modo escuro.
Opções avançadas
Expanda a seção Avançado para acessar configurações adicionais de posição, fonte, restrições e autenticação.
Posição do botão
Posição X do botão — Distância em px do botão até a borda lateral.
Posição Y do botão — Distância em px do botão até a borda inferior.
Fonte
Fonte — Font-family CSS do webchat. Se deixar em branco, usará a fonte do seu site. Útil quando seu site não define uma fonte e a do navegador é aplicada (Times).
Restrições e rastreamento
Restringir por origem — O webchat funcionará apenas no domínio que você informar. Ao ativar, o campo Domínio permitido.
URL de rastreamento — Registra a URL da página onde o webchat está incorporado.
Mostrar último ticket encerrado — Ao abrir o webchat, mostra o último ticket encerrado do contato quando ele não tiver um ativo.
Mostrar tempo de resposta — Mostra ao visitante o tempo estimado para a primeira resposta com base no seu SLA.
Autenticar usuários com JWT (configuração técnica)
Observação: Esta seção é mais técnica e foi pensada para clientes com uma equipe de desenvolvimento. Se você não precisa validar a identidade dos seus usuários, pode ignorá-la.
Por padrão, o Web Chat pode identificar um usuário por meio de um externalUserId enviado no script. No entanto, expor esse ID diretamente no script pode representar um risco de segurança, já que qualquer pessoa poderia manipulá-lo.
Para resolver isso, a opção Autenticar usuários com JWT permite que, em vez de enviar o externalUserId em texto puro, seu site envie um token assinado. A Vambe valida esse token com um secret compartilhado e confirma que a identidade do usuário é legítima.
Como funciona:
Ative a opção Autenticar usuários com JWT.
JWT Secret — Configure aqui um secret (uma chave). Esse mesmo secret deve ser usado no seu site para assinar o token de autenticação.
Seu site assina o token com esse secret e o envia à Vambe no lugar do
externalUserId.Quando o token chega à Vambe, validamos se a assinatura corresponde ao secret configurado. Se a assinatura for válida, o usuário é autenticado e o Web Chat é carregado. Se o token estiver assinado com um secret diferente, a validação falha e a sessão não é carregada.
Campo do ID do usuário no token
Defina o nome do campo dentro do token assinado onde o ID do usuário está localizado. Isso é configurável porque depende de como as informações estão estruturadas no token do seu site (poderia vir como sub, userId, etc.).
Por exemplo, se o seu token tiver esta estrutura, você deve informar sub:
json
Neste caso, o ID do usuário (user-123) vem no campo sub.
Seções do Web Chat
As Seções são as abas (tabs) que o cliente verá na parte inferior do Web Chat. Você pode adicionar até quatro tabs. A aba de Chat vem por padrão; se você deixar apenas essa, o webchat será exibido diretamente com a visualização de conversa.
Além de Chat, você pode criar abas personalizadas para mostrar diferentes recursos, links e atalhos conforme o que precisar (por exemplo, uma de conhecimento, uma de suporte etc.). As tabs e os blocos podem ser reordenados arrastando-os.
Para cada seção, você pode configurar:
Etiqueta — Nome da aba.
Ícone — Ícone que a representa.
Título e Subtítulo — Textos de cabeçalho da seção.
Blocos — Os elementos que aparecem no corpo da seção.
Tipos de blocos
Dentro de cada seção, você pode adicionar diferentes blocos para montar o conteúdo:
Texto — Um bloco de texto simples (por exemplo, um título de grupo como "Recursos").
Link — Um link para uma URL externa, com seu próprio ícone.
Atalho — Um atalho que leva a outra aba do Web Chat.
CTA de Chat — Um atalho para a visualização do chat.
Buscador de artigos — Um buscador que permite encontrar artigos.
Artigos sugeridos — Mostra artigos sugeridos. Hoje funcionam como links (são configurados com uma URL); no futuro, poderão ser visualizados dentro do próprio Web Chat sem redirecionar para uma página externa.
Cada bloco permite escolher seu ícone, ocupar a largura total e ajustar sua ordem. O painel de pré-visualização mostra ao vivo como cada bloco ficará.
Gerar e inserir o script no seu site
Depois de configurar o Web Chat, vá para a visualização de Conectar para obter o script de instalação.
Copie o script que aparece nessa visualização.
Cole-o no código do seu site, idealmente antes do fechamento da tag
<body>ou conforme indicado pelo seu CMS.Publique as alterações no seu site.
Com o novo formato, o script só precisa do Client ID e do Channel ID; o restante da configuração (cores, seções, textos etc.) é trazido automaticamente da Vambe.
Importante: Qualquer valor que você digitar manualmente no script substituirá a configuração salva na Vambe. Por exemplo, se você definir cores no script, essas cores terão prioridade sobre as configuradas no editor.
Verificar a conexão com o funil
Antes de terminar, certifique-se de que o Web Chat esteja conectado ao funil correto dentro da Vambe. Isso garante que cada contato que iniciar uma conversa:
Crie um ticket automaticamente.
Entre na etapa correta do funil.
Seja gerenciado corretamente por IA ou por executivos.
Depois de verificar, clique em Criar para deixar o canal ativo.
Mais informações: Verificar a conexão com um funil
Atualizado
Isto foi útil?