# Support widget

Embed a chat assistant as a floating button + window on any site — isolated by Shadow DOM, so it never clashes with the host page.

Drop a chat assistant into the corner of any page. A floating button toggles a compact `<kai-chat>` window; because the component lives in its own Shadow DOM, the host site's CSS can't leak in and the widget's styles can't leak out. The page below is a placeholder host — scroll it, toggle its light/dark, and chat with the widget.

## How it works

The widget is one `<kai-chat>` element positioned `fixed` in the corner, shown/hidden by a button. Nothing else on the host page changes.

```html
<!-- a floating launcher + the chat window -->
<button id="fab" aria-label="Open chat">Chat</button>
<div id="panel" hidden>
  <kai-chat id="widget" chat-title="Help" prose-size="sm"></kai-chat>
</div>

<script type="module">

  await customElements.whenDefined('kai-chat');

  const fab = document.getElementById('fab');
  const panel = document.getElementById('panel');
  const chat = document.getElementById('widget');

  chat.suggestions = ['How do I reset my password?', 'What are your pricing tiers?'];
  fab.addEventListener('click', () => { panel.hidden = !panel.hidden; });
  chat.addEventListener('kai-submit', (e) => { /* stream your reply (see Drop-in chat) */ });
</script>
```

```css
#panel { position: fixed; right: 1.5rem; bottom: 5rem; width: 380px; height: 460px; }
#fab   { position: fixed; right: 1.5rem; bottom: 1.5rem; }
```

Because of the Shadow-DOM boundary, you don't need to scope the widget's styles or worry about the host's reset/utility CSS reaching it.

## Next steps

- **[Drop-in chat](/examples/drop-in-chat/)** — the streaming loop the widget uses.
- **[Theming](/guides/theming/)** — match the widget to your brand.
- **[`kai-chat` reference](/components/chat/)** — `proseSize`, `suggestions`, `triggers`, and more.