Skip to content
kitn AI/UI

Support widget

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

Section titled “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.

<!-- 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">
  import '@kitn.ai/ui/elements';
  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>
#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

Section titled “Next steps”