React

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.

Embedded assistant

Private databases

Public door

Per-user door

How props behave

Where it renders

Errors

Server-side rendering

​Public door

​Per-user door

​How props behave

​Where it renders

​Errors

​Server-side rendering

Public door

Per-user door

How props behave

Where it renders

Errors

Server-side rendering