Arquitetura e fluxo

As partes

No navegador dos seus visitantes:

• loader.js — um pequeno carregador de poucos kilobytes. Lê a configuração, verifica o consentimento, desenha um botão provisório do chat na posição final (sem deslocamento de layout) e cria window.ReactiveChat com uma fila de comandos. Não faz mais nada.
• O núcleo (core.<hash>.js) — janela do chat, conexão, ocultação de dados pessoais, regras. Só é carregado quando um gatilho é acionado: navegador ocioso, mouse ou dedo sobre o botão do chat, comando de API, sinal de frustração do MousePlayer. A maioria dos visitantes nunca abre o chat e, por isso, também não o carrega imediatamente.
• Módulos sob demanda — tours do produto, texto de privacidade, recursos da loja; cada um só quando necessário.
• Isolamento — tudo fica em um shadow DOM fechado; estilos por folhas de estilo construíveis, sem scripts inline, sem eval, sem cookies.

No reactive.chat:

• Distribuição em https://cdn.reactive.chat/ — carregador, núcleo, módulos.
• Servidor do chat em wss://ws.reactive.chat/rc_wss/ — WebSocket com protocolo rc.v1; o mesmo endereço com https:// para fallback HTTP, formulário offline, uploads, texto de privacidade e Smart Answer.
• Conta em https://reactive.chat/app — configurações do projeto, design, base de conhecimento, painel da equipe.
• API do servidor em https://reactive.chat/v1/ — REST e MCP para seu backend.

Do seu lado (opcional):

• Seu backend assina a identidade de usuários autenticados, responde à consulta de dados de clientes, recebe webhooks e chama a API do servidor.
• Seu proxy fornece tudo por um subdomínio próprio (Domínio próprio).

Fluxo de uma visualização de página

1. O navegador carrega loader.js (de forma assíncrona, sem bloquear nada).
2. O carregador lê data-rc-*, ReactiveChatSettings e chamadas boot na fila, verifica a chave do site e o consentimento e desenha o botão provisório.
3. Um gatilho é acionado; o carregador busca o núcleo no mesmo diretório.
4. O núcleo assume o botão provisório e a fila e processa os comandos na ordem.
5. Abre a conexão e envia init com chave do site, IDs, idioma, consentimento, eventual identidade assinada e contexto da página.
6. O servidor verifica origem, projeto e identidade e responde com init_ok: design e textos da conta, regras, recursos, limites e histórico da conversa até então.
7. O widget está pronto (evento ready). Ele informa sozinho as mudanças de página em aplicativos de página única.

Fluxo de uma pergunta

1. O visitante escreve; dados pessoais são ocultados no navegador, e a mensagem recebe um ID exclusivo.
2. O servidor a armazena (reconhece repetições pelo ID), oculta os dados novamente e confirma com uma cópia de retorno.
3. O assistente de IA pesquisa sua base de conhecimento — para perguntas sobre pedidos de um usuário confirmado, também pelo endpoint de dados de clientes — e transmite a resposta em fluxo. Quando ele transfere para a equipe é definido na conta (Manual).
4. Em paralelo, eventos passam por uma fila para webhooks e integrações. O chat nunca espera por eles.

Versões e distribuição

• loader.js não tem número de versão no nome e é substituído nas atualizações. Por isso, incorpore a partir de cdn.reactive.chat (ou pelo seu proxy), não como uma cópia.
• O núcleo se chama core.<hash>.js; o hash vem do conteúdo, e cada carregador conhece exatamente seu próprio núcleo. Assim, carregador e núcleo sempre correspondem, e um núcleo pode ficar em cache por bastante tempo.
• A configuração (design, textos, regras, tours) vem do servidor a cada conexão. Alterações na conta não exigem novo código de incorporação; entram em vigor após pouco tempo (até um minuto, conforme a configuração).
• A versão do protocolo é 1. Novos campos são adicionados; os desconhecidos são ignorados.
• ReactiveChat.version fornece a versão do núcleo depois do carregamento.

Onde configurar cada coisa

• Na conta: aparência, textos, tela inicial, regras, tours, testes A/B, personalidade da IA (Personalização), equipe, base de conhecimento, canais (Manual).
• Na tag script: o que deve valer por página (Referência da tag script).
• No script da página: identidade, contexto, abertura por elementos próprios (API JavaScript).
• No servidor: assinaturas, dados de clientes, webhooks, API (Identidade, Dados de clientes, Webhooks, API do servidor).

A seguir: Início rápido