CSS Class Reference

These are the selectors a chat room's markup carries on purpose, for you to target from the Custom CSS box. They are grouped here by the part of the room they belong to.

The same list is in the product: on a room's Customize tab, the CSS Class Guide button at the top right of the Pre-built Themes panel opens it in tabs, with a copy button beside every selector.

Before you write a rule

Add !important when you are overriding something. Colours, fonts and sizes set on the Customize tab are written straight onto the elements, and the room's own styling is served after your stylesheet, so a plain rule loses to both. Custom CSS versus the Customize fields explains when you need it and when you do not.

Use a field if one exists. Anything in the Appearance Reference or the Hide Elements Reference is better set there: validated input, and a loadCustomization key so you can vary it per embed instead of per room.

Only target what is on this page. Plenty of other class names are visible in a browser inspector and are not safe to write rules against — see Selectors to leave alone at the bottom.

Layout and structure

The shell the rest of the room hangs off.

Selector	What it targets
`.wrapper`	The outermost container. It lays out the sidebar, header, message area and composer, so this is where you set an overall radius, shadow or clipping.
`.chat-header`	The bar across the top of the chat area.
`.sidebar`	The sidebar as shown on a wide screen.
`.mobileSidebar`	The same sidebar as a full-screen overlay on a narrow screen.
`#chat-container-parent`	The scrolling pane the message list sits in. Use it for the pane's border or background rather than the list's own padding.
`.chat-container`	The message list itself. Inherited properties set here — most usefully `font-family` — reach every message.
`.input-area`	The composer row along the bottom.

Custom CSS
.wrapper {
  border-radius: 12px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
}

Selector	What it targets
`.chat-header`	The bar itself — background, height, bottom border, padding.
`#mobileMenuButton`	The menu button that opens the sidebar overlay. It also appears on a wide screen when the sidebar is collapsed.
`.mobileMenuNotification`	The unread badge on that button.
`.brandLogo`	The logo image in the header. Present only on rooms configured with your own branding.

Custom CSS
.chat-header {
  background-color: #101828 !important;
  border-bottom: none !important;
}

.brandLogo {
  max-height: 40px !important;
  object-fit: contain !important;
}

Selector	What it targets
`.sidebar`	The wide-screen sidebar: width, background, padding.
`.mobileSidebar`	The narrow-screen overlay version.
`.profile-section`	The signed-in visitor's avatar and name block at the top of the sidebar.
`.editProfileButtons`	The claim-profile and edit-profile buttons in that block.
`.channelsHeading`	The Channels heading.
`.channelsList`	The container holding the channel rows.
`.channelsItem`	One channel row, wide-screen sidebar.
`.channelsListItem`	One channel row, narrow-screen overlay.
`.activeChannel`	Added to whichever channel row is open, in either sidebar.
`.privateChatsHeading`	The Private Chats heading.
`.privateChatsList`	The container holding the conversation rows, narrow-screen overlay.
`.privateChatsItem`	One conversation row, wide-screen sidebar.
`.privateChatItem`	One conversation row, narrow-screen overlay.
`.onlineUsersHeading`	The Online users heading.
`.onlineUsersCount`	The count shown beside that heading.
`.onlineUsersList`	The container holding the user rows.
`.onlineUsersListItem`	One user row.
`.online-user`	The name text inside a user row or a conversation row.
`.moderatorUsernameSidebar`	Added to the row of a user who is a moderator, so you can mark them out.
`.loadMoreButton`	The Load More button under a long user list.
`.bannedUsersButton`	The Banned Users button. Moderators only.
`.logoutButton`	The Logout button.

The sidebar exists twice

A room renders both sidebars and shows whichever suits the width, and the channel and conversation rows have different class names in each. To restyle a row everywhere, write both selectors:

Custom CSS
.channelsItem,
.channelsListItem {
  padding: 8px 12px !important;
  border-radius: 6px !important;
}

Headings, the online-users list and its rows share their names across both, so they only need one rule.

Message list

Selector	What it targets
`#chat-container-parent`	The scrolling pane.
`.chat-container`	The list inside it.
`.chat-message`	Every message row. Set the rhythm of the list here — padding, margins, row radius.
`.chat-message:hover`	The hover state of a row.

The hover colour is also available as the custom property --chat-message-hover-bg, which is what the Chat Message Hover Color field sets. Reading it keeps a custom hover rule in step with the field:

