Visão geral

Support é o caminho rápido. Lance o widget com bons padrões, mude o que os usuários veem primeiro e vá mais fundo só se precisar.

Use isto quando

• o widget já renderiza e você quer o caminho mais curto até a produção
• quer saber qual API usar em seguida
• quer manter o contêiner padrão enquanto adapta algumas partes à sua marca

A versão de 30 segundos

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

Use a exportação direta Support só quando você quiser de propósito o widget completo no bloco atual. O LazySupport é o caminho recomendado para o desempenho.

O widget padrão já traz três coisas boas de cara:

• você chega rápido à produção
• adaptá-lo à sua marca é fácil
• dá para substituir partes com segurança

O que dá para mudar sem refazer nada

• classNames e slotProps para estilizar a interface embutida
• slots.trigger para trocar a bolha
• slots.homePage para mudar a primeira tela
• SupportConfig para mensagens de boas-vindas e opções rápidas por rota
• theme e os tokens --fx-theme-* para cores, raio e modo claro ou escuro

Se isso resolve o seu caso, fique por aqui. Você não precisa do caminho Avançado para lançar um widget bem acabado.

Identificar visitantes

Use o IdentifySupportVisitor quando um usuário fizer login. Adicione o SupportConfig quando uma página precisar do próprio contexto de suporte.

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 />
    </>
  );
}

Quando parar por aqui

• o widget padrão já combina com o seu produto
• você só precisa de identidade, mensagens de boas-vindas, opções rápidas ou estilos por props
• não precisa de páginas próprias nem de um contêiner próprio

Lista de verificação para produção

• use uma chave pública no navegador e libere todos os domínios publicados
• identifique os usuários autenticados por um ID externo estável, inclusive ao trocar de conta
• importe exatamente um ponto de entrada de CSS e teste o modo claro e escuro com 200% de zoom
• informe sobre privacidade e retenção do contexto de visitantes e de feedback
• trate o carregamento e as falhas da API, e verifique o fluxo só com o teclado

Próximo passo

1. Mude uma coisa só para trocar a bolha ou a primeira tela sem refazer o widget.
2. Combine com a sua marca para definir cores, raio e modo escuro.
3. Páginas e layouts quando precisar de uma incorporação inline, uma página própria ou um contêiner próprio.

Quer construir o seu?

Isso já é outro caminho.

Use Avançado quando quiser ir totalmente sob medida. O widget que entregamos é construído com lógica e primitivas reutilizáveis, e você pode inspecionar o código do widget se quiser um ponto de partida real hoje.

Props do Support