CSS Variable Customization

You can customize many aspects of the SiteSage components by adding CSS properties to the sitesage element(s).

If you are using multiple sitesage components, you can scope the CSS to apply only to the specific component.

sitesage-chat {
    --ss-chat-avatar: url('https://api.sitesage.ai/res/logo.png');
    --ss-chat-header-bg: linear-gradient(to right, red, blue);
}

The following is a list of all CSS properties that are available:

Property (CSS Variable)	Description
--ss-link-color	The text color for hyperlinks within the chat components.
--ss-font-family	The font family used across the chat interface.
--ss-chat-avatar	URL to a square image (e.g., SVG data URI) for the chat avatar.
--ss-chat-header-bg	Background color for the chat header. Note that the header is only visible when the header_icon attribute is set.
--ss-chat-bg-assistant	Background color for the chat assistant bubble.
--ss-chat-color-assistant	Text color for the chat assistant bubble.
--ss-chat-padding-assistant	Padding for the chat assistant bubble.
--ss-chat-border-radius-assistant	Border radius for the chat assistant bubble.
--ss-chat-font-size-assistant	Font size for the chat assistant bubble.
--ss-chat-bg-user	Background color for the user’s chat bubble.
--ss-chat-color-user	Text color for the user’s chat bubble.
--ss-chat-padding-user	Padding for the user’s chat bubble.
--ss-chat-border-radius-user	Border radius for the user’s chat bubble.
--ss-chat-font-size-user	Font size for the user’s chat bubble.
--ss-chat-rate-display-assistant	Controls the visibility/display behavior of the rating system on assistant messages.
--ss-chat-copy-display-assistant	Controls the visibility/display behavior of the copy-to-clipboard button on assistant messages.
--ss-chat-icon-checked-color	Color applied to chat icons when they are in an active or checked state.
--ss-chat-throbber-color	The color of the loading/typing indicator throbber.
--ss-search-focus-color	Outline or highlight color when the search input field is focused.
--ss-search-border-color	The border color for the search input container.
--ss-search-input-font-size	Font size for the main text inside the search input box.
--ss-search-info-font-size	Font size for auxiliary or helper information text within the search UI.
--ss-search-suggestions-title-font-size	Font size for the headers/titles of search suggestion sections.
--ss-search-suggestions-font-size	Font size for individual search suggestion items.
--ss-action-color	The accent color used for primary buttons and interactive action elements.