Skip to content
+

Chat - Customer Support demo

A compact, embedded chat widget suited for customer support overlays and space-constrained layouts.

Compact chat widget

Set variant="compact" on ChatBox to switch the entire surface to a messenger-style layout with no bubbles, left-aligned messages, and author names as group headers. This variant is ideal for embedded support widgets, floating chat panels, and any context where vertical space is limited.

2
Component questions
Theme customization
Slot overrides
Component questions

Which component handles the composer?

Alice Chen
Alice Chen

Which component should I use for the message input area?

MUI Assistant
MUI Assistant

The composer is handled by the ChatBox automatically. You can override it with slots.composerRoot.

Alice Chen
Alice Chen

And what about slotProps for passing sx to the input?

API

See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.