Visión general

Support es el camino rápido. Lanza el widget con buenos valores por defecto, cambia lo primero que ven los usuarios y profundiza solo si lo necesitas.

Usa esto cuando

• el widget ya se renderiza y quieres el camino más corto a producción
• quieres saber a qué API recurrir a continuación
• quieres mantener el contenedor por defecto mientras adaptas algunas partes a tu marca

La versión de 30 segundos

Copiarimport { LazySupport } from "@fluxolat/react/lazy-support";
import { Suspense } from "react";
 
export default function App() {
  return (
    <Suspense fallback={null}>
      <LazySupport />
    </Suspense>
  );
}

Usa la exportación directa Support solo cuando quieras a propósito el widget completo en el fragmento actual. LazySupport es el camino recomendado para el rendimiento.

El widget por defecto te da tres cosas buenas desde el principio:

• llegas rápido a producción
• adaptarlo a tu marca es fácil
• puedes sustituir partes sin riesgo

Qué puedes cambiar sin rehacer nada

• classNames y slotProps para dar estilo a la interfaz integrada
• slots.trigger para cambiar la burbuja
• slots.homePage para cambiar la primera pantalla
• SupportConfig para mensajes de bienvenida y opciones rápidas por ruta
• theme y los tokens --fx-theme-* para colores, radio y modo claro u oscuro

Si con eso te vale, quédate aquí. No necesitas el camino Avanzado para lanzar un widget cuidado.

Identificar a los visitantes

Usa IdentifySupportVisitor cuando un usuario inicie sesión. Añade SupportConfig cuando una página necesite su propio contexto de soporte.

Copiarimport {
  IdentifySupportVisitor,
  Support,
  SupportConfig,
} from "@fluxolat/react";
import { SenderType, type DefaultMessage } from "@fluxolat/types";
 
const defaultMessages: DefaultMessage[] = [
  {
    content: "Hi Jane, I can help with billing, onboarding, or migration.",
    senderType: SenderType.TEAM_MEMBER,
  },
];
 
export default function App() {
  const user = {
    id: "user_123",
    email: "jane@acme.com",
    name: "Jane Doe",
  };
 
  return (
    <>
      <IdentifySupportVisitor
        externalId={user.id}
        email={user.email}
        name={user.name}
      />
 
      <SupportConfig
        defaultMessages={defaultMessages}
        quickOptions={[
          "How do I set this up?",
          "Can you help with billing?",
          "How do I import old conversations?",
        ]}
      />
 
      <Support />
    </>
  );
}

Cuándo quedarte aquí

• el widget por defecto ya encaja con tu producto
• solo necesitas identidad, mensajes de bienvenida, opciones rápidas o estilos por props
• no necesitas páginas propias ni un contenedor propio

Lista de comprobación para producción

• usa una clave pública en el navegador y permite todos los dominios desplegados
• identifica a los usuarios autenticados con un ID externo estable, también al cambiar de cuenta
• importa exactamente un punto de entrada de CSS y prueba el modo claro y oscuro al 200 % de zoom
• informa sobre privacidad y conservación del contexto de visitantes y opiniones
• gestiona la carga y los fallos de la API, y verifica el flujo solo con teclado

Siguiente paso

1. Cambia una sola cosa para sustituir la burbuja o la primera pantalla sin rehacer el widget.
2. Ajústalo a tu marca para definir colores, radio y modo oscuro.
3. Páginas y layouts cuando necesites integrarlo en línea, una página propia o un contenedor propio.

¿Quieres construir el tuyo?

Eso ya es otro camino.

Usa Avanzado cuando quieras ir totalmente a medida. El widget que enviamos está construido con lógica y primitivas reutilizables, y puedes inspeccionar el código del widget si quieres un punto de partida real desde hoy.

Props de Support