Visitantes

O que são visitantes?

Os visitantes são criados automaticamente quando alguém carrega o seu app com o SDK do Fluxo. Eles representam usuários anônimos antes de serem identificados como contatos.

Cada visitante é único por dispositivo e navegador, e persiste entre carregamentos de página e sessões.

Como os visitantes são rastreados

O Fluxo mantém a identidade anônima do visitante com um ID por site:

• LocalStorage: guarda um ULID de visitante gerado para o site atual.
• Criação automática: não é preciso configurar nada; o visitante é criado no primeiro carregamento.

O Fluxo não usa impressão digital do navegador como identidade de reserva. Um perfil de navegador limpo, uma janela anônima, outro navegador ou outro dispositivo criam um visitante anônimo diferente até você identificar essa pessoa.

Ou seja: um visitante no desktop e a mesma pessoa no celular são dois visitantes diferentes até serem identificados.

Anônimo por padrão

Os visitantes começam anônimos, sem nenhuma informação pessoal:

• Sem nome, e-mail ou ID externo até você identificar o visitante.
• O contexto técnico e de aquisição pode incluir idioma, fuso horário, navegador, sistema operacional, tipo de dispositivo, tela e área visível, página atual, referenciador, identificadores de campanha ou clique e a localização enriquecida no servidor.
• Podem iniciar conversas sem autenticação.
• Perfeito para páginas públicas ou usuários sem login.

Propriedades do visitante

Cada visitante tem:

• id: identificador único deste visitante.
• language: idioma do navegador (por exemplo, "pt-BR").
• timezone: fuso horário do navegador (por exemplo, "America/Sao_Paulo").
• isBlocked: se este visitante foi bloqueado no suporte.
• contact: o contato associado (nulo até ser identificado).

Identificar visitantes

Transforme visitantes anônimos em contatos identificados quando o usuário faz login:

Com o componente (Server Components)

Copiarimport { IdentifySupportVisitor } from "@fluxolat/next/identify-visitor";
import { auth } from "@/lib/auth";
import { headers } from "next/headers";
 
export default async function DashboardLayout({ children }) {
  const session = await auth.api.getSession({
    headers: await headers(),
  });
 
  return (
    <div>
      {session?.user && (
        <IdentifySupportVisitor
          externalId={session.user.id}
          email={session.user.email}
          name={session.user.name}
        />
      )}
      {children}
    </div>
  );
}

Com o hook (Client Components)

Copiar"use client";
 
import { useVisitor } from "@fluxolat/next/hooks";
import { useEffect } from "react";
 
export function AuthHandler({ user }) {
  const { identify } = useVisitor();
 
  useEffect(() => {
    if (!user) {
      return;
    }
 
    void identify({
      externalId: user.id,
      email: user.email,
      name: user.name,
    });
  }, [user?.id, user?.email, user?.name, identify]);
 
  return null;
}

Rode a identificação sempre que a identidade estável do usuário autenticado mudar. Não pule esse passo só porque o navegador já tem um contato: num navegador compartilhado, esse contato pode ser da conta anterior. O componente é a opção declarativa mais simples; se o seu app troca de conta sem remontar o layout autenticado, use o padrão com hook acima para que a mudança de identidade sempre dispare um pedido explícito de identificação.

Informe aos seus usuários quais campos de suporte, análise e aquisição o seu app coleta, guarde apenas o contexto de que a sua equipe precisa e aplique os seus próprios requisitos de consentimento, retenção e exclusão.

Depois de identificado, todas as conversas e dados ficam ligados ao contato, mesmo entre dispositivos diferentes.

Use um externalId estável dos seus próprios registros de usuário como chave de restauração. Quando esse mesmo usuário fizer login após uma reinstalação, uma perda de armazenamento ou em outro dispositivo, identificá-lo com esse externalId dará ao novo visitante acesso ao histórico de conversas do contato. Você não precisa guardar o ID de visitante do Fluxo para usuários logados.

Saiba mais

• Contatos: visitantes identificados, com metadados e continuidade entre dispositivos.
• IdentifySupportVisitor: componente para identificar visitantes.
• useVisitor: hook para controlar o visitante via código.