Floating Launcher

Turn the widget into a docked chat-bubble launcher with an expandable panel — the site-wide support-chat pattern — without any extra chrome components.

Overview

mode="inline" (the default) renders the widget exactly where you place it — zero behavior change from every other example in these docs. mode="floating" instead renders a fixed-position launcher bubble; clicking it opens an expandable panel containing the same widget.

Usage

tsx

<ChatterflyWidget
  {...props}
  mode="floating"
  position="bottom-right"        // or "bottom-left"
  defaultOpen={false}
  onOpenChange={(open) => console.log("panel", open)}
  launcherIcon={<MyChatIcon />}  // optional, defaults to a chat-bubble icon
/>

An unread-message badge increments while the panel is closed (driven internally from the same event stream as onMessage) and resets to zero when the panel opens.

Props

Name	Description
mode	`"inline" \| "floating"` — default `"inline"`.
position	`"bottom-right" \| "bottom-left"` — where the launcher bubble docks. Default `"bottom-right"`.
defaultOpen	Whether the floating panel starts open. Default false.
onOpenChange	(open: boolean) => void — fires whenever the panel opens/closes.
launcherIcon	ReactNode override for the default chat-bubble icon.

Styling

Style the launcher chrome with its own token set:

css

.my-widget-host {
  --cf-launcher-bg: #0ea5e9;
  --cf-launcher-fg: #ffffff;
  --cf-launcher-size: 56px;
  --cf-launcher-offset: 20px;
  --cf-launcher-panel-width: 380px;
  --cf-launcher-panel-height: 600px;
  --cf-launcher-badge-bg: #f97316;
  --cf-launcher-badge-fg: #ffffff;
}

Tip: The panel uses --cf-launcher-panel-width/--cf-launcher-panel-height instead of --cf-height — see --cf-height only applies to inline mode.