The Agentforce Commerce Client is non-opinionated: it ships with no CSS framework and applies no global resets. Every element carries a cim-widget- class prefix, so widget styles never leak into your page and your storefront styles never affect the widget. You style the widget in three escalating layers: theme properties, header configuration, and custom CSS.
The theme object is the primary way to make the widget feel brand-native. A handful of properties cascade across every surface (buttons, messages, typography, borders, and corners), so a few lines of configuration reshape the widget’s look with no custom CSS.
1theme: {
2 primaryColor: "#3182ce",
3 secondaryColor: "#2c5282",
4 fontColor: "#1a202c",
5 fontFamily: "inherit",
6 backgroundColor: "#ffffff",
7 borderColor: "#dddddd",
8 borderRadius: "0.25rem",
9}| Property | Applies to | Default |
|---|---|---|
primaryColor | Buttons, icons, and user message backgrounds | #3182ce |
secondaryColor | AI response message backgrounds | #2c5282 |
fontColor | All text | #1a202c |
fontFamily | Typography | inherit |
backgroundColor | Widget canvas and container | #ffffff |
borderColor | Outer borders (dialog and embedded modes) | #dddddd |
borderRadius | Corner rounding | 0.25rem |
A partial theme overrides only the values you set; every unset property falls back to its default.
Because fontFamily defaults to inherit, the widget automatically adopts whatever typeface your storefront uses. If your site rebrands to a new font, the widget follows with no configuration change. Stick to universally supported font values so the widget renders consistently even when a custom font hasn’t loaded.
The headerConfig object independently styles the widget header (logo, title text, and header chrome).
| Field | Type | Notes |
|---|---|---|
logoUrl | string | Logo image in the header. |
headerText | string | Header title text. |
headerBackgroundColor | string | Header bar background. Defaults to transparent. |
headerTextColor | string | Header title color. Defaults to inherit. |
headerTextFontSize | string | Header title size. Defaults to 1.25rem. |
headerTextFontWeight | number | Header title weight. Defaults to bold. |
headerTextFontFamily | string | Header title typeface. Defaults to inherit. |
headerTextTextAlign | "left" | "center" | "right" | Header title alignment. Defaults to left. |
A few more properties adjust presentation.
suggestionButtonConfig adds an opt-in icon to the prompt and in-conversation suggestion buttons. Set icon to "sparkle", "plus", or "paper-plane", and iconPosition to "left" (default) or "right". No icon shows unless you set one.searchConfig customizes the search bar: placeholder, buttonLabel, buttonAriaLabel, buttonIconUrl, buttonType ("icon", "text", or "icon-text"), and enableCancelSearch. Set the search bar’s placeholder and button label here through placeholder and buttonLabel.promptsConfig controls the prompts extension: promptsDisplay ("input", "buttons", or "both", default "both"), staticQuestions (fixed questions rendered as buttons; trimmed and deduplicated, empties dropped), and disableAskElseButton (default false).The widget emits theme and header values as CSS custom properties, so you can also read or override them in your own stylesheet:
1--cim-widget-primary-color
2--cim-widget-secondary-color
3--cim-widget-font-color
4--cim-widget-font-family
5--cim-widget-background-color
6--cim-widget-border-color
7--cim-widget-border-radiusHeader properties follow the same convention with a --cim-widget-header- prefix (for example, --cim-widget-header-background-color).
When theme properties aren’t enough, target the widget’s classes directly. Every cim-widget-* class is a stable selector, for example:
1.cim-widget-container {
2}
3.cim-widget-message-container {
4}
5.cim-widget-suggestion-button {
6}
7.cim-widget-modal-title {
8}For an extra specificity hook, set the globalClassName property. The widget adds that class to all of its elements, giving you a scoped selector to raise specificity without editing the widget’s source.
Per-platform notes. The cim-widget- classes are the same regardless of storefront framework, so custom CSS targets them the same way everywhere. Deliver that CSS through your storefront’s normal styling pipeline:
cim-widget- classes.cim-widget- prefix keeps them isolated from your utility classes.Because the widget attaches no shadow root, your storefront CSS reaches these elements normally.
j