> ## 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 via WhatsApp — Configuração e Fluxo

> Envie um convite para o contato continuar o atendimento do WhatsApp em uma página web, com verificação por código e suporte a texto, botões, listas e links.

O **Webchat via WhatsApp** é uma forma de dar continuidade a um atendimento iniciado no WhatsApp dentro de uma página web, através de um botão que pode ser enviado tanto por uma ação no fluxo do bot quanto por um template HSM disparado via campanha. Diferente do Webchat tradicional do Invenio Center (widget embutido no site do cliente), esse canal nasce dentro de uma conversa de WhatsApp já em andamento.

## Objetivo

A Meta alterou o modelo de cobrança de mensagens do WhatsApp Business Platform, passando a cobrar por mensagem de resposta enviada dentro da janela de atendimento com o contato. Na prática, isso significa que quanto mais mensagens de resposta o bot ou o atendente enviam pelo WhatsApp para dar continuidade a um atendimento, maior o custo por conversa.

Essa mudança entra em vigor em 1º de outubro de 2026, quando tanto mensagens de serviço (texto livre) quanto templates de utilidade dentro da janela de 24h passam a ser cobrados. Mais detalhes na [documentação oficial da Meta](https://developers.facebook.com/documentation/business-messaging/whatsapp/pricing). O Webchat via WhatsApp existe para reduzir esse custo: ao direcionar o contato para a página web assim que o atendimento avança, as mensagens seguintes deixam de trafegar pelo WhatsApp e passam a acontecer dentro do Webchat — sem custo por mensagem de resposta. O WhatsApp continua sendo usado apenas para iniciar a conversa e enviar o convite de troca de canal.

**Recursos principais:**

* 🔀 **Troca de canal sob demanda** via ação no fluxo do IDR, sem precisar de widget instalado no site
* 🔒 **Verificação por código** de 4 dígitos, com limite de tentativas (5 por sessão, bloqueio de 30 min) e expiração (24h)
* 💬 **Múltiplos tipos de mensagem**: texto, botões de resposta rápida, listas de opções e links
* 📎 **Anexos** (imagem, PDF, áudio) — <em>em desenvolvimento</em>
* 📣 **Envio via template HSM em campanha** com botão de redirecionamento para o Webchat — *em desenvolvimento*

## Acessar Configurações

<Steps>
  <Step title="Adicionar a ação no fluxo">
    No **IDR Studio**, no fluxo desejado, adicione a ação **"Enviar botão para continuar no Webchat"**.

    <Tip>
      Essa ação está disponível na lista de ações do fluxo, dentro do IDR Studio.
    </Tip>

    Campos da ação:

    * **Texto da mensagem** — texto exibido acima do botão no WhatsApp
    * **Texto do botão** (máx. 20 caracteres)
    * **Cabeçalho** e **Rodapé** (opcionais)
    * **Exigir código de verificação para abrir o Webchat** — recomendado manter em "Sim"
    * **Avisar que o contato pode continuar pelo WhatsApp** — oferece alternativa de não trocar de canal

    <Frame caption="Tela de configuração da ação no IDR Studio">
      <img src="https://mintcdn.com/robbu/-AaORJclac7lL179/images/webchat-whatsapp/acao-idr.jpg?fit=max&auto=format&n=-AaORJclac7lL179&q=85&s=d1700642b2f3bc4f92884a0f4df8a2c0" width="1055" height="725" data-path="images/webchat-whatsapp/acao-idr.jpg" />
    </Frame>
  </Step>

  <Step title="O que o contato recebe">
    Uma mensagem no WhatsApp com o texto configurado, o código de verificação (se ativado) e o botão de continuar.

    <Frame caption="Mensagem recebida no WhatsApp do contato">
      <img src="https://mintcdn.com/robbu/-AaORJclac7lL179/images/webchat-whatsapp/mensagem-whatsapp.png?fit=max&auto=format&n=-AaORJclac7lL179&q=85&s=5dcef0c60a7782d9486bb98a5f455540" width="511" height="160" data-path="images/webchat-whatsapp/mensagem-whatsapp.png" />
    </Frame>
  </Step>
</Steps>

## Domínio da Conversa

A conversa aberta pelo contato acontece no domínio `webchat.invenio.robbu.com`, no formato `https://webchat.invenio.robbu.com/c/{id-da-conversa}`. Esse é o domínio padrão da Robbu. Está prevista a possibilidade de o cliente configurar um domínio próprio (custom domain) para essa conversa.

## Fluxo

### Verificação

O contato recebe um código de 4 dígitos por WhatsApp e precisa confirmá-lo na página do Webchat antes de a conversa ser liberada.

* **Limite de 5 tentativas erradas** por sessão
* **Bloqueio de 30 minutos** ao atingir o limite, com reinício automático do contador depois
* **Código expira em 24 horas**

### Sessão do usuário

A sessão permanece ativa mesmo se a página for recarregada — não é necessário reinserir o código de verificação.

<Frame caption="Conversa sendo retomada automaticamente ao recarregar a página">
  <img src="https://mintcdn.com/robbu/-AaORJclac7lL179/images/webchat-whatsapp/retomando-sessao.jpg?fit=max&auto=format&n=-AaORJclac7lL179&q=85&s=8b1b19da8be9b96905d9f9c57ea83e3a" width="1212" height="793" data-path="images/webchat-whatsapp/retomando-sessao.jpg" />
</Frame>

## Segurança

O acesso à conversa é protegido por um código de verificação enviado via WhatsApp junto com o botão de troca de canal, com limite de tentativas e validade de 24 horas. Após a confirmação, um token de sessão válido por 24 horas libera o acesso à conversa.

## Localizando o Contato no Invenio Center

Cada conversa de Webchat gera um contato no Invenio Center, que pode ser localizado em **Contatos**.

Use os filtros disponíveis para encontrar o contato desejado:

* **Nome**, **E-mail** ou **CPF**
* **Código** ou **Protocolo** do atendimento
* **Telefone**
* **Tags**, **Segmento específico** e **Responsável**

<Frame caption="Filtros de busca de contatos, com resultado de uma pesquisa por nome">
  <img src="https://mintcdn.com/robbu/-AaORJclac7lL179/images/webchat-whatsapp/filtro-contatos.jpg?fit=max&auto=format&n=-AaORJclac7lL179&q=85&s=7709fc786a2cabae555cd31861cf9750" width="1515" height="811" data-path="images/webchat-whatsapp/filtro-contatos.jpg" />
</Frame>

<Tip>
  O identificador do contato criado é o mesmo identificador da conversa do Webchat (o trecho final da URL `webchat.invenio.robbu.com/c/{id}`) — útil para cruzar referências entre o painel de contatos e a conversa em si.
</Tip>

Ao abrir o contato, a tela de **Detalhes do contato** mostra nome, protocolo, responsável, prioridade, segmentos vinculados e demais dados cadastrais.

<Frame caption="Tela de detalhes do contato">
  <img src="https://mintcdn.com/robbu/-AaORJclac7lL179/images/webchat-whatsapp/detalhes-contato.jpg?fit=max&auto=format&n=-AaORJclac7lL179&q=85&s=a557ecdb385dae523f925b69d6cfd53c" width="1515" height="811" data-path="images/webchat-whatsapp/detalhes-contato.jpg" />
</Frame>
