Webchat – Configuração e Implementação

O Webchat do Invenio Center é uma ferramenta de atendimento digital em tempo real, integrada ao seu site para comunicação instantânea com clientes. Recursos principais:

💬 Troca de mensagens instantâneas com interface personalizável
🔗 Integração com WhatsApp para continuidade do atendimento
📋 Histórico completo de interações
🎨 13 temas visuais para adequar à identidade da empresa
🔒 Autenticação via CSRF para portais com área logada

Após configurado, o Webchat gera um código JavaScript pronto para ser adicionado ao site.

Acessar Configurações

Navegar até o Webchat

No Invenio Center, acesse: Canais > Webchat

Acesso direto: Configurações de Webchat

Escolher a versão

Selecione a versão do Webchat conforme sua necessidade:

Versão	Indicada para
V2	Operações com menor necessidade de personalização
V3	Operações que precisam de sons, aviso flutuante e recursos avançados

A Versão 3 inclui todos os recursos da V2, acrescida de sons de notificação e aviso flutuante.

Configurações por Versão

Versão 2 (Padrão)
Versão 3 (Avançada)

Aparência

Exibição automáticaExibe o WebChat automaticamente após o carregamento da página, com opção de delay (tempo de espera em segundos).

Logotipo no cabeçalhoAdicione ou substitua o logotipo exibido no cabeçalho do chat. Suporta pré-visualização da imagem antes de salvar.

Ícone do botão de aberturaPersonalize o botão que o usuário clica para abrir o chat:

🖼️ Ícone customizado com pré-visualização
⏱️ Delay de exibição (em segundos após carregamento)
📝 Texto do botão de autenticação

Se nenhum texto for definido, o sistema exibirá por padrão: “Iniciar Atendimento”.

Temas VisuaisSelecione o tema para adequar o layout à identidade visual da empresa:

Ver temas disponíveis (13 opções)

Tema	Descrição
Default	Modelo padrão, cores neutras e design equilibrado
Dark	Aparência escura, ideal para baixa luminosidade
Emerald	Tons de verde esmeralda, elegante
Forest	Verde escuro, remete à natureza
Gold	Tonalidade dourada, refinado
Grass	Verde claro, leve e natural
Light Blue	Azul claro, leve e tranquilo
Orange	Tons alaranjados, vibrante
Ruby	Vermelho intenso, forte e dinâmico
Sunset	Tons quentes, inspirado no pôr do sol
Violet	Roxo suave, criativo e moderno
Wine	Vinho profundo, sofisticado
Yellow	Amarelo vibrante, alegre

O tema Default é aplicado automaticamente quando nenhuma outra opção é selecionada.

Botão “Finalizar Atendimento”Exibe a opção para que o cliente encerre o atendimento por conta própria.

Redirecionamento para WhatsAppAdiciona atalho direto para o WhatsApp, com:

📍 Posição do botão: à esquerda ou acima
💬 Mensagem padrão enviada ao abrir a conversa

Fluxo

AutenticaçãoCapture informações antes de iniciar o atendimento. Campos habilitáveis:

👤 Nome
📧 E-mail
📞 Telefone
🪪 CPF/CNPJ

Método de segmentaçãoDefine como o contato é direcionado ao iniciar o chat:

🔀 Método padrão: Cliente escolhe o segmento desejado
🎯 Segmento específico: Contato atribuído automaticamente (ex: “Financeiro”)

Feedback NPSExibe tela de avaliação ao final do atendimento. Resultados disponíveis no relatório “WebChat – Net Promoter Score”.Ver documentação de Relatórios

IdiomaIdiomas disponíveis:

🇧🇷 Português (BR)
🇺🇸 Inglês
🇪🇸 Espanhol
🇫🇷 Francês

Sessão do usuárioMantém o atendimento ativo mesmo se o usuário atualizar ou recarregar a página.

Segurança

Dois métodos de autenticação disponíveis:Autenticação PadrãoUsuário informa manualmente seus dados (nome, e-mail, telefone) antes do atendimento.

