Chat AI Agent CSS Customization Guide

All Quack Chat widget components expose CSS class names prefixed with qc- that you can target to override styles from outside the widget.

Class Name Reference

Layout & Container

Class	Component	Description
`.qc-Chat__Trigger`	Widget trigger button	The floating chat button
`.qc-Chat__Widget`	Widget wrapper	Outermost widget `Box`
`.qc-Chat__Widget__Card`	Widget card	The main card container
`.qc-Chat__Background`	Widget card	Target this to override the chat background
`.qc-Chat__Widget_Popover`	Popover container	Desktop popover wrapper
`.qc-Chat__Widget_Dialog`	Dialog container	Mobile fullscreen dialog wrapper

Header & Footer

Class	Component	Description
`.qc-Chat__Header`	Header	Top bar with name, agent info, and action buttons
`.qc-Chat__Footer`	Footer	"Powered by Quack AI" bar

Messages

Class	Component	Description
`.qc-Chat__Messages`	Messages container	Scrollable message area wrapper
`.qc-Chat__Messages_Viewport`	Messages viewport	Inner message list (padding, gap)
`.qc-Chat__Message`	Standard message	Individual user/agent/bot message row
`.qc-Chat__MessageText`	Message text	Markdown-rendered message content
`.qc-Chat__MessageFeedback`	Feedback buttons	Thumbs up/down row
`.qc-Chat__SystemMessage`	System messages	Agent joined, close chat, connecting messages
`.qc-Chat__ErrorMessage`	Error message	Error display with optional escalation
`.qc-Chat__FileMessage`	File message	File attachment row
`.qc-Chat__FormMessage`	Form message	Single-select form options
`.qc-Chat__BouncingLoader`	Loading dots	Typing/loading indicator
`.qc-message-animate`	New message	Temporarily applied to newly arrived messages

Input

Class	Component	Description
`.qc-Chat__InputArea`	Input wrapper	Outer input container (includes file upload area)
`.qc-Chat__Input`	TextArea	The message text input field
`.qc-Chat__CTAButton`	Send / CTA buttons	Send button, acknowledge button, start new chat button

Email & Escalation

Class	Component	Description
`.qc-Chat__RequestEmail`	Email request	Escalation email input message
`.qc-Chat__RequestEmailForm`	Email form	Extended escalation form (Dremio)
`.qc-Chat__Requset_Email__Input`	Email input card	The email input card within request messages

CSAT (Customer Satisfaction)

Class	Component	Description
`.qc-Chat__CSAT`	CSAT survey	Satisfaction rating container
`.qc-Chat__CSAT__ScoreButton`	Score button	Individual rating button
`.qc-Chat__CSAT__ScoreButton__Hint`	Score hint	Hint text below score buttons
`.qc-Chat__CSATComment`	Comment area	CSAT comment input wrapper
`.qc-Chat__CSAT__Comment`	Comment card	CSAT comment input card

Other

Class	Component	Description
`.qc-Chat__StartNewChat`	Start new chat	End-of-chat area with "Start New Chat" button
`.qc-Chat__QuestionsContext`	Suggested questions	"For you" suggested questions area
`.qc-Chat__Error`	Error page	Full error fallback view
`.qc-Chat__Error__Avatar`	Error avatar	Avatar shown in error state
`.qc-Chat__SessionNotification`	Notification overlay	Session notification backdrop layer
`.qc-Chat__SessionNotification__Card`	Notification card	The notification content card
`.qc-Chat__Image_Wrapper`	Image wrapper	Inline image container
`.qc-Chat__Image_Overlay`	Image overlay	Image hover actions overlay
`.qc-Chat__DropdownMenu__Content`	Dropdown menu	Header dropdown menu content
`.qc-Chat__DropdownMenu__Item`	Dropdown item	Individual dropdown menu item

Usage Examples

Override chat background

.qc-Chat__Background {
  background: #f5f5f5 !important;
}

Custom header styling

.qc-Chat__Header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

Change message bubble appearance

.qc-Chat__Message .qc-Chat__MessageText {
  font-size: 15px;
  line-height: 1.6;
}

Style the send button

.qc-Chat__CTAButton {
  background-color: #4f46e5 !important;
  border-radius: 12px !important;
}

Hide the footer

.qc-Chat__Footer {
  display: none;
}

Custom notification overlay

.qc-Chat__SessionNotification {
  backdrop-filter: blur(8px);
  background: rgba(0, 0, 0, 0.2);
}

.qc-Chat__SessionNotification__Card {
  border-radius: 12px;
}

Notes

Use !important when overriding styles set inline or by Radix UI.
All class names are stable and safe to target in production.
Classes are additive - components may have multiple qc- classes for granular targeting. Collapse

Was this helpful?

Still need help? Share an idea