> ## Documentation Index
> Fetch the complete documentation index at: https://docs.robbu.global/llms.txt
> Use this file to discover all available pages before exploring further.

# Webchat – Configuração e Implementação

> Configure, personalize e implemente o Webchat do Invenio Center no seu site: aparência, fluxo, segurança CSRF e código JavaScript de integraçã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

<Steps>
  <Step title="Navegar até o Webchat">
    No **Invenio Center**, acesse: **Canais > Webchat**

    <Tip>
      **Acesso direto:** [Configurações de Webchat](https://inveniocenter.robbu.global/painel/integracoes/webchat)
    </Tip>

    <Frame caption="Painel de configuração do Webchat no Invenio Center">
      <img src="https://robbublob.blob.core.windows.net/docs/invenio-center/webchat/webchat0.png" />
    </Frame>
  </Step>

  <Step title="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 |

    <Note>
      A **Versão 3** inclui todos os recursos da V2, acrescida de sons de notificação e aviso flutuante.
    </Note>
  </Step>
</Steps>

***

## Configurações por Versão

<Tabs>
  <Tab title="Versão 2 (Padrão)" icon="sliders">
    ### Aparência

    **Exibição automática**

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

    ***

    **Logotipo no cabeçalho**

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

    ***

    **Ícone do botão de abertura**

    Personalize 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

    <Note>
      Se nenhum texto for definido, o sistema exibirá por padrão: **"Iniciar Atendimento"**.
    </Note>

    <Frame caption="Configurações de aparência: ícone e delay do botão">
      <img src="https://robbublob.blob.core.windows.net/docs/invenio-center/webchat/webchat1.png" />
    </Frame>

    ***

    **Temas Visuais**

    Selecione o tema para adequar o layout à identidade visual da empresa:

    <AccordionGroup>
      <Accordion title="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                          |

        <Tip>
          O tema **Default** é aplicado automaticamente quando nenhuma outra opção é selecionada.
        </Tip>
      </Accordion>
    </AccordionGroup>

    ***

    **Botão "Finalizar Atendimento"**

    Exibe a opção para que o cliente encerre o atendimento por conta própria.

    ***

    **Redirecionamento para WhatsApp**

    Adiciona atalho direto para o WhatsApp, com:

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

    <Frame caption="Configurações de aparência avançadas e botão WhatsApp">
      <img src="https://robbublob.blob.core.windows.net/docs/invenio-center/webchat/webchat2.png" />
    </Frame>

    <Frame caption="Pré-visualização do botão de redirecionamento para WhatsApp">
      <img src="https://robbublob.blob.core.windows.net/docs/invenio-center/webchat/whatsapp.png" />
    </Frame>

    ***

    ### Fluxo

    **Autenticação**

    Capture informações antes de iniciar o atendimento. Campos habilitáveis:

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

    <Frame caption="Configuração de campos de autenticação no fluxo">
      <img src="https://robbublob.blob.core.windows.net/docs/invenio-center/webchat/autenticacaoFluxo.png" />
    </Frame>

    ***

    **Método de segmentação**

    Define 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 NPS**

    Exibe tela de avaliação ao final do atendimento. Resultados disponíveis no relatório **"WebChat – Net Promoter Score"**.

    [Ver documentação de Relatórios](https://docs.robbu.global/docs/center/relatorios)

    ***

    **Idioma**

    Idiomas disponíveis:

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

    <Frame caption="Configuração de idioma e sessão do usuário">
      <img src="https://robbublob.blob.core.windows.net/docs/invenio-center/webchat/idioma.png" />
    </Frame>

    ***

    **Sessão do usuário**

    Mantém o atendimento ativo mesmo se o usuário atualizar ou recarregar a página.

    <Frame caption="Opções de fluxo: NPS, idioma e sessão">
      <img src="https://robbublob.blob.core.windows.net/docs/invenio-center/webchat/webchat3.png" />
    </Frame>

    ***

    ### Segurança

    Dois métodos de autenticação disponíveis:

    **Autenticação Padrão**

    Usuá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

    <Frame caption="Configuração de autenticação CSRF - Método">
      <img src="https://robbublob.blob.core.windows.net/docs/invenio-center/webchat/CSRF1.png" />
    </Frame>

    <Frame caption="Configuração de CSRF - URL e vinculação de segmento">
      <img src="https://robbublob.blob.core.windows.net/docs/invenio-center/webchat/CSRF2.png" />
    </Frame>
  </Tab>

  <Tab title="Versão 3 (Avançada)" icon="star">
    ### Recursos Adicionais da V3

    A Versão 3 inclui **todos os recursos da V2** e adiciona:

    ***

    **Sons do Webchat**

    * 🔔 Reproduz som ao receber novas mensagens
    * ⚙️ Opção de usar o som padrão do sistema ou customizado

    ***

    **Aviso flutuante**

    Exibe mensagem automática após o carregamento do chat para atrair o visitante:

    * ⏱️ **Tempo de exibição** configurável (em segundos)
    * 📝 **Texto personalizado**
    * 👁️ **Ocultar automaticamente** após o tempo definido

    <Frame caption="Configurações avançadas da Versão 3">
      <img src="https://robbublob.blob.core.windows.net/docs/invenio-center/webchat/webchatversao3.png" />
    </Frame>

    <Frame caption="Configuração do aviso flutuante">
      <img src="https://robbublob.blob.core.windows.net/docs/invenio-center/webchat/flutuante.png" />
    </Frame>

    <Tip>
      **Estratégia:** Configure o aviso flutuante com uma mensagem de boas-vindas para aumentar a taxa de engajamento dos visitantes do site.
    </Tip>
  </Tab>
</Tabs>

***

## Código de Integração

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

<Frame caption="Botão de implementação e geração do código">
  <img src="https://robbublob.blob.core.windows.net/docs/invenio-center/webchat/implementar.png" />
</Frame>

**Script de integração gerado:**

```html theme={null}
<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:**

```html theme={null}
<div id="chat-robbu-container"></div>
```

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

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

***

## Links Relacionados

<CardGroup cols={2}>
  <Card title="Canais de Atendimento" icon="comments" href="https://docs.robbu.global/docs/center/canais-atendimento">
    Todos os canais disponíveis
  </Card>

  <Card title="Segmentos" icon="layer-group" href="https://docs.robbu.global/docs/center/segmentos">
    Configuração de segmentos
  </Card>

  <Card title="Fila de Atendimento" icon="list-ol" href="https://docs.robbu.global/docs/center/fila-de-atendimento">
    Gestão de filas
  </Card>

  <Card title="Relatórios" icon="chart-line" href="https://docs.robbu.global/docs/center/relatorios">
    Relatório NPS e outros
  </Card>

  <Card title="Bibliotecas de Mídias" icon="photo-film" href="https://docs.robbu.global/docs/center/bibliotecas-de-midias">
    Gerenciar mídias
  </Card>

  <Card title="Filtros no Invenio Live" icon="filter" href="https://docs.robbu.global/docs/live/filtros-e-menus-de-busca">
    Filtrar conversas Webchat
  </Card>
</CardGroup>

***

## ⁉️ Perguntas Frequentes (FAQ)

<AccordionGroup>
  <Accordion title="🆚 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.
  </Accordion>

  <Accordion title="🎨 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 tema

    O tema **Default** é aplicado automaticamente quando nenhum outro é selecionado.
  </Accordion>

  <Accordion title="⏱️ 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ção

    **Benefício:** Evita que o chat apareça antes do usuário ter tempo de ver o conteúdo da página.
  </Accordion>

  <Accordion title="🔐 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
  </Accordion>

  <Accordion title="📱 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 WhatsApp

    **Caso de uso:** Cliente começa no Webchat e opta por continuar via WhatsApp com um clique.
  </Accordion>

  <Accordion title="⭐ O Webchat pode ter avaliação de atendimento (NPS)?">
    **Sim.** Ao final do atendimento, o NPS é exibido automaticamente.

    **Como funciona:**

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

    **Relatório:** Invenio Center > Relatórios > WebChat – Net Promoter Score

    Consulte: [Relatórios no Invenio Center](https://docs.robbu.global/docs/center/relatorios)
  </Accordion>

  <Accordion title="💻 Como adicionar o Webchat ao site da empresa?">
    **Passos de implementação:**

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

    **Caminho:** Invenio Center > Canais > Webchat > Implementar > Copiar código
  </Accordion>

  <Accordion title="🔔 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 3**

    **Caminho:** Invenio Center > Canais > Webchat > Versão 3 > Aviso flutuante
  </Accordion>

  <Accordion title="🌐 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
  </Accordion>

  <Accordion title="🔄 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
  </Accordion>

  <Accordion title="🔑 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:**

    1. Usuário faz login no portal da empresa
    2. Sistema gera um `csrf_token` único para a sessão
    3. Token é enviado ao Webchat via JavaScript
    4. Webchat valida o token com a API configurada
    5. 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)
  </Accordion>

  <Accordion title="🎯 É 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ção

    Consulte: [Segmentos no Invenio Center](https://docs.robbu.global/docs/center/segmentos)
  </Accordion>

  <Accordion title="🛠️ Como verificar se a implementação está correta?">
    **Checklist de verificação:**

    1. ✅ Script inserido dentro da tag `body` do HTML
    2. ✅ ID do Webchat corresponde ao fornecido no Invenio Center
    3. ✅ Página publicada (não apenas em ambiente local)
    4. ✅ Verificar console do navegador por erros JavaScript (F12)
    5. ✅ 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
  </Accordion>
</AccordionGroup>