Skip to main content
The launcher you pass in your page is the one used. It does not depend on the dashboard.

​
Inline bar

The bar is a 42px pill that fills the width of its container. target is an element or a CSS selector. With <concatflow-assistant>, the bar renders where the element is.
  • ⌘ K or Ctrl K focuses the bar.
  • Enter asks. The answer unfolds in a card under the bar, about 560px wide, or 880px when the answer needs room. Near the right edge of the window, the card opens to the left.
  • While the assistant answers, a pulsing square replaces the shortcut hint. A new question waits for the answer.
  • A click outside folds the card and keeps the question. Focus the bar again and the answer reopens.
  • Esc folds the card and clears the bar.

​
⌘K bar

Leave out target:
Nothing shows until the visitor presses ⌘ K or Ctrl K, or until you call open(). The bar then appears centred over a dimmed page. A click on the backdrop or Esc closes it. Open it from your own button:

​
Bubble

A round button sits 20px from the bottom-right corner. A click opens a panel above it, up to 400px wide. The panel grows with the answer up to 70% of the window height, then scrolls. A control inside the panel can expand it to full screen. Esc leaves full screen, then closes the panel.

​
What all three share

  • Lazy. The iframe is created on first use, never on page load. Pages that never use the assistant pay only for widget.js.
  • Kept. Closing hides the iframe without removing it. The conversation is still there when the visitor reopens it.
  • Isolated. Styles live in a Shadow DOM. Your CSS does not leak in, and the assistant’s CSS does not leak out.
  • On top. The bubble, the card and the ⌘K backdrop use a very high z-index so your layout cannot hide them.

​
Several assistants on one page

You can init more than one. Each one talks only to its own iframe.
Only one should use the ⌘K shortcut: every bar listens to it.