Visitantes

¿Qué son los visitantes?

Los visitantes se crean automáticamente cuando alguien carga tu aplicación con el SDK de Fluxo. Representan a los usuarios anónimos antes de identificarse como contactos.

Cada visitante es único por dispositivo y navegador, y persiste entre cargas de página y sesiones.

Cómo se rastrea a los visitantes

Fluxo mantiene la identidad anónima del visitante con un ID por sitio web:

• LocalStorage: guarda un ULID de visitante generado para el sitio web actual.
• Creación automática: no hace falta configurar nada; el visitante se crea en la primera carga.

Fluxo no usa huellas del navegador como identidad de reserva. Un perfil de navegador borrado, una ventana privada, otro navegador u otro dispositivo crean un visitante anónimo distinto hasta que identifiques a esa persona.

Es decir: un visitante en el escritorio y esa misma persona en el móvil son dos visitantes distintos hasta que se identifican.

Anónimo por defecto

Los visitantes empiezan siendo anónimos, sin ninguna información personal:

• Sin nombre, correo ni ID externo hasta que identifiques al visitante.
• El contexto técnico y de captación puede incluir idioma, zona horaria, navegador, sistema operativo, tipo de dispositivo, pantalla y área visible, página actual, referente, identificadores de campaña o clic y la ubicación enriquecida en el servidor.
• Pueden iniciar conversaciones sin autenticarse.
• Perfecto para páginas públicas o usuarios sin sesión.

Propiedades del visitante

Cada visitante tiene:

• id: identificador único de este visitante.
• language: idioma del navegador (por ejemplo, "es-ES").
• timezone: zona horaria del navegador (por ejemplo, "Europe/Madrid").
• isBlocked: si se ha bloqueado a este visitante en el soporte.
• contact: el contacto asociado (nulo hasta que se identifica).

Identificar a los visitantes

Convierte visitantes anónimos en contactos identificados cuando el usuario inicia sesión:

Con el 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>
  );
}

Con el 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;
}

Ejecuta la identificación siempre que cambie la identidad estable del usuario autenticado. No la omitas solo porque el navegador ya tenga un contacto: en un navegador compartido, ese contacto puede ser de la cuenta anterior. El componente es la opción declarativa más sencilla; si tu aplicación cambia de cuenta sin volver a montar el layout autenticado, usa el patrón con hook de arriba para que el cambio de identidad siempre dispare una petición explícita de identificación.

Informa a tus usuarios de qué campos de soporte, analítica y captación recoge tu aplicación, guarda solo el contexto que tu equipo necesite y aplica tus propios requisitos de consentimiento, conservación y eliminación.

Una vez identificado, todas las conversaciones y datos quedan ligados al contacto, incluso entre dispositivos distintos.

Usa un externalId estable de tus propios registros de usuario como clave de restauración. Cuando ese mismo usuario inicie sesión tras una reinstalación, una pérdida de almacenamiento o en otro dispositivo, identificarlo con ese externalId le dará al nuevo visitante acceso al historial de conversaciones del contacto. No necesitas guardar el ID de visitante de Fluxo para los usuarios con sesión.

Más información

• Contactos: visitantes identificados, con metadatos y continuidad entre dispositivos.
• IdentifySupportVisitor: componente para identificar visitantes.
• useVisitor: hook para controlar el visitante desde código.