React

Copiarbunx --bun shadcn@latest add fluxolat/fluxo/support-react

CopiarVITE_FLUXO_API_KEY=pk_test_xxxx

Copiarimport React from "react";
import ReactDOM from "react-dom/client";
import { FluxoProvider } from "@/components/fluxo/provider";
import App from "./App";
import "./index.css";
 
ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <FluxoProvider>
      <App />
    </FluxoProvider>
  </React.StrictMode>,
);

Copiarimport { Support } from "@/components/fluxo/support";
 
export default function App() {
  return (
    <main>
      <h1>You are ready to chat</h1>
      <Support />
    </main>
  );
}

pnpmnpmyarnbun
pnpm add @fluxolat/react
Copiar

Copiarimport React from "react";
import ReactDOM from "react-dom/client";
import { SupportProvider } from "@fluxolat/react";
import App from "./App";
import "./index.css";
 
ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <SupportProvider>
      <App />
    </SupportProvider>
  </React.StrictMode>,
);

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

Copiarimport { IdentifySupportVisitor } from "@fluxolat/react/identify-visitor";
import { LazySupport } from "@fluxolat/react/lazy-support";
import { Suspense } from "react";
 
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}
      />
      <Suspense fallback={null}>
        <LazySupport />
      </Suspense>
    </>
  );
}

Copiarimport { Support, SupportConfig } from "@fluxolat/react";
import { type DefaultMessage, SenderType } from "@fluxolat/types";
 
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 App() {
  return (
    <>
      <SupportConfig
        defaultMessages={defaultMessages}
        quickOptions={quickOptions}
      />
      <Support />
    </>
  );
}