Custom Styling via CSS

Beyond dashboard customization, AskVio supports CSS variable overrides from your website stylesheet.

VariablePurpose
--chat-bg-colorSolid background color for the main widget chat container.
--chat-bg-gradientGradient background override for the chat container (takes precedence over --chat-bg-color).
--chat-backdrop-blurBackdrop blur amount applied behind the chat container (for translucent backgrounds).
--chat-blur-enabledInternal on/off flag used by the editor for chat blur mode.
--user-bubble-colorVisitor message bubble color.
--ai-bubble-colorAssistant message bubble color.
--suggestion-bg-colorSuggestion chip background color.
--suggestion-hover-bg-colorSuggestion chip hover background color.
--send-button-colorSend button icon color (and fallback accent for action buttons).
--product-bg-colorProduct card background color.
--product-border-colorProduct card border color.
--product-text-colorProduct card text color.
--product-price-colorProduct price text color.
--link-bg-colorSource/link pill background color.
--link-border-colorSource/link pill border color.
--link-text-colorSource/link pill text color.
--function-button-alignFunction button row alignment (flex-start, center, flex-end).
--function-button-bg-colorFunction button background color.
--function-button-border-colorFunction button border color.
--function-button-border-widthFunction button border width.
--function-button-text-colorFunction button text color.
--function-button-radiusFunction button corner radius.
--search-alignSearch bar alignment inside the widget row.
--search-max-widthMaximum width of the search bar area.
--search-radiusSearch input corner radius.
--search-bg-colorSearch bar background color.
--search-border-widthSearch bar border width.
--search-border-colorSearch bar border color.
--search-border-enabledInternal on/off flag used by the editor for search border visibility.
--search-shadowSearch bar box shadow value.
--search-shadow-enabledInternal on/off flag used by the editor for search shadow behavior.
--search-glow-enabledInternal on/off flag used by the editor for static glow mode.
--search-glow-strengthStatic search glow strength value configured in the editor.
--search-glow-colorStatic search glow color configured in the editor.
--search-animated-glow-enabledEnables/disables animated glow around the search bar.
--search-animated-glow-startAnimated glow gradient start color.
--search-animated-glow-endAnimated glow gradient end color.
--search-animated-glow-strengthAnimated glow blur strength.
--search-animated-glow-durationAnimated glow cycle duration.
--widget-max-widthOverall widget maximum width.
--widget-alignHorizontal alignment of the widget container.
--widget-radiusGlobal widget corner radius.
--widget-radius-cornersPer-corner radius override order: top-left top-right bottom-right bottom-left.
--widget-border-widthWidget container border width.
--widget-border-colorWidget container border color.
--widget-border-enabledInternal on/off flag used by the editor for widget border behavior.
--widget-shadowWidget container box shadow value.
--widget-shadow-enabledInternal on/off flag used by the editor for widget shadow behavior.
--widget-bg-colorReserved widget background variable (currently defined but not applied directly in CSS).
SelectorDescription
#askvio-widget-boxMain frame that wraps chat, pills, and input.
#askvio-chatScrollable message area.
.askvio-pillClickable suggestion item.
#askvio-search-buttonSend action button.
.askvio-product-cardProduct recommendation card in answers.