Autenticação Automática (CSRF)Recomendada para sites com área logada. Valida o acesso automaticamente via tokens CSRF enviados por JavaScript.Configurações disponíveis:

🔗 URL da API para validação do token
🗂️ Segmento específico por endpoint de autenticação

Código de Integração

Após salvar as configurações, clique em “Implementar” para gerar o script JavaScript:

Script de integração gerado:

<script src="https://webchatapi.robbu.global/v3/chat.js"></script>
<script defer="defer">
  chatRobbu.init("111A111111AA1A11", {
    open: true,
    theme: "ruby",
    wallet_customer_code: "Teste",
    delay: 2000,
    user: {
      wallet_customer_code: "Teste",
      name: "Nome do usuário",
      email: "usuario@exemplo.com.br",
      phone: "11 9999-99999",
      cpf_cnpj: "000.000.000-00",
      csrf_token: "123"
    }
  })
</script>

Para posicionar o chat em local específico da página:

<div id="chat-robbu-container"></div>

Esse elemento define o ponto exato de renderização do Webchat na interface.

Recomendação: Valide a implementação com sua equipe técnica para garantir compatibilidade com o layout do site.

Links Relacionados

Canais de Atendimento

Todos os canais disponíveis

Segmentos

Configuração de segmentos

Fila de Atendimento

Gestão de filas

Relatórios

Relatório NPS e outros

Bibliotecas de Mídias

Gerenciar mídias

Filtros no Invenio Live

Filtrar conversas Webchat

⁉️ Perguntas Frequentes (FAQ)

🆚 Qual a diferença entre a Versão 2 e a Versão 3?

Recurso	V2	V3
Aparência e temas	✅	✅
Autenticação de fluxo	✅	✅
Segurança CSRF	✅	✅
NPS e idiomas	✅	✅
Sons de notificação	❌	✅
Aviso flutuante	❌	✅

Recomendação: Use V3 para operações que precisam de mais engajamento com o visitante.

🎨 O Webchat pode ser personalizado com a identidade visual da empresa?

Sim! As opções de personalização incluem:

🖼️ Logotipo no cabeçalho
🔘 Ícone do botão de abertura
🎨 13 temas visuais predefinidos
🔵 Cores do tema selecionado

Caminho: Invenio Center > Canais > Webchat > Aparência > Selecionar temaO tema Default é aplicado automaticamente quando nenhum outro é selecionado.

⏱️ O que é o delay de exibição e como configurar?

O delay define quantos segundos o Webchat aguarda após o carregamento da página antes de aparecer.Exemplo:

delay: 0 → aparece imediatamente
delay: 3 → aparece após 3 segundos
delay: 2000 (no código JS) → 2000 milissegundos = 2 segundos

Caminho: Invenio Center > Canais > Webchat > Aparência > Ícone do botão > Delay de exibiçãoBenefício: Evita que o chat apareça antes do usuário ter tempo de ver o conteúdo da página.

🔐 Como funciona a autenticação no Webchat?

Dois modos disponíveis:Autenticação Padrão:

Usuário preenche campos manualmente (Nome, E-mail, Telefone, CPF/CNPJ)
Dados ficam disponíveis para o atendente
Configurável quais campos são obrigatórios

Autenticação Automática (CSRF):

Recomendada para portais com área logada
Token CSRF enviado via JavaScript
Usuário autenticado automaticamente, sem preencher formulário
Precisa de URL de API para validação do token

Caminho: Invenio Center > Canais > Webchat > Segurança > Selecionar método

📱 Posso integrar o Webchat com o WhatsApp?

Sim! Configure um botão de redirecionamento para WhatsApp:O que pode ser configurado:

📞 Número do WhatsApp de destino
📍 Posição do botão: à esquerda ou acima
💬 Mensagem padrão pré-preenchida ao abrir

Caminho: Invenio Center > Canais > Webchat > Aparência > Redirecionamento para WhatsAppCaso de uso: Cliente começa no Webchat e opta por continuar via WhatsApp com um clique.

⭐ O Webchat pode ter avaliação de atendimento (NPS)?

