WebChat no seu site

O WebChat coloca um botão de conversa no seu site. Quem clica fala com a sua equipe (ou com o seu chatbot e a sua IA) direto do navegador, sem precisar de WhatsApp ou número de telefone. As conversas chegam ao Jarvis como qualquer outro canal.

Indicado para sites institucionais, lojas virtuais, landing pages e áreas do cliente.

1. Criar o canal e o widget#

1. Acesse Cadastros → Canais e clique em Adicionar.
2. Escolha WebChat, dê um nome e salve.
3. Abra o widget criado, preencha as abas descritas abaixo e confira o Preview.
4. Clique em Criar Widget.

As abas Instalação e Sessões só aparecem depois que o widget é salvo.

2. Personalizar#

Aba Configuração#

• Textos: nome interno, subtítulo do topo, mensagem de boas-vindas, mensagem fora do horário, título do formulário inicial e texto flutuante acima do botão.
• Logo ou avatar: URL da imagem exibida no chat.
• Posição: botão no canto direito ou esquerdo.
• Widget ativo: liga ou desliga o chat no site.
• Exigir nome, telefone e e-mail: escolha quais dados o visitante precisa informar. Se desligar todos, ele conversa sem preencher nada.
• Ocultar botão padrão: esconde o botão do Jarvis para você usar um botão próprio.
• Domínios permitidos: digite seu domínio (ex.: meusite.com.br) e pressione Enter. Recomendado: com a lista vazia, qualquer site poderia usar o seu código.

Aba Aparência#

Defina as duas cores de fundo do chat e as cores de texto. Se não escolher a cor do texto, o sistema usa a de melhor contraste.

Aba Comportamento#

• Abrir automaticamente depois de alguns segundos (valor em milissegundos: 5000 = 5 segundos).
• Simular digitação do atendente.
• Som de notificação.
• Rastreamento de visitantes (ligado por padrão).
• Mensagem automática enviada quando o visitante conclui o formulário. Ela inicia o atendimento e aciona o chatbot ou a fila do canal.

3. Instalar no site#

1. Abra a aba Instalação e copie o código.
2. Cole-o no HTML do seu site, logo antes de </body>, em todas as páginas onde o chat deve aparecer.
3. Salve, recarregue o site e veja o botão no canto escolhido.

O código tem este formato (o seu já vem preenchido na tela):

<script src="https://ENDERECO-DO-SISTEMA/webchat/public/widget.js" data-widget-id="SEU-WIDGET-ID"></script>

4. Recursos avançados (opcional)#

Para quem tem um desenvolvedor:

• Botão próprio: com Ocultar botão padrão ligado, chame WebChat.open() em qualquer botão do seu site. Dá para passar nome, telefone e e-mail para pular o formulário de quem já está logado.
• Comandos: WebChat.open(), WebChat.close(), WebChat.toggle() e WebChat.init({ widgetId }).
• Eventos: webchat:opened, webchat:closed, webchat:message e webchat:unread (útil para mostrar um contador de não lidas).
• Abertura automática: opções autoOpen e autoOpenDelay na inicialização.

5. Acompanhar#

• Aba Sessões: lista de conversas, com visitante, telefone, status, última atividade e ticket.
• Relatórios → WebChat (administradores e supervisores): visitantes online, histórico e mapa aproximado. Dá para ver a página em que o visitante está e enviar um Chamar visitante enquanto ele ainda estiver no site.

Problemas comuns#