Which launcher and display mode should I use for the CMD+K widget?

Launcher vs display mode

Two independent settings control how the widget shows up on your page:

• Launcher (data-cmdk-launcher) — the element the loader injects for visitors to click: a corner bubble, an avatar, a side tab, a bottom pill, an in-page command bar, or nothing at all (custom).
• Display mode (data-cmdk-display) — how the chat surface appears once opened: a floating overlay, a docked inline side panel, or a full-page takeover.

Any launcher can be combined with any display mode, with one shortcut: data-cmdk-launcher="embed" always uses the fullpage display. Every value below can be set in the dashboard (Install tab) and updates live on every installed page; setting the attribute on the script tag overrides the dashboard for that page only.

Launchers

bubble (default)

A 56 px round button fixed in the bottom corner set by data-cmdk-position, filled with your accent color. Click toggles the chat.

<script async
  src="https://commandplusk.com/embed/widget.js"
  data-cmdk-widget="<WIDGET_ID>"
  data-cmdk-launcher="bubble"
  data-cmdk-position="right">
</script>

avatar

Same footprint and position as the bubble, but rendered as the assistant's "face": your widget icon (the square icon/favicon set in the dashboard, falling back to the logo) inside an accent-colored ring with a soft pulse and a green online dot. With no icon or logo set it shows a gradient sparkle instead. Good when the assistant has a name and personality.

<script async
  src="https://commandplusk.com/embed/widget.js"
  data-cmdk-widget="<WIDGET_ID>"
  data-cmdk-launcher="avatar">
</script>

tab

A slim vertical "Ask AI" tab glued to the middle of the left or right viewport edge (feedback-drawer style). Uses data-cmdk-position for the side. Least intrusive of the floating launchers — nothing covers your page's bottom corners.

<script async
  src="https://commandplusk.com/embed/widget.js"
  data-cmdk-widget="<WIDGET_ID>"
  data-cmdk-launcher="tab"
  data-cmdk-position="left">
</script>

pill

A translucent pill fixed at the bottom center showing your placeholder text and a ⌘K hint. Clicking it or pressing ⌘K/Ctrl+K toggles the chat. data-cmdk-position has no effect on the pill itself (it is always centered) but still decides which side the overlay/inline panel opens on.

<script async
  src="https://commandplusk.com/embed/widget.js"
  data-cmdk-widget="<WIDGET_ID>"
  data-cmdk-launcher="pill"
  data-cmdk-placeholder="Ask anything about your account…">
</script>

bar (in-page command palette)

Instead of a floating button, the loader mounts a ⌘K-style search bar inside an element you own — a page header, a docs sidebar, an empty state. data-cmdk-target is required: it's the CSS selector of the mount point and can't come from the dashboard because it's page-specific. If the selector matches nothing when the script runs, the loader warns in the console and falls back to the bubble.

Focusing the bar opens a dropdown of your configured starter prompts (Overview → Suggested prompts); typing filters them and offers to ask the free-text query. ↑/↓ navigate, ↵ runs the highlighted item or the typed text, Esc closes, and ⌘K/Ctrl+K focuses the bar from anywhere. Selecting an item opens the assistant and sends the message. Re-running the snippet into the same mount (SPA re-render, duplicated tag) replaces the existing bar rather than stacking a second one.

<div id="cmdk-mount" style="max-width: 560px"></div>

<script async
  src="https://commandplusk.com/embed/widget.js"
  data-cmdk-widget="<WIDGET_ID>"
  data-cmdk-launcher="bar"
  data-cmdk-target="#cmdk-mount"
  data-cmdk-placeholder="Search or ask…">
</script>

embed (full-page assistant)

Shorthand for "bubble launcher + ⌘K/Ctrl+K hotkey + fullpage display". The visitor gets a corner bubble; opening it takes over the whole viewport with the full-page assistant surface (personalized welcome, conversation-history sidebar). Any data-cmdk-display value is ignored for this launcher.

<script async
  src="https://commandplusk.com/embed/widget.js"
  data-cmdk-widget="<WIDGET_ID>"
  data-cmdk-launcher="embed">
</script>

custom (your own button)

Nothing is injected into your page. Open, close, and toggle the chat from any element you own through window.CommandK (see the JavaScript API) or the cmdk:host:* postMessage API. Works with every display mode — pair it with fullpage for a full-page assistant behind your own "Ask AI" menu item.

<!-- Queue calls made before the async loader lands (see JavaScript API below) -->
<script>
  window.CommandK = window.CommandK || {
    q: [], open: function () { this.q.push(["open", arguments]); },
  };
</script>

<script async
  src="https://commandplusk.com/embed/widget.js"
  data-cmdk-widget="<WIDGET_ID>"
  data-cmdk-launcher="custom"
  data-cmdk-display="inline">
</script>

<button onclick="window.CommandK.open()">Ask AI</button>

Display modes

overlay (default)

When to use: marketing sites, docs, and most product pages — the classic support-chat feel. A floating 380 × 600 px panel (capped at 80% of the viewport height) appears above your content, anchored to the bottom corner on the data-cmdk-position side, just above the launcher. The chat iframe is served from /embed/w/<WIDGET_ID>.

