<ConcatflowAssistant>

The React component from @concatflow/embed/react. React 18 or later.

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

<ConcatflowAssistant session={token} launcher="bubble" onSessionExpired={renew} />;
<ConcatflowAssistant siteToken="st_YOUR_SITE_TOKEN" launcher="bar" className="h-11" />;

The component takes the init options, except target, plus three of its own. React is an optional peer dependency of @concatflow/embed: only this entry point needs it.

Door

session · string

A session token from your server. A new value is passed to the running assistant with setSession.

siteToken · string

The public site token. Pass exactly one of session and siteToken.

Options

launcher · "bubble" | "bar" · default: "bubble"

With "bar", the component renders a <div> and the bar inside it. With "bubble", it renders nothing in place.

theme · "auto" | "light" | "dark" · default: "auto"

accent · string

placeholder · string

base · string

onSessionExpired · () => Promise<string>

The latest function is always used: an inline arrow function does not restart the assistant.

Component props

onError · (error: Error) => void · default: "console.error"

Called when widget.js fails to load or the options are invalid.

className · string

Applied to the bar’s container. launcher="bar" only.

style · CSSProperties

Applied to the bar’s container. launcher="bar" only.

Lifecycle

Event	Effect
Mount	Loads widget.js (once per page) and calls init.
session changes	setSession(session) on the running assistant.
siteToken, launcher, theme, accent, placeholder or base changes	destroy(), then a new init.
Switch between session and siteToken	destroy(), then a new init.
onSessionExpired added or removed	destroy(), then a new init. A new function alone changes nothing.
Unmount	destroy().

When the logged-in customer changes, change the component’s key. See When the customer changes.

Type

import type { ConcatflowAssistantProps } from "@concatflow/embed/react";