Integration Modes

Integration Modes

The widget supports three integration patterns to fit different use cases:

Popover (Recommended)

Displays the widget as a floating popover attached to a trigger element. Best for maintaining existing UI flow.

<Widget.Popover config={config}>
  <Widget.Popover.Trigger asChild>
    <button>Open</button>
  </Widget.Popover.Trigger>

  <Widget.Portal>
    <Widget.Popover.Content />
  </Widget.Portal>
</Widget.Popover>

Modal

Shows the widget in a modal dialog overlay. Ideal for focused user interactions.

<Widget.Dialog config={config}>
  <Widget.Dialog.Trigger asChild>
    <button>Open</button>
  </Widget.Dialog.Trigger>

  <Widget.Portal>
    <Widget.Dialog.Content />
  </Widget.Portal>
</Widget.Dialog>

Embedded

Renders the widget directly inline with your content. Perfect for dedicated pages or sections.

<Widget config={config} />