<script async
  src="https://commandplusk.com/embed/widget.js"
  data-cmdk-widget="<WIDGET_ID>"
  data-cmdk-display="overlay">
</script>

inline (docked side panel)

When to use: in-app copilots where visitors keep working while chatting — Grafana or Linear style. The chat becomes a full-height panel docked to the left or right edge (data-cmdk-position), sliding in when opened. If the viewport is wider than the panel width plus 320 px, the page's <body> margin is animated so your content reflows next to the panel; on narrower viewports the panel slides over the content instead.

<script async
  src="https://commandplusk.com/embed/widget.js"
  data-cmdk-widget="<WIDGET_ID>"
  data-cmdk-display="inline"
  data-cmdk-panel-width="380">
</script>

fullpage (viewport takeover)

When to use: a dedicated "AI assistant" destination — Mixpanel/Linear style — with a personalized welcome, conversation-history sidebar, and selectable visual styles. When opened, the iframe covers the entire viewport; it is served from /embed/full/<WIDGET_ID> rather than /embed/w/. Open it from any launcher, the ⌘K hotkey (embed/pill/bar launchers), or your own button via window.CommandK.open(); the visitor closes it to return to your app.

<script async
  src="https://commandplusk.com/embed/widget.js"
  data-cmdk-widget="<WIDGET_ID>"
  data-cmdk-display="fullpage">
</script>

<!-- equivalent shorthand (also adds the ⌘K hotkey):
<script async src="https://commandplusk.com/embed/widget.js"
  data-cmdk-widget="<WIDGET_ID>" data-cmdk-launcher="embed"></script> -->

Docked / native embed (inside your own layout)

When to use: an "AI assistant" page or panel that is part of your product's own layout — your navigation, your header, your typography — rather than a takeover on top of it. Combine custom + fullpage (or inline) with two attributes: data-cmdk-chrome="minimal" strips the surface's window controls and its logo/name header, and data-cmdk-font="inherit" makes it use your page font. Then move the iframe (iframe[data-cmdk-el="iframe"]) into your content area and size it like any other element; the loader still handles the token handshake, theme, and prefill.

<script async
  src="https://commandplusk.com/embed/widget.js"
  data-cmdk-widget="<WIDGET_ID>"
  data-cmdk-token="<END_USER_JWT>"
  data-cmdk-launcher="custom"
  data-cmdk-display="fullpage"
  data-cmdk-chrome="minimal"
  data-cmdk-font="inherit"
  data-cmdk-theme="light">
</script>

<section id="assistant-page">
  <header><h1>Assistant</h1></header>   <!-- your header; the iframe shows no second one -->
  <div id="assistant-mount" style="height: calc(100vh - 64px)"></div>
</section>

<script>
  // Dock the iframe once the loader has created it, then open it.
  const mount = document.getElementById("assistant-mount");
  const timer = setInterval(() => {
    const frame = document.querySelector('iframe[data-cmdk-el="iframe"]');
    if (!frame || !window.CommandK) return;
    clearInterval(timer);
    mount.appendChild(frame);
    frame.style.cssText = "position:static;display:block;width:100%;height:100%;border:0;opacity:1";
    window.CommandK.open();
  }, 50);
</script>

Attribute reference

Everything the loader reads from the <script> tag. "Dashboard setting" means the value configured on the widget's Install tab, fetched live on every page load.

JavaScript API (window.CommandK)

Put this in your <head>, before the loader tag. It makes every call safe from the first paint: anything called while the loader is still downloading is queued and replayed as soon as it lands.

<script>
  window.CommandK = window.CommandK || {
    q: [],
    open:     function () { this.q.push(["open", arguments]); },
    close:    function () { this.q.push(["close", arguments]); },
    toggle:   function () { this.q.push(["toggle", arguments]); },
    setTheme: function () { this.q.push(["setTheme", arguments]); },
    isOpen:   function () { return false; },
  };
</script>

The loader exposes the same controls for every launcher and display mode — they're the only way in for custom, and handy everywhere else (open the chat from a help menu, prefill a question from an error state, match your app's theme toggle).

// Open the chat. With text, the composer is prefilled; submit defaults to true
// (send immediately) — pass false to let the visitor edit first.
window.CommandK.open();
window.CommandK.open("How do I invite my team?");
window.CommandK.open("How do I invite my team?", false);

window.CommandK.close();
window.CommandK.toggle();
window.CommandK.isOpen();          // → boolean

// 'light' | 'dark' | 'auto' — other values are ignored.
window.CommandK.setTheme("dark");

• The script is loaded async, so window.CommandK only exists after the loader has run. A visitor who clicks your own button in that first moment gets nothing — with window.CommandK && window.CommandK.open() the click is silently swallowed and they have to click again. Install the queueing stub below in your page head and that never happens: calls made before the loader arrives are replayed the moment it does.
• The same controls are mirrored as cmdk:host:open, cmdk:host:close, cmdk:host:toggle, and cmdk:host:set_theme postMessages — see postMessage host API.
• Guided-tour helpers (fireTourEvent, snoozeWalkthroughs, resetWalkthroughs) live on the same object — see Guided tours & onboarding.