Next.js
Instala y pon en marcha el widget de soporte de Fluxo en Next.js.
Si vas a contribuir al propio repositorio de Fluxo, empieza por la guía de configuración para colaboradores: así levantas el monorepo completo y los servicios locales, no solo el widget dentro de una aplicación existente.
Inicio rápido con el registro de shadcn
bunx --bun shadcn@latest add fluxolat/fluxo/supportEl registro instala un punto de partida de <Support /> listo para Next.js, el FluxoProvider, las dependencias necesarias, la importación del CSS del widget y un marcador NEXT_PUBLIC_FLUXO_API_KEY.
1. Añade tu clave de API pública
Crea o copia una clave pública segura para el navegador en Ajustes → Desarrolladores y añade tus dominios de desarrollo y producción. Consulta Claves de API para ver las reglas exactas.
NEXT_PUBLIC_FLUXO_API_KEY=pk_test_xxxx2. Monta FluxoProvider
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. Renderiza <Support />
import { Support } from "@/components/fluxo/support";
export default function Page() {
return (
<main>
<h1>Ya puedes chatear</h1>
<Support />
</main>
);
}Inicio rápido con un prompt de IA
Pega tu clave pública para rellenar el prompt, cópialo y ejecútalo en ChatGPT, Claude o Cursor.
Instalación manual del paquete
1. Instala el paquete
pnpm add @fluxolat/next
2. Añade tu clave de API pública
NEXT_PUBLIC_FLUXO_API_KEY=pk_test_xxxx3. Añade SupportProvider
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. Importa los estilos
El widget no inyecta estilos por su cuenta. Usa support.css si tu aplicación ya
usa Tailwind CSS v4; usa styles.css en cualquier otro caso.
Ambos puntos de entrada se comportan igual respecto al tema. Si tu aplicación ya
expone tokens al estilo de shadcn, el widget suele tomar automáticamente los
colores, el radio, las fuentes y el modo oscuro. No hace falta ninguna
correspondencia de tema adicional para empezar.
@import "tailwindcss";
@import "@fluxolat/next/support.css";5. Renderiza el widget
import { LazySupport } from "@fluxolat/next/lazy-support";
import { Suspense } from "react";
export default function Page() {
return (
<main>
<h1>Ya puedes chatear</h1>
<Suspense fallback={null}>
<LazySupport />
</Suspense>
</main>
);
}LazySupport deja toda la interfaz del widget fuera del fragmento inicial de la
ruta. Si controlas cuándo aparece el soporte, llama a preloadSupport desde el
mismo punto de entrada al pasar el ratón o al enfocar, antes de renderizarlo.
6. Identifica a los visitantes con sesión (opcional)
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. Muestra mensajes propios con SupportConfig defaultMessages (opcional)
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>
</>
);
}Comprueba la instalación
Recarga la aplicación y comprueba que el disparador de soporte aparece, abre la
pantalla de inicio o de conversación y no produce respuestas 401 ni 403 de la
API. Si el disparador sale sin estilos, importa exactamente un punto de entrada
de CSS. Un 401 suele significar que falta la clave pública o que no es válida;
un 403, que el dominio actual no está en la lista de dominios permitidos de la
clave. Consulta Claves de API.
Lo siguiente en la documentación de Support
- Visión general: el camino más corto desde el primer renderizado hasta un widget listo para producción.
- Cambia una sola cosa: sustituye la burbuja o la primera pantalla sin rehacer el widget.
- Ajústalo a tu marca: define colores, radio y modo oscuro.
¿Te resultó útil esta página?
Abre una incidencia de documentación ya rellenada para que el equipo pueda actuar.
En esta página
Inicio rápido con el registro de shadcn1. Añade tu clave de API pública2. MontaFluxoProvider3. Renderiza <Support />Inicio rápido con un prompt de IAInstalación manual del paquete1. Instala el paquete2. Añade tu clave de API pública3. Añade SupportProvider4. Importa los estilos5. Renderiza el widget6. Identifica a los visitantes con sesión (opcional)7. Muestra mensajes propios con SupportConfig defaultMessages (opcional)Comprueba la instalaciónLo siguiente en la documentación de Support