> ## Documentation Index
> Fetch the complete documentation index at: https://www.cometchat.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Customize the CometChat Widget with Custom CSS

> Override the Chat Widget's default styles from the Widget Builder's Custom CSS field, including how to bring back the hidden scrollbar on the Users, Conversations and Groups lists.

> [!NOTE]
>
> **Quick Reference for AI Agents & Developers**
>
> * **What this page covers**: The Widget Builder's **Custom CSS** field — where it is, how it is applied, and a ready-to-paste override for the lists' hidden scrollbar.
> * **Applies to**: The CometChat Chat Widget (v2, `chat-embed@2.x.x`) on every platform — HTML, WordPress, Shopify, Squarespace, Wix and Webflow.
> * **Key action**: Paste a CSS block into **Custom Code → Custom CSS**, save, and re-publish the widget.

The Widget Builder sets theme, colors and typography without code. For anything it does not expose,
the **Custom Code** tab has a **Custom CSS** field: stylesheet rules you write there ship with your
widget and are applied on every page that loads it, on every platform.

Open it from the dashboard: **Chat & Messaging → Get Started / Integrate → No Code → your platform →
Launch Widget Builder**, then in the builder's right panel choose **Custom Code → Custom CSS** (under
**Global Customization**).

Save and re-publish in the Widget Builder once you have added your rules. No change to the embed snippet
on your site is needed.

> [!NOTE]
>
> Set your brand color, text colors, font and font size in the Builder's style controls, not here. Those are
> applied as inline styles that a stylesheet rule cannot cleanly override; Custom CSS is for everything else.

## How Custom CSS is applied

* **Rules are scoped to the widget.** Every top-level selector is rewritten to match only inside the widget's
  root, so `:root` and `body` never match — write ordinary component selectors instead. The scoping also adds
  specificity for you, so your rules win over the widget's defaults without `!important`.
* **Target `cometchat-*` component classes.** Every component carries a block class with BEM elements and
  modifiers under it, such as `.cometchat-conversations__item` or `.cometchat-users__list--hide-scrollbar`.
  Inspect the widget in your browser's developer tools to find the one you want.
* **At-rules are dropped.** `@media`, `@font-face` and `@import` cannot be scoped, so the browser discards
  them. Keep to declarations inside ordinary selectors.

> [!NOTE]
>
> The selectors on this page are for widget **v2** (the `chat-embed@2.x.x` script). v1 uses different class
> names — see [Upgrade to v2](https://www.cometchat.com/docs/widget/migration) if your embed still loads v1.

## Default behaviours you can override

### Hidden scrollbars on the Users, Conversations and Groups lists

By design, the widget's Users, Conversations and Groups lists hide their scrollbar. The lists still scroll with
the mouse wheel, trackpad or touch, but there is no visible bar to grab. The Users and Groups lists do this
with a `--hide-scrollbar` modifier class; the Conversations list hides it on the list element itself:

* `.cometchat-users__list--hide-scrollbar`
* `.cometchat-groups__list--hide-scrollbar`
* `.cometchat-conversations__list`

Each of these sets `scrollbar-width: none` and hides the `::-webkit-scrollbar` pseudo-element. To bring the
scrollbar back on all three lists, paste this into **Custom CSS**:

```css theme={null}
/* Show a scrollbar on the Conversations, Users and Groups lists */
.cometchat-conversations__list,
.cometchat-users__list--hide-scrollbar,
.cometchat-groups__list--hide-scrollbar {
  scrollbar-width: thin;                 /* Firefox */
  scrollbar-color: #c4c4c4 transparent;  /* Firefox */
}

.cometchat-conversations__list::-webkit-scrollbar,
.cometchat-users__list--hide-scrollbar::-webkit-scrollbar,
.cometchat-groups__list--hide-scrollbar::-webkit-scrollbar {
  display: block;
  width: 6px;
}

.cometchat-conversations__list::-webkit-scrollbar-thumb,
.cometchat-users__list--hide-scrollbar::-webkit-scrollbar-thumb,
.cometchat-groups__list--hide-scrollbar::-webkit-scrollbar-thumb {
  background: #c4c4c4;
  border-radius: 3px;
}
```

The `::-webkit-scrollbar` rules style the bar in Chrome, Edge and Safari; the `scrollbar-width` and
`scrollbar-color` declarations do the same in Firefox. Adjust the width and colors to match your site. Drop
a selector from each group if you want to keep the scrollbar hidden on that list.

## Scope

Custom CSS is a Widget Builder feature and applies to the Chat Widget only. If you build with the React UI Kit
directly, style its components with the kit's own [theming system](https://www.cometchat.com/docs/ui-kit/react/theming.md).

## Need Help?

If you have questions or run into issues, reach out to [CometChat Support](https://help.cometchat.com/hc/en-us).


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.