Skip to main content
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.
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.
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 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:
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.

​
Need Help?

If you have questions or run into issues, reach out to CometChat Support.