ChatLauncher

Markdown

A floating chat bubble for a website that opens a chat panel, full screen on phones.

Use it for: A chat a visitor opens from a corner of your website.
Not for: The main screen of a chat app. Try Chat.

The bubble sits in the corner of the page; open it to chat.

Installation

npm install @stackunseen/ui

import { ChatLauncher } from '@stackunseen/ui/chat';

Styles: @stackunseen/ui/styles.css and @stackunseen/ui/chat.css

Usage and props

Import this component from @stackunseen/ui/chat. Load @stackunseen/ui/styles.css first, then @stackunseen/ui/chat.css.

Put a Chat inside. The panel stays mounted while closed so the conversation and draft survive; count unread replies on your side.

Supported inputs

This is the public signature used by this example. Open Code to see how the values and callbacks fit together.

open · onOpenChange · title · children · label? · placement?: bottom-end | bottom-start · unread?

How state and callbacks work

All props

Loading…

For your coding agent

Give the agent this page instead of a screenshot. The prompt wraps the page with the install and import lines and the rule that your server, not a click, completes an action.

Contract: open · onOpenChange · title · children · label? · placement?: bottom-end | bottom-start · unread?
Keeps honest: Put a Chat inside. The panel stays mounted while closed so the conversation and draft survive; count unread replies on your side.
MCP: read_component "ChatLauncher" on the docs endpoint

Open the Markdown file

Keyboard and customization

Keyboard

The bubble reports aria-expanded. Opening focuses the composer; Escape or Close returns focus to the bubble. The panel is non-modal, so the page stays usable.

Customization

Change shared colors, spacing, corners and icons with the theme. Use the component's supported props to adapt its content and layout. Customization guide and Theme Studio