Custom CSS is injected inside the widget iframe. Prefer these hooks over fragile Tailwind utility selectors.

Audience	Difficulty
Integrators / brand designers	Intermediate

How Custom CSS is applied

INFO

Paste CSS in the agent Custom CSS setting. It is injected as a <style> tag inside the widget (for example #new-widget-custom-css / style[data-new-widget="custom-css"]). It does not style the host page bubble.

Related global selectors:

Selector	Purpose
`.dark`	Dark mode on `document.documentElement`
`#new-widget-custom-css`	Injected custom CSS `<style>` tag
`style[data-new-widget="custom-css"]`	Attribute on that style tag
`link[data-new-widget="preload-avatar"]`	Avatar preload link

Example:

Root and states

Class	Element
`.agent-widget-root`	Outermost widget container
`.agent-widget-main`	Main scrolling content panel
`.agent-widget-scrollbar`	Scrollbar styling hook
`.agent-widget-loading`	Full-widget loading state
`.agent-widget-error`	Full-widget error state

Header

Class	Element
`.agent-widget-header`	Header root
`.agent-widget-header-gradient`	Decorative gradient layer
`.agent-widget-header-inner`	Inner layout wrapper
`.agent-widget-header-text`	Title / subtitle block
`.agent-widget-header-title`	Title text
`.agent-widget-header-subtitle`	Subtitle text
`.agent-widget-header-controls`	Menu / minimize group
`.agent-widget-header-minimize-btn`	Minimize / close button

Class	Element
`.agent-widget-header-menu-trigger`	Menu trigger button
`.agent-widget-header-menu-popover`	Menu popover content
`.agent-widget-header-menu-theme-colors`	Theme color grid (if enabled)
`.agent-widget-header-menu-theme-color-btn`	Individual theme color button
`.agent-widget-header-menu-theme-mode-btn`	Light / dark toggle
`.agent-widget-header-menu-download-btn`	Download transcript item
`.agent-widget-header-menu-end-session-btn`	End / reset session item

Class	Element
`.agent-widget-bottom-nav`	Bottom nav root
`.agent-widget-bottom-nav-chat-tab`	Chat / home tab
`.agent-widget-bottom-nav-integration-tab`	Integration tab (calendar / link / social / WhatsApp)
`.agent-widget-bottom-nav-news-tab`	News tab

Data attributes on integration tabs:

Attribute	Values / notes
`data-tab-type`	`iframe` \| `whatsapp` \| `link` \| `social`
`data-tab-provider`	Provider slug when set (e.g. `calendly`, `whatsapp`, `youtube`, `facebook`)
`data-tab-id`	Fallback when provider is missing or `other`

Agent selection / home

Class	Element
`.agent-widget-agent-selection`	Agent selection view root
`.agent-widget-agent-selection-card`	List card container
`.agent-widget-agent-list`	List wrapper
`.agent-widget-agent-item`	Single agent row
`.agent-widget-agent-avatar`	Avatar container
`.agent-widget-agent-info`	Name / info next to avatar
`.agent-widget-agent-select-btn`	Select chevron / button
`.agent-widget-recent-messages`	Recent messages section (if enabled)
`.agent-widget-recent-message-card`	Recent message card (if enabled)

Data attributes on agent items:

Attribute	Notes
`data-agent-id`	Chatbot id
`data-agent-index`	0-based index

Pre-chat form

Class	Element
`.agent-widget-prechat`	Prechat view root
`.agent-widget-prechat-header`	Prechat header bar
`.agent-widget-prechat-back-btn`	Back button
`.agent-widget-prechat-form`	Scrolling form container
`.agent-widget-prechat-title`	Form title
`.agent-widget-prechat-subtitle`	Form subtitle
`.agent-widget-prechat-form-element`	`<form>` element
`.agent-widget-prechat-submit-btn`	Submit button

Pre-chat overlay

Class	Element
`.agent-widget-overlay`	Overlay root
`.agent-widget-overlay-backdrop`	Dimmed backdrop
`.agent-widget-overlay-card`	Bottom sheet card
`.agent-widget-overlay-close-x`	Close control
`.agent-widget-overlay-icon`	Icon / emoji
`.agent-widget-overlay-subtitle`	Small uppercase label
`.agent-widget-overlay-title`	Overlay title
`.agent-widget-overlay-body`	Body copy
`.agent-widget-overlay-buttons`	Primary button row
`.agent-widget-overlay-btn`	Overlay button
`.agent-widget-overlay-btn-0`	First button (index suffix)
`.agent-widget-overlay-links`	Link row
`.agent-widget-overlay-link-0`	First link (index suffix)

Chat shell

Class	Element
`.agent-widget-chat`	Chat view root
`.agent-widget-chat-header`	Chat header bar
`.agent-widget-chat-back-btn`	Back button
`.agent-widget-chat-agent-badge`	Active agent badge
`.agent-widget-chat-messages`	Messages area wrapper
`.agent-widget-chat-conversation`	Conversation scroller
`.agent-widget-chat-input-area`	Bottom input area
`.agent-widget-chat-prompt-input`	Prompt input wrapper
`.agent-widget-chat-powered-by`	Powered-by footer

Chat messages

Class	Element
`.agent-widget-message-row`	Wrapper around a message
`.agent-widget-message`	Message flex row
`.agent-widget-message-user`	User message
`.agent-widget-message-assistant`	Assistant message
`.agent-widget-message-bubble`	Bubble (background / radius)
`.agent-widget-message-text`	Plain user text
`.agent-widget-message-markdown`	Assistant markdown body
`.agent-widget-typing`	Typing / pending assistant row
`.agent-widget-typing-bubble`	Typing bubble
`.agent-widget-typing-loader`	Loader inside typing bubble

Data attributes:

Attribute	Notes
`data-message-role`	`user` \| `assistant`
`data-message-id`	Message id

Composer (message input)

Class	Element
`.agent-widget-composer`	Composer section
`.agent-widget-composer-input`	Prompt input shell
`.agent-widget-composer-textarea`	Textarea
`.agent-widget-composer-actions`	Action buttons column
`.agent-widget-composer-mic`	Optional voice / mic button
`.agent-widget-composer-send`	Send / stop button

Class	Element
`.agent-widget-welcome`	Panel root
`.agent-widget-welcome-header`	Header block
`.agent-widget-welcome-logo`	Optional logo
`.agent-widget-welcome-title`	Panel title
`.agent-widget-welcome-description`	Panel description
`.agent-widget-welcome-tabs`	Tab list
`.agent-widget-welcome-tab`	Tab trigger
`.agent-widget-welcome-tab-content`	Tab body
`.agent-widget-welcome-carousel`	Carousel layout
`.agent-widget-welcome-grid`	Grid layout
`.agent-widget-welcome-card`	Card root
`.agent-widget-welcome-card-image`	Card image
`.agent-widget-welcome-card-image-fallback`	Image fallback
`.agent-widget-welcome-card-scrim`	Gradient overlay
`.agent-widget-welcome-card-body`	Text + buttons
`.agent-widget-welcome-card-title`	Card title
`.agent-widget-welcome-card-description`	Card description
`.agent-widget-welcome-card-buttons`	Button row
`.agent-widget-welcome-card-btn`	Any card button
`.agent-widget-welcome-card-btn-primary`	Primary button
`.agent-widget-welcome-card-btn-secondary`	Secondary buttons

Data attributes:

Attribute	Notes
`data-tab-id`	On tabs / tab content
`data-card-id`	On cards

Function Tool Call approval card

Class	Element
`.agent-widget-tool-approval`	Card root
`.agent-widget-tool-approval-header`	Icon + title row
`.agent-widget-tool-approval-icon`	Icon wrap
`.agent-widget-tool-approval-title`	Title label
`.agent-widget-tool-approval-message`	Approval message text
`.agent-widget-tool-approval-args`	Args list
`.agent-widget-tool-approval-arg`	One arg row
`.agent-widget-tool-approval-arg-key`	Arg name
`.agent-widget-tool-approval-arg-value`	Arg value
`.agent-widget-tool-approval-actions`	Approve / Decline row
`.agent-widget-tool-approval-approve`	Approve button
`.agent-widget-tool-approval-decline`	Decline button
`.agent-widget-tool-approval-status`	After-response chip
`.agent-widget-tool-approval-status-approved`	Approved chip
`.agent-widget-tool-approval-status-declined`	Declined chip

Live chat (voice)

Class	Element
`.agent-widget-live-chat`	Live chat view (with `.agent-widget-chat`)
`.agent-widget-live-voice-area`	Voice controls area
`.agent-widget-live-text-input`	Optional text input under voice UI

Calendar / iframe integrations

Class	Element
`.agent-widget-calendar`	Calendar view root
`.agent-widget-calendar-iframe-wrap`	Iframe wrapper
`.agent-widget-calendar-iframe`	Iframe element
`.agent-widget-calendar-empty`	Empty state

WhatsApp integration

Class	Element
`.agent-widget-whatsapp`	WhatsApp view root
`.agent-widget-whatsapp-logo`	Logo wrapper
`.agent-widget-whatsapp-title`	Title
`.agent-widget-whatsapp-subtitle`	Subtitle
`.agent-widget-whatsapp-btn`	Primary CTA

Class	Element
`.agent-widget-link`	Link view root
`.agent-widget-link-logo`	Logo wrapper
`.agent-widget-link-title`	Title
`.agent-widget-link-subtitle`	Subtitle
`.agent-widget-link-btn`	Open-link CTA

News

Class	Element
`.agent-widget-news`	News view root
`.agent-widget-news-back-btn`	Back button (detail)
`.agent-widget-news-detail`	Detail article container
`.agent-widget-news-detail-image`	Detail hero image
`.agent-widget-news-detail-title`	Detail title
`.agent-widget-news-detail-summary`	Detail summary
`.agent-widget-news-heading`	List heading
`.agent-widget-news-item`	List item
`.agent-widget-news-item-image`	List item image
`.agent-widget-news-item-title`	List item title
`.agent-widget-news-item-summary`	List item summary

Data attribute:

Attribute	Notes
`data-news-index`	0-based index on list items

Quick recipes

Hide powered-by footer

Brand header title

Brand welcome primary button

Style approval card border

Style a specific integration tab

Chat Widget Custom CSS Classes

How Custom CSS is applied

Root and states

Header

Header menu

Bottom navigation

Agent selection / home

Pre-chat form

Pre-chat overlay

Chat shell

Chat messages

Composer (message input)

Function Tool Call approval card

Live chat (voice)

Calendar / iframe integrations

WhatsApp integration

News

Quick recipes

Chat Widget Custom CSS Classes

How Custom CSS is applied#

Root and states#

Header#

Header menu#

Bottom navigation#

Agent selection / home#

Pre-chat form#

Pre-chat overlay#

Chat shell#

Chat messages#

Composer (message input)#

Welcome panel (promo cards)#

Function Tool Call approval card#

Live chat (voice)#

Calendar / iframe integrations#

WhatsApp integration#

Link / social integration#

News#

Quick recipes#

How Custom CSS is applied

Root and states

Header

Header menu

Bottom navigation

Agent selection / home

Pre-chat form

Pre-chat overlay

Chat shell

Chat messages

Composer (message input)

Welcome panel (promo cards)

Function Tool Call approval card

Live chat (voice)

Calendar / iframe integrations

WhatsApp integration

Link / social integration

News

Quick recipes