Pular para o conteúdo principal
Fluxo
Widget v0.1.0NEW: Pacotes menores, carregamento sob demanda
arrow-leftAnteriorarrow-rightPróximo

Next.js

Instale e coloque o widget de suporte do Fluxo para funcionar no Next.js.

Se você vai contribuir com o próprio repositório do Fluxo, comece pelo guia de configuração para colaboradores: assim você sobe o monorepo completo e os serviços locais, e não só o widget dentro de um app existente.

Início rápido com o registro do shadcn

bunx --bun shadcn@latest add fluxolat/fluxo/support

O registro instala um ponto de partida do <Support /> pronto para Next.js, o FluxoProvider, as dependências necessárias, a importação do CSS do widget e um espaço reservado NEXT_PUBLIC_FLUXO_API_KEY.

1. Adicione a sua chave de API pública

Crie ou copie uma chave pública segura para o navegador em Configurações → Desenvolvedores e adicione seus domínios de desenvolvimento e produção. Veja Chaves de API para as regras exatas.

.env.local
NEXT_PUBLIC_FLUXO_API_KEY=pk_test_xxxx

2. Monte o FluxoProvider

tsapp/layout.tsx
import { FluxoProvider } from "@/components/fluxo/provider";
 
import "./globals.css";
 
export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body>
        <FluxoProvider>{children}</FluxoProvider>
      </body>
    </html>
  );
}

3. Renderize <Support />

tsapp/page.tsx
import { Support } from "@/components/fluxo/support";
 
export default function Page() {
  return (
    <main>
      <h1>Você já pode conversar</h1>
      <Support />
    </main>
  );
}

Início rápido com um prompt de IA

Cole sua chave pública para preencher o prompt, copie-o e rode no ChatGPT, Claude ou Cursor.

fluxo-prompt.md

Instalação manual do pacote

1. Instale o pacote

pnpm add @fluxolat/next

2. Adicione a sua chave de API pública

.env.local
NEXT_PUBLIC_FLUXO_API_KEY=pk_test_xxxx

3. Adicione o SupportProvider

tsapp/layout.tsx
import { SupportProvider } from "@fluxolat/next/provider";
 
import "./globals.css";
 
export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body>
        <SupportProvider>{children}</SupportProvider>
      </body>
    </html>
  );
}

4. Importe os estilos

O widget não injeta estilos sozinho. Use support.css se o seu app já usa Tailwind CSS v4; use styles.css nos demais casos. Os dois pontos de entrada se comportam igual em relação ao tema. Se o seu app já expõe tokens no estilo do shadcn, o widget normalmente pega as cores, o raio, as fontes e o modo escuro automaticamente. Não é preciso nenhum mapeamento de tema extra para começar.

cssapp/globals.css
@import "tailwindcss";
 
@import "@fluxolat/next/support.css";

5. Renderize o widget

tsapp/page.tsx
import { LazySupport } from "@fluxolat/next/lazy-support";
import { Suspense } from "react";
 
export default function Page() {
  return (
    <main>
      <h1>Você já pode conversar</h1>
      <Suspense fallback={null}>
        <LazySupport />
      </Suspense>
    </main>
  );
}

O LazySupport mantém toda a interface do widget fora do bloco inicial da rota. Se você controla quando o suporte aparece, chame preloadSupport do mesmo ponto de entrada ao passar o mouse ou ao focar, antes de renderizá-lo.

6. Identifique os visitantes logados (opcional)

tsapp/(app)/layout.tsx
import { IdentifySupportVisitor } from "@fluxolat/next/identify-visitor";
 
export default function AppLayout({ children }: { children: React.ReactNode }) {
  const user = {
    id: "user_123",
    email: "jane@acme.com",
    name: "Jane Doe",
  };
 
  return (
    <>
      <IdentifySupportVisitor
        externalId={user.id}
        email={user.email}
        name={user.name}
      />
      {children}
    </>
  );
}

7. Exiba mensagens próprias com SupportConfig defaultMessages (opcional)

tsapp/page.tsx
import { LazySupport } from "@fluxolat/next/lazy-support";
import { SupportConfig } from "@fluxolat/next/support-config";
import { type DefaultMessage, SenderType } from "@fluxolat/types";
import { Suspense } from "react";
 
const user: { name: string | null } = {
  name: "Jane Doe",
};
 
const defaultMessages: DefaultMessage[] = [
  {
    content: `Hi ${user.name ?? "there"}, anything I can help with?`,
    senderType: SenderType.TEAM_MEMBER,
  },
];
 
const quickOptions: string[] = ["How to identify a visitor?"];
 
export default function Page() {
  return (
    <>
      <SupportConfig
        defaultMessages={defaultMessages}
        quickOptions={quickOptions}
      />
      <Suspense fallback={null}>
        <LazySupport />
      </Suspense>
    </>
  );
}

Verifique a instalação

Recarregue o app e confirme que o gatilho de suporte aparece, abre a tela inicial ou de conversa e não gera respostas 401 nem 403 da API. Se o gatilho aparecer sem estilos, importe exatamente um ponto de entrada de CSS. Um 401 costuma significar que falta a chave pública ou que ela é inválida; um 403, que o domínio atual não está na lista de domínios permitidos da chave. Veja Chaves de API.

O próximo passo na documentação do Support

  1. Visão geral: o caminho mais curto do primeiro render até um widget pronto para produção.
  2. Mude uma coisa só: troque a bolha ou a primeira tela sem refazer o widget.
  3. Combine com a sua marca: defina cores, raio e modo escuro.

Esta página foi útil?

Abra uma issue de documentação já preenchida para que a equipe possa agir.

Sim, ajudouPode melhorar
arrow-left O que é o Fluxo?React arrow-right