Most widget customization needs no code — position, colors, and greeting are dashboard settings (see Storefront widget). When you need to go further, the Custom CSS (Advanced) editor in Widget Setup → Appearance accepts organization-level CSS overrides.
Stable class names
Every widget surface renders stable cg-* class names — a supported
styling contract that does not change between releases. The top bar, message
bubbles, composer buttons, handover pill, follow-up suggestion links, typing
indicator, and the powered-by footer all expose stable classes.
This matters because component libraries usually generate class names with random suffixes. CSS that targeted those generated selectors would silently stop working on the next release — the Appearance editor warns inline when saved CSS targets such selectors.
CSS variables
The widget exposes CSS variables you can override:
--cg-bubble-max-width— how wide a chat bubble may grow (percentage of the conversation panel).--cg-card-shadow— the shadow used on product and tool cards; set tononefor a flat look.--cg-container-padding-top— the gap between the top bar and the first content; the default is1.5rem.
The in-app guide documents the full current variable set with a copy-paste starter block, and grows as new tokens are added. New tokens always default to the existing rendering, so nothing changes until you opt in.
Saving
Custom CSS saves together with your other appearance settings through the page-level save action — one flow for colors, greeting, and CSS.