Skip to main content
FirstflowWidget is the drop-in shell that renders whatever experience is active. It reads runtime state from the provider, so it takes no experience props just placement options. Render it once, anywhere inside FirstflowProvider.
When no experience is active it renders nothing (or an empty mount slot in anchored mode).

​
Props

​
defaultMinimized
boolean
default:"false"
Start in the collapsed (resting) state. A newly-started experience always opens expanded regardless, so a minimize from a previous run never hides the next one.
​
alignWithNextComposerSibling
boolean
default:"false"
Anchor the widget above the next DOM sibling of the mount and inherit its top-left border radius as horizontal inset. Place the widget element directly before your chat composer.
​
alignWith
RefObject<HTMLElement>
Anchor above a specific element by ref, using the same border-radius inset. Takes precedence over alignWithNextComposerSibling.

​
Placement

By default the widget floats bottom-right. In anchored mode it grows upward from a zero-height mount slot useful for embedding above a chat input:

​
Minimize

The shell has a minimize toggle, and the minimize action can collapse it from inside a step. Minimizing keeps the experience alive on its current step (unlike dismiss, which ends it). Re-expand from the header.

​
Minimize as an action

A CTA or option can run a minimize action. It is non-terminal it collapses the widget without advancing or ending the run:
See the action model in SCHEMA.md.

​
Custom shell

If you need different markup, skip FirstflowWidget and render BlockRenderer inside your own panel driven by useFirstflow. See Blocks & custom shells.

​
Next

Drive the runtime with useFirstflow, or restyle the default shell in Theming.