Estado de Support

Configura banderas de funcionalidad tipadas y el estado de onboarding con support.ts.

Usa support.ts cuando tu aplicación necesite flags de funcionalidad tipados o progreso de onboarding respaldados por Fluxo.

La configuración le da a TypeScript los flags permitidos, los IDs de paso y sus metadatos. La API guarda el estado real del visitante o del contacto.

Usa esto cuando

quieres que useFeatureFlag("new-message") autocomplete las banderas válidas
quieres los pasos de onboarding tipados desde un único archivo de configuración
necesitas metadatos de onboarding entre pasos
quieres gestionar las banderas desde el servidor con actualizaciones en tiempo real en el navegador

El cambio más pequeño que funciona

Crea support.ts y regístralo para la inferencia.

support.ts

import {
  createSupport,
  type SupportOnboardingMetadata,
} from "@fluxolat/core";
 
export const support = createSupport({
  featureFlags: ["new-message", "billing-v2"],
  onboarding: {
    steps: [
      { id: "workspace", isFirst: true },
      { id: "invite-team" },
      { id: "done", isLast: true },
    ],
  },
});
 
declare module "@fluxolat/core/support-config" {
  interface SupportRegister {
    config: typeof support;
    onboardingMetadata: SupportOnboardingMetadata<
      typeof support,
      {
        workspace: { workspaceName?: string };
        "invite-team": { invitedEmails?: string[] };
      }
    >;
  }
}

Pasa la configuración al proveedor.

app/providers.tsx

"use client";
 
import { SupportProvider } from "@fluxolat/react";
import { support } from "@/support";
 
export function Providers({ children }: { children: React.ReactNode }) {
  return <SupportProvider support={support}>{children}</SupportProvider>;
}

Flags de funcionalidad

Usa useFeatureFlag() en React. El nombre del flag se infiere de support.ts.

components/new-message-button.tsx

"use client";
 
import { useFeatureFlag } from "@fluxolat/react";
 
export function NewMessageButton() {
  const isNewMessageActivated = useFeatureFlag("new-message");
 
  if (!isNewMessageActivated) {
    return null;
  }
 
  return <button>New message</button>;
}

Cambiar un flag exige una clave de API privada. Hazlo desde tu servidor, no desde el navegador.

server/feature-flags.ts

import { FluxoClient } from "@fluxolat/core";
 
const client = new FluxoClient({
  apiUrl: "https://api.fluxo.lat/v1",
  wsUrl: "wss://api.fluxo.lat/ws",
  apiKey: process.env.FLUXO_PRIVATE_API_KEY,
});
 
await client.mutateSupportFeatureFlags({
  target: { type: "contact", id: contactId },
  operation: "add",
  flags: ["new-message"],
});

La misma mutación funciona por HTTP.

curl -X PATCH "https://api.fluxo.lat/v1/support/feature-flags" \
  -H "Authorization: Bearer $FLUXO_PRIVATE_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "target": { "type": "contact", "id": "01K0000000000000000000000" },
    "operation": "add",
    "flags": ["new-message"]
  }'

Los destinos disponibles son visitor, contact y contactOrganization. Una bandera está activa cuando la tiene cualquiera de esos niveles.

Onboarding

Usa useOnboarding() para leer el paso actual, completar pasos y guardar metadatos de un paso.

components/invite-step.tsx

"use client";
 
import { useOnboarding } from "@fluxolat/react";
 
export function InviteStep() {
  const { currentStepId, setMetadata, completeStep } = useOnboarding();
 
  if (currentStepId !== "invite-team") {
    return null;
  }
 
  async function submit(invitedEmails: string[]) {
    await setMetadata("invite-team", { invitedEmails });
    await completeStep("invite-team");
  }
 
  return <InviteForm onSubmit={submit} />;
}

Cada paso tiene completed y metadata. setMetadata() reemplaza el objeto de metadatos de ese paso. Pasa null para borrarlo.

Uso de Core en el navegador

El estado de soporte también funciona sin React. Este ejemplo con clave pública debe ejecutarse en un navegador cuyo Origin esté permitido para el sitio web; no lo copies dentro de un módulo de servidor de Next.js. Las escrituras desde el servidor usan apiKey con una clave privada, como se ha visto arriba.

support-runtime.ts

import { FluxoClient } from "@fluxolat/core";
import { support } from "./support";
 
const client = new FluxoClient({
  apiUrl: "https://api.fluxo.lat/v1",
  wsUrl: "wss://api.fluxo.lat/ws",
  publicKey: "pk_test_xxxx",
  support,
});
 
await client.fetchWebsite();
await client.fetchSupportState();
 
const isNewMessageEnabled = client.isFeatureFlagEnabled("new-message");
 
await client.setOnboardingMetadata("workspace", {
  workspaceName: "Acme",
});
 
if (isNewMessageEnabled) {
  await client.completeOnboardingStep("workspace");
}

Modelo de estado observable

Las banderas pueden asignarse a nivel de visitante, de contacto o de organización del contacto; una bandera está activa cuando la contiene cualquiera de los niveles aplicables.
El estado de onboarding anónimo pertenece al visitante. Una vez identificado, gana el estado de onboarding del contacto.
Si un visitante anónimo tiene progreso, Fluxo lo copia al contacto solo cuando ese contacto no tiene estado de onboarding.
Las actualizaciones de onboarding son optimistas. Tanto las banderas como el onboarding se actualizan en tiempo real cuando Fluxo emite cambios de estado de soporte.

Siguiente paso

Visión general para la configuración por defecto del widget.
Referencia de hooks para interfaces de React propias.
Referencia de tipos para los tipos compartidos del SDK.

¿Te resultó útil esta página?

Abre una incidencia de documentación ya rellenada para que el equipo pueda actuar.

Sí, me ayudó Se puede mejorar

Páginas y layouts Textos e idioma

En esta página

Usa esto cuando El cambio más pequeño que funciona Flags de funcionalidad Onboarding Uso de Core en el navegador Modelo de estado observable Siguiente paso