> ## Documentation Index
> Fetch the complete documentation index at: https://docs.concatflow.com/llms.txt
> Use this file to discover all available pages before exploring further.

# 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

```js theme={"system"}
Concatflow.init({ siteToken: "st_YOUR_SITE_TOKEN", launcher: "bar", target: "#search" });
```

```html theme={"system"}
<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.

* <kbd>⌘</kbd> <kbd>K</kbd> or <kbd>Ctrl</kbd> <kbd>K</kbd> focuses the bar.
* <kbd>Enter</kbd> 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.
* <kbd>Esc</kbd> folds the card and clears the bar.

## ⌘K bar

Leave out `target`:

```js theme={"system"}
Concatflow.init({ siteToken: "st_YOUR_SITE_TOKEN", launcher: "bar" });
```

Nothing shows until the visitor presses <kbd>⌘</kbd> <kbd>K</kbd> or <kbd>Ctrl</kbd> <kbd>K</kbd>, or until you call `open()`. The bar then appears centred over a dimmed page. A click on the backdrop or <kbd>Esc</kbd> closes it.

Open it from your own button:

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

## Bubble

```js theme={"system"}
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. <kbd>Esc</kbd> 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.

```js theme={"system"}
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.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.