Custom CSS
.chat-message:hover {
  background-color: var(--chat-message-hover-bg, #f8f8f8) !important;
}

A single message

Selector	What it targets
`.chat-message`	The whole row: avatar column, name, timestamp, body, reactions.
`.message-username`	The sender's name above the message.
`.moderatorUsername`	Added to that name when the sender is a moderator.
`.moderatorMessage`	Added to the whole row when the sender is a moderator.
`.message-timestamp`	The time shown beside the name.
`.profilePicContainer`	The avatar column of a message.
`.profile-avatar`	The initials avatar drawn for a user with no picture of their own. A user who has uploaded a picture gets a plain image instead, which you reach as `.profilePicContainer img` — style both if you are adding a border or changing the size.
`.repliedToMessageMessage`	The quoted text of the message being replied to, shown above a reply and in the composer while the reply is being written.
`.message-unapproved`	A visitor's own message while it is waiting for approval in a pre-moderated room.
`.likeReactionContainer`	The reactions strip under a message.
`.likeReactionButton`	The button that opens the reaction picker.
`.emojiReaction`	One reaction tag with its count.
`.waveReaction`, `.thumbsUpReaction`, `.clapReaction`, `.heartReaction`	The individual buttons inside the reaction picker.

Custom CSS
.message-username {
  color: #6366f1 !important;
  font-weight: 700 !important;
}

.message-timestamp {
  font-size: 11px !important;
  color: #9ca3af !important;
}

.moderatorMessage {
  border-left: 3px solid #6366f1 !important;
}

Two rows in the in-product guide are labels, not selectors

The CSS Class Guide lists the sender's name as .username and the time as .timestamp; the class names actually on those elements are .message-username and .message-timestamp, as above. Use these.

Composer

Selector	What it targets
`.input-area`	The whole composer row — background, top border, padding.
`.textarea-div`	The frame around the message input and its buttons: border, radius, fill.
`.textarea-div textarea`	The message input itself — font, size, line height, inner padding. It also carries the id `#messageTextArea` if you prefer to target it directly.
`.emojiButton`	The emoji picker trigger. The same class is also on the reaction picker under a message, so scope it with `.input-area` if you only mean the composer one.
`.input-area .button.is-success`	The send button.

Scope the send button

The send button is identified by a pair of general-purpose classes that other buttons in the room also use. Always qualify it with .input-area, or you will restyle buttons elsewhere:

Custom CSS
.input-area .button.is-success {
  border-radius: 8px !important;
  padding: 10px 20px !important;
}

Modals

The room's dialogs share one shell — joining, the room password prompt, editing or claiming a profile, a private conversation, the banned-users list, the list of who reacted — so these selectors restyle all of them together.

Selector	What it targets
`.modal-card`	The dialog box: width, radius, shadow.
`.modal-card-head`	Its title bar.
`.modal-card-title`	The title text in that bar.
`.modal-card-body`	The content area.
`.modal-card-foot`	The footer, which holds the action buttons.
`.modal-background`	The dimmed overlay behind the dialog.

Custom CSS
.modal-card {
  border-radius: 12px !important;
  max-width: 500px !important;
}

.modal-background {
  background-color: rgba(0, 0, 0, 0.6) !important;
  backdrop-filter: blur(4px) !important;
}

Modal appearance fields exist too — Modal Background Color, Modal Font Color, Modal Font, Modal Heading Font Size and Modal Label Font Size — see the Appearance Reference.

Chat bubble

The floating bubble and its close bar are a layer outside the chat room, so the Custom CSS box does not reach them. There are no selectors to target. Style the bubble with the four Customize fields instead:

Field	What it colours
Chat Bubble Color	The circular launcher.
Chat Bubble Icon Color	The icon inside the launcher.
Chat Bubble Header Background Color	The close bar above the open chat.
Chat Bubble Header Text Color	The text and icon in that bar.

Open the bubble and the chat inside it is an ordinary chat room, so every selector on this page applies there as usual.

Layout modes

When the header or the sidebar is hidden, the room re-lays itself out and the outer container picks up an extra class. Target these if you need to adjust a layout for one of those arrangements — most often to reclaim padding the missing region used to provide.

Selector	Applied when
`.hide-header-mode-wrapper-class`	The header is hidden.
`.hide-sidebar-mode-wrapper-class`	The sidebar is hidden.
`.hide-sidebar-and-header-mode-wrapper-class`	Both are hidden — the minimal embed.
`.collpase-sidebar-mode-wrapper-class`	The sidebar is collapsed rather than hidden. Note the spelling of the class name.

Custom CSS
.hide-sidebar-and-header-mode-wrapper-class {
  padding-left: 20px !important;
}

These depend on the Hide Header, Hide Sidebar and Collapse Sidebar settings, whether they come from the Customize tab or from loadCustomization, so a rule written against one of them only takes effect in that arrangement.

Special states

Selector	What it targets
`.chatOff`	The full-area overlay shown while the room is switched off.
`.chatOffMessage`	The message text inside that overlay.
`.message-unapproved`	A visitor's own message awaiting approval in a pre-moderated room.

Custom CSS
.chatOff {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
}

.chatOffMessage {
  color: #ffffff !important;
  font-size: 28px !important;
  max-width: 400px !important;
}

Selectors to leave alone

Ids on individual messages. Every message row also carries an id of its own so the room can scroll to it. Those ids belong to one message and will never match again.

Anything with a generated data-v-… attribute. Rules in the room's own stylesheet are qualified with attributes of that shape. They are produced when the chat client is built and change from one release to the next, so a rule that copies one will stop matching.

Bare utility classes. .button, .columns, .tag, .column, and names beginning is- or has- are general-purpose and appear all over the interface. A rule on one of them on its own will hit parts of the room you were not aiming at. Qualify them with a region from this page — .input-area .button.is-success, .chat-message .columns — or use the specific class instead.

Carrying over an older stylesheet

If you have rules written against an earlier version of this list:

In your old CSS	Use instead
`.hints`	Nothing matches it. Hide the formatting hint row with the Markdown Suggestions toggle — see the Hide Elements Reference.
`.invite-button`	Nothing matches it. Delete the rule.
`#messageTextAre`	`#messageTextArea`, or `.textarea-div textarea`.
`.Sidebar`	`.sidebar`. Class names are case-sensitive, so the capitalised form never matched.
`.username`, `.timestamp`	`.message-username`, `.message-timestamp`.

Custom CSS Guide — where to put these rules, what wins, and how to disable custom styling for one page load
Appearance Reference — every colour, font and size field on the Customize tab
Hide Elements Reference — the toggles that remove parts of the interface
loadCustomization — apply appearance settings per embed from the SDK
Contact support

Before you write a rule​

Layout and structure​

Header​

Sidebar​

Message list​

A single message​

Composer​

Modals​

Chat bubble​

Layout modes​

Special states​

Selectors to leave alone​

Carrying over an older stylesheet​

Related pages​