Aplicações de página única e mudanças de página

Em uma aplicação de página única, o navegador carrega a página apenas uma vez; depois, seu framework substitui o conteúdo e altera o endereço por meio de history.pushState. O widget detecta essas mudanças sozinho. Você não precisa informar nada nem reiniciar nada.

Incorporação: exatamente uma vez

Coloque o carregador uma vez na estrutura principal do aplicativo (index.html, layout raiz, _document), não em um componente que seja renderizado novamente a cada mudança de rota. Incorporá-lo uma segunda vez não causa problemas (o segundo carregador não faz nada; veja Tag script), mas remover e reinserir a tag não reinicia o widget.

// Next.js (App Router), app/layout.tsx
import Script from 'next/script';

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script src="https://cdn.reactive.chat/loader.js"
                data-rc-site-key="SITE_KEY"
                strategy="afterInteractive" />
      </body>
    </html>
  );
}

A maneira mais fácil de verificar se um recurso auxiliar do framework repassa os atributos data-* para o <script> gerado é usar o inspetor de elementos. Se data-rc-site-key não estiver lá, nada será iniciado.

Como as mudanças de página são detectadas

O widget não intercepta history.pushState; ele apenas observa:

1. a Navigation API do navegador (navigation.currententrychange), quando disponível;
2. caso contrário, popstate e hashchange;
3. além disso, um temporizador que identifica mudanças de endereço sem um evento (a cada segundo; com a Navigation API, a cada 5 segundos);
4. pageshow ao retornar do cache de navegação para trás/para frente.

Conta como mudança de página: um novo endereço (caminho ou query) e rotas hash no formato #/… e #!/…. Não conta como mudança de página: um simples salto para uma âncora (#section) e replaceState para o mesmo endereço.

O que é informado

400 ms após a mudança (para que os estados intermediários de redirecionamentos não contem), o widget envia um quadro de contexto ao servidor, somente com consentimento:

• url, path, title, referrer – os parâmetros sensíveis de query (como email, password, token, key, card) são removidos de url e referrer antes do envio.
• locale, tz, viewport, screen, ua_hint.
• utm_source, utm_medium, utm_campaign, gclid, msclkid, fbclid do endereço.
• nav – tipo de mudança: load, push, replace, reload, back, forward ou traverse.

Se seu aplicativo definir o título apenas depois da mudança, o widget enviará uma correção após 2 segundos. Assim, os atendentes veem no painel de atendimento em qual página o visitante está, e o assistente relaciona sua resposta a essa página.

O widget também lê novamente o texto visível da página (para respostas sobre a página atual e para “Mostre-me”): no mínimo 1,2 segundo após a última mudança, no máximo a cada 5 segundos, nunca em páginas como conta, checkout ou carrinho, e nunca em campos de formulário. Marque as áreas que o assistente não deve ler com data-rc-private (Tag script).

Passar seu próprio contexto por página

Não existe um método específico para informar uma mudança de página, e ele não é necessário. Se quiser passar informações adicionais sobre a página atual, como o produto exibido, use track após a mudança de rota:

// React Router
const location = useLocation();
useEffect(() => {
  if (produkt) {
    window.ReactiveChat('track', 'produktseite', {
      page_type: 'product', product_id: produkt.sku, price: produkt.preis,
      currency: 'EUR', in_stock: produkt.lieferbar
    });
  }
}, [location.pathname, produkt]);

Os campos recebidos estão listados em Identificar visitantes e passar contexto.

Turbo, htmx, Livewire

Frameworks que substituem todo o <body> também removem o elemento do widget nesse processo. O widget se insere novamente sozinho (no máximo dez vezes por minuto); a conversa continua.

Usuários conectados em SPAs

Se alguém entrar sem recarregar a página, chame identify em seguida com um hash recém-obtido do servidor. Se o usuário mudar, o widget separa o rascunho da mensagem do usuário anterior. Veja os detalhes em Identificar visitantes.

Texto de privacidade em SPAs

Se seu aplicativo inserir a política de privacidade somente após o carregamento, o widget ainda encontrará o elemento data-rc-privacy (ele observa o documento). Veja Integração de privacidade.

A seguir: Segurança e CSP