Type Alias: AgentStyleTokens

AgentStyleTokens: object

The style tokens for theming the AnalyticsAgent UI. Each key maps to an internal CSS custom property applied on the agent container. All tokens are optional — only include the ones you want to override.

optional containerBackground: string

The background color or gradient for the agent container. For example, "#faf5ff", "linear-gradient(135deg, #a, #b)"

optional headerBackground: string

The background color or gradient for the header. For example, "#ede9fe", "linear-gradient(...)"

optional headerBlockFontFamily: string

The font family for the header block. For example, '"Inter", "SF Pro Display", system-ui, sans-serif'

optional headerBlockTextColor: string

The text color for the header block. For example, "#5b21b6"

optional hideMessageActions: string

Hides the message action buttons when set to "none". Omit this property entirely to keep the default visible behavior. Any value assigned overrides the default display, so only include this token when you want to hide actions.

optional inboundMessageTextColor: string

The text color for inbound (agent) messages. For example, "#3b0764"

optional messageBlockInboundBackgroundColor: string

The background color for inbound message blocks. For example, "#ede9fe"

optional messageBlockInboundTextAlign: string

The text alignment for inbound message blocks. For example, "left", "center", "right"

optional messageBlockInboundTextColor: string

The text color for inbound message blocks. For example, "#3b0764"

optional messageBlockOutboundBackgroundColor: string

The background color for outbound message blocks. For example, "#7c3aed"

optional messageBlockOutboundMarginLeft: string

The left margin for outbound message blocks. For example, "auto", "20px"

optional messageBlockOutboundTextAlign: string

The text alignment for outbound message blocks. For example, "left", "center", "right"

optional messageBlockOutboundTextColor: string

The text color for outbound (user) message blocks. For example, "#ffffff"

optional messageBlockPadding: string

The padding inside message blocks. For example, "14px 18px"

optional messageFontFamily: string

The font family for message body text. For example, '"Inter", "SF Pro Text", system-ui, sans-serif'

optional messageInputErrorTextColor: string

The error text color for the message input. For example, "#dc2626"

optional messageInputFooterBorderColor: string

The border color for the message input footer. For example, "#c4b5fd"

optional messageInputFooterBorderFocusColor: string

The border color for the message input footer when focused. For example, "#8b5cf6"

optional messageInputFooterSendButton: string

The color for the send button. For example, "#ec4899"

optional messageInputFooterSendButtonHoverColor: string

The hover color for the send button. For example, "#f472b6"

optional messageInputPlaceholderTextColor: string

The placeholder text color for the message input. For example, "#c084fc"

optional messageInputSendButtonDisabledColor: string

The color for the disabled send button. For example, "#f9a8d4"

optional messageInputTextBackgroundColor: string

The background color for the message input field. For example, "#faf5ff"

optional messageInputTextColor: string

The text color for the message input field. For example, "#3b0764"

optional welcomeBlockFontFamily: string

The font family for the welcome block. For example, '"Inter", "SF Pro Display", system-ui, sans-serif'

optional welcomeBlockFontSize: string

The font size for the welcome block. For example, "26px", "1.2rem"

optional welcomeBlockFontWeight: string

The font weight for the welcome block. For example, "bold", "600"

optional welcomeBlockLetterSpacing: string

The letter spacing for the welcome block. For example, "-0.01em"

optional welcomeBlockLineHeight: string

The line height for the welcome block. For example, "1.4", "24px"

optional welcomeBlockTextColor: string

The text color for the welcome block. For example, "#4c1d95"

optional welcomeBlockTextContainerWidth: string

The width of the welcome block text container. For example, "85%", "300px"

1import type {AgentStyleTokens} from '@salesforce/analytics-embedding-sdk';
2
3const styleTokens: AgentStyleTokens = {
4    containerBackground: '#faf5ff',
5    headerBackground: '#ede9fe',
6    headerBlockTextColor: '#5b21b6',
7    messageBlockInboundBackgroundColor: '#ede9fe',
8    messageBlockOutboundBackgroundColor: '#7c3aed',
9    messageBlockOutboundTextColor: '#ffffff',
10    messageInputFooterSendButton: '#ec4899'
11};