Bar or bubble

Three launchers: an inline search bar, a ⌘K bar, or a chat bubble. Same assistant, same conversation.

Launcher	Code	Best for
Inline bar	launcher: "bar" with a target	A search field in your header or on a dashboard
⌘K bar	launcher: "bar", no target	Apps where power users live on the keyboard
Bubble	launcher: "bubble" (default)	Help-style access from any page

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

Inline bar

Concatflow.init({ siteToken: "st_YOUR_SITE_TOKEN", launcher: "bar", target: "#search" });

<concatflow-assistant site-token="st_YOUR_SITE_TOKEN" launcher="bar"></concatflow-assistant>

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:

Concatflow.init({ siteToken: "st_YOUR_SITE_TOKEN", launcher: "bar" });

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:

const assistant = Concatflow.init({ siteToken: "st_YOUR_SITE_TOKEN", launcher: "bar" });
document.querySelector("#ask")?.addEventListener("click", () => assistant.open());

Bubble

Concatflow.init({ siteToken: "st_YOUR_SITE_TOKEN" });

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.

Concatflow.init({ siteToken: "st_PUBLIC_CATALOG", launcher: "bar", target: "#search" });
Concatflow.init({ session: token, launcher: "bubble" });

Only one should use the ⌘K shortcut: every bar listens to it.