Sim. Ao final do atendimento, o NPS é exibido automaticamente.Como funciona:

Atendimento é encerrado
Tela de avaliação é exibida ao cliente
Cliente dá nota e comentário (opcional)
Resultado é registrado no relatório

Relatório: Invenio Center > Relatórios > WebChat – Net Promoter ScoreConsulte: Relatórios no Invenio Center

💻 Como adicionar o Webchat ao site da empresa?

Passos de implementação:

Configure o Webchat no Invenio Center
Clique em “Implementar” ou “Salvar”
Copie o script JavaScript gerado
Cole no HTML do site, dentro da tag body
(Opcional) Adicione div id="chat-robbu-container" para posicionar em local específico
Publique as alterações no site
Acesse a página e verifique se o chat aparece

Caminho: Invenio Center > Canais > Webchat > Implementar > Copiar código

🔔 O que é o aviso flutuante e como configurar?

O aviso flutuante é uma mensagem automática que aparece na tela do Webchat para atrair o visitante.Configurações disponíveis:

📝 Texto: personalizável (ex: “Olá! Posso ajudar?”)
⏱️ Tempo de exibição: em segundos
👁️ Ocultar automaticamente: após o tempo configurado

Onde está: Disponível apenas na Versão 3Caminho: Invenio Center > Canais > Webchat > Versão 3 > Aviso flutuante

🌐 Quais idiomas estão disponíveis?

O Webchat suporta 4 idiomas:

🇧🇷 Português (BR) — padrão
🇺🇸 Inglês
🇪🇸 Espanhol
🇫🇷 Francês

Você pode usar o idioma padrão do ambiente Invenio ou definir um idioma específico para o chat.Caminho: Invenio Center > Canais > Webchat > Fluxo > Idioma

🔄 O que acontece se o usuário atualizar a página?

O atendimento continua normalmente. A sessão do usuário é mantida automaticamente mesmo após recarregamento da página.O cliente não precisa preencher os dados de autenticação novamente e a conversa fica íntegra.Configuração: Invenio Center > Canais > Webchat > Fluxo > Sessão do usuário > Ativar

🔑 O que é o token CSRF e por que é importante?

CSRF (Cross-Site Request Forgery) é um token de segurança que valida automaticamente usuários já autenticados.Como funciona:

Usuário faz login no portal da empresa
Sistema gera um csrf_token único para a sessão
Token é enviado ao Webchat via JavaScript
Webchat valida o token com a API configurada
Usuário é autenticado sem preencher formulário

Vantagens:

✅ Experiência fluida para usuários logados
✅ Segurança reforçada contra acessos indevidos
✅ Dados do usuário preenchidos automaticamente

Caminho: Invenio Center > Canais > Webchat > Segurança > Autenticação Automática (CSRF)

🎯 É possível vincular o Webchat a segmentos específicos?

Sim. Configure o método de segmentação conforme a necessidade:Método padrão:

Cliente escolhe o segmento ao iniciar o chat
Ideal para empresas com múltiplas áreas

Segmento específico:

Contato atribuído automaticamente ao segmento pré-definido
Ideal para landing pages ou portais de área específica (ex: portal financeiro → segmento “Financeiro”)

Caminho: Invenio Center > Canais > Webchat > Fluxo > Método de segmentaçãoConsulte: Segmentos no Invenio Center

🛠️ Como verificar se a implementação está correta?

Checklist de verificação:

✅ Script inserido dentro da tag body do HTML
✅ ID do Webchat corresponde ao fornecido no Invenio Center
✅ Página publicada (não apenas em ambiente local)
✅ Verificar console do navegador por erros JavaScript (F12)
✅ Aguardar o delay configurado antes que o chat apareça

Problema mais comum: Script inserido no head em vez do body, ou ID incorreto.Caminho para obter o ID correto: Invenio Center > Canais > Webchat > Implementar > Copiar código

Acesso

Configurações Gerais

Invenio Live

Invenio Center

Maestro

Carteiro Digital

Robbu APIs

Atualizações

Webchat – Configuração e Implementação

Acessar Configurações