Chat Compact offers customization options to match your brand identity and user experience requirements. You can tailor the visual appearance by applying custom CSS to the widget's HTML components.
This guide covers the stable srct-cc-* styling hooks for Chat Compact. For layout properties and integration requirements, see Overview. For API and integration examples, see API reference and examples.
Custom styling lets you tailor the aesthetics of the Chat Compact widget to your requirements. Apply custom CSS properties to the widget's underlying HTML components. All customization takes place within the scope of the .sr-bb.sr-chat-compact selector class so overrides apply only to Chat Compact.
The srct-cc-* classes are the designated styling classes for Chat Compact.
Only srct-cc-* classes are intended for client overrides. Internal sr-chat-compact-* structure and srm-* state modifiers may change without notice — use widget props such as layoutMode and variant to control layout instead of CSS.
.sr-bb.sr-chat-compact .srct-cc-message-username {
color: #your-brand-accent;
}
.sr-bb.sr-chat-compact .srct-cc-message-vip {
color: #your-jackpot-accent;
}
.sr-bb.sr-chat-compact .srct-cc-composer-send-button {
color: #your-send-accent;
}| Class Name | Description |
|---|---|
srct-cc-container | Root container for the widget shell. |
srct-cc-wrapper | Layout wrapper around header and message areas. |
srct-cc-messages-area | Message list, compact ticker, or three-row stack area. |
srct-cc-actions-rail | Vertical action rail beside the three-row compact layout. |
srct-cc-docked-reactions | Docked reactions chip in compact layout. |
srct-cc-scroll-to-bottom | Scroll-to-bottom button in full layout. |
| Class Name | Description |
|---|---|
srct-cc-header | Header container (standard or rail layout). |
srct-cc-header-root | Main header bar with channel info and controls. |
srct-cc-header-pulse | Live activity pulse rings around the header. |
srct-cc-header-queue | Queued-message indicator in the header. |
srct-cc-header-count | Participant count label (for example, "42 watching"). |
srct-cc-header-collapse | Collapse chat button. |
srct-cc-header-channel-trigger | Channel selector dropdown trigger. |
srct-cc-header-rail | Three-row rail container for compact header actions. |
srct-cc-header-rail-button | Rail button that opens the channel panel. |
srct-cc-header-dropdown | Dropdown dialog for the channel list. |
| Class Name | Description |
|---|---|
srct-cc-channel-list | Channel list panel container. |
srct-cc-channel-list-item | Individual channel row. |
srct-cc-channel-list-name | Channel name label. |
srct-cc-channel-list-count | Participant count for a channel. |
srct-cc-channel-list-section-title | Section title above the channel list. |
| Class Name | Description |
|---|---|
srct-cc-ticker | Single-row compact ticker root (clickable to open full layout). |
srct-cc-ticker-preview | Ticker preview surface behind scrolling messages. |
srct-cc-ticker-item | Individual message item in the ticker. |
srct-cc-ticker-username | Username in a ticker message. Also uses srct-cc-message-self, srct-cc-message-vip, or srct-cc-message-announcement for special message types. |
srct-cc-ticker-text | Message body text in the ticker. |
srct-cc-ticker-empty | Empty-state label when no messages are available. |
| Class Name | Description |
|---|---|
srct-cc-stack | Three-row compact stack root (clickable to open full layout). |
srct-cc-stack-row | Individual message row in the stack. |
srct-cc-stack-username | Username in a stack row. Also uses srct-cc-message-self for the current user's messages. |
srct-cc-stack-text | Message body text in a stack row. |
srct-cc-stack-empty | Empty-state label when no messages are available. |
| Class Name | Description |
|---|---|
srct-cc-message | Standard message container in the full message list. |
srct-cc-message-username | Other users' display names. |
srct-cc-message-text | Message body text. |
srct-cc-message-self | Current user's display name. Shared with compact ticker and stack layouts. |
srct-cc-message-vip | Jackpot / VIP message highlight. Shared with compact ticker. |
srct-cc-message-announcement | Announcement or downtime message highlight. Shared with compact ticker. |
srct-cc-message-vip-badge | "JACKPOT" or "WARNING" badge on VIP and announcement messages. |
| Class Name | Description |
|---|---|
srct-cc-composer | Full-layout composer container. |
srct-cc-composer-input-row | Input row wrapping the text field and send button. |
srct-cc-composer-input | Text input field. |
srct-cc-composer-send-button | Send button (enabled state). |
srct-cc-composer-send-button-disabled | Send button (disabled state). |
srct-cc-composer-reactions-slot | Reactions bar below the input row. |
| Class Name | Description |
|---|---|
srct-cc-reactions-control | Reactions control wrapper (trigger and picker). |
srct-cc-reactions-trigger | Button that opens the reactions picker. |
srct-cc-reactions-picker | Reactions picker popup. |
srct-cc-reactions-option | Individual reaction option in the picker. |
srct-cc-reactions-fly | Floating reaction animation element. |
| Class Name | Description |
|---|---|
srct-cc-vip-takeover | VIP or announcement takeover banner container. |
srct-cc-vip-takeover-badge | "JACKPOT" or "WARNING" badge in the takeover banner. |
srct-cc-vip-takeover-username | Username in the takeover banner. |
srct-cc-vip-takeover-text | Message text in the takeover banner. |
srct-cc-vip-takeover-close | Dismiss button for announcement takeovers. |
srt-*)Most Chat Compact surfaces also inherit the client theme via standard srt-* classes for backgrounds, neutral surfaces, text opacity, elevation, and hover states. Configure these through your client theme.css as described in Theming widgets. Override them the same way as other widgets: .sr-bb .srt-<class> { … }, ideally scoped under .sr-chat-compact when targeting this widget only.
Use srct-cc-* hooks for Chat Compact–specific branding (usernames, VIP highlights, composer controls, reactions). Use srt-* for global surfaces shared across widgets.
theme.css (srt-*); tune Chat Compact branding via srct-cc-* overrides..sr-bb.sr-chat-compact.srct-cc-message-username, not camelCase).sr-chat-compact-* or srm-* classes — they are not part of the public styling contract..sr-bb.sr-chat-compact {
/* your overrides */
}Use the properties below with srct-cc-* classes. Other properties may work but are not supported across releases.
Allowed
| Property | Notes |
|---|---|
color | Text and icon tint |
background-color | Solid fills |
background | Gradients and layered fills |
border-color | Border tint only |
outline-color | Focus ring tint |
fill | SVG fill |
stroke | SVG stroke |
opacity | Transparency |
box-shadow | Color or elevation tint only |
text-shadow | Text glow or depth |
caret-color | Composer input caret |
Not advised
Avoid spacing and geometry properties — they may conflict with future layout updates:
padding, margin, top, right, bottom, left, width, height, border-radius, gap, transform (when used for layout), font-size, line-height
Include custom styles after the widget theme stylesheet. Use at least two class selectors (for example .sr-bb.sr-chat-compact .srct-cc-message-username) so rules are not overridden by CSS normalization.