React

One component, <ConcatflowAssistant>, for both doors. Works with Next.js, Remix, Vite and any React 18+ app.

npm install @concatflow/embed

import { ConcatflowAssistant } from "@concatflow/embed/react";

The component loads widget.js once, in an effect, and destroys the assistant when it unmounts. It is safe to import in server-rendered code.

Public door

SearchBar.tsx

import { ConcatflowAssistant } from "@concatflow/embed/react";

export function SearchBar() {
  return <ConcatflowAssistant siteToken="st_YOUR_SITE_TOKEN" launcher="bar" className="h-11" />;
}

Per-user door

Pass the token your server opened, and a function that opens a new one.

Assistant.tsx

"use client";
import { ConcatflowAssistant } from "@concatflow/embed/react";

async function renew(): Promise<string> {
  const res = await fetch("/api/concatflow/session", { method: "POST" });
  if (!res.ok) throw new Error("Could not open a Concatflow session");
  return (await res.json()).token;
}

export function Assistant({ customerId, token }: { customerId: string; token: string }) {
  return (
    <ConcatflowAssistant
      key={customerId}
      session={token}
      launcher="bubble"
      onSessionExpired={renew}
      onError={(err) => console.warn("Concatflow:", err.message)}
    />
  );
}

The "use client" line is for Next.js App Router. Other setups ignore it. For the server route, see Per-user door.

How props behave

Prop	On change
session	The new token goes to the running assistant. The conversation stays.
siteToken, launcher, theme, accent, placeholder, base	The assistant is destroyed and created again.
onSessionExpired, onError	The latest function is used. Nothing restarts.
key	React remounts the component: a fresh assistant. Use it when the customer changes.

Where it renders

• launcher="bubble" (default): the bubble floats in the bottom-right corner. The component renders nothing in place.
• launcher="bar": the component renders a <div> and the bar inside it. Size and place it with className or style. The bar is 42px high and fills the width of that <div>.

import { ConcatflowAssistant } from "@concatflow/embed/react";

<ConcatflowAssistant siteToken="st_YOUR_SITE_TOKEN" launcher="bar" style={{ maxWidth: 560 }} />;

Errors

onError receives an Error when widget.js fails to load (offline, blocked by a CSP or an ad blocker) or when the options are invalid. Without onError, the component logs to console.error. It never throws during render.

Server-side rendering

Nothing runs on the server. The component renders an empty <div> (bar) or nothing (bubble), then loads the assistant in the browser.

All props are listed in the React reference.