CSS Styling¶

Customization of the widget appearance can be done using CSS variables as follows:

open-chat-studio-widget {
    --button-background-color: #d1d5db;
}

The following tables contain the full list of CSS variables that are available.

Launch button¶

Customize the button position using CSS variables or a CSS class attached to the widget element:

open-chat-studio-widget {
    position: fixed;
    right: 20px;
    bottom: 20px;
}

Use the following CSS variables to style the button appearance.

Name	Description
`--button-background-color`	Button background color (#ffffff)
`--button-background-color-hover`	Button background color on hover (#f3f4f6)
`--button-border-color`	Button border color (#6b7280)
`--button-border-color-hover`	Button border color on hover (#374151)
`--button-font-size`	Button text font size (0.875em)
`--button-icon-size`	Button icon size (1.5em)
`--button-text-color`	Button text color (#111827)
`--button-text-color-hover`	Button text color on hover (#1d4ed8)

Chat Window¶

Tip

All font sizes and some margins / padding are relative to the widget element's font size which can be set using the --chat-window-font-size and --button-font-size variables.

Name	Description
`--chat-window-width`	Chat window height in pixels or percent (25%)
`--chat-window-height`	Chat window width in pixels or percent (60%)
`--chat-window-fullscreen-width`	Chat window fullscreen width in pixels or percent (80%)
`--chat-window-bg-color`	Chat window background color (#ffffff)
`--chat-window-border-color`	Chat window border color (#d1d5db)
`--chat-window-font-size`	Default font size for text in the chat window (0.875em)
`--chat-window-font-size-sm`	Font size for small text in the chat window (0.75em)
`--chat-window-shadow-color`	Chat window shadow color (rgba(0, 0, 0, 0.1))

Name	Description
`--header-bg-color`	Header background color (transparent)
`--header-bg-hover-color`	Header background color on hover (#f9fafb)
`--header-border-color`	Header border color (#f3f4f6)
`--header-button-bg-hover-color`	Header button background on hover (#f3f4f6)
`--header-button-text-color`	Header button text color (#6b7280)
`--header-button-icon-size`	Icon size for buttons in the header (1.5em)
`--header-font-size`	Header font size (1em)
`--header-text-color`	Color for the text in the header (#525762)
`--header-text-font-size`	Font size for the text in the header (1em)

Messages¶

Name	Description
`--message-user-bg-color`	User message background color (#e4edfb)
`--message-user-text-color`	User message text color (#1f2937)
`--message-user-link-color`	User message link color (#155dfc)
`--message-assistant-bg-color`	Assistant message background color (#eae7e8)
`--message-assistant-text-color`	Assistant message text color (--message-user-text-color)
`--message-assistant-link-color`	Assistant message text color (--message-user-link-color)
`--message-system-bg-color`	System message background color (#fbe4f8)
`--message-system-text-color`	System message text color (--message-user-text-color)
`--message-system-link-color`	System message text color (--message-user-link-color)
`--message-timestamp-assistant-color`	Assistant message timestamp color (rgba(75, 85, 99, 0.7))
`--message-timestamp-color`	User message timestamp color (rgba(255, 255, 255, 0.7))

Starter question¶

Name	Description
`--starter-question-bg-color`	Starter question background color (transparent)
`--starter-question-bg-hover-color`	Starter question background on hover (#eff6ff)
`--starter-question-border-color`	Starter question border color (#3b82f6)
`--starter-question-border-hover-color`	Starter question border on hover (#2563eb)
`--starter-question-text-color`	Starter question text color (#3b82f6)

Confirmation dialog¶

Name	Description
`--confirmation-overlay-bg-color`	Confirmation dialog overlay background color (rgba(0, 0, 0, 0.5))
`--confirmation-dialog-bg-color`	Confirmation dialog background color (uses --chat-window-bg-color)
`--confirmation-dialog-border-color`	Confirmation dialog border color (uses --chat-window-border-color)
`--confirmation-dialog-shadow-color`	Confirmation dialog shadow color (uses --chat-window-shadow-color)
`--confirmation-title-color`	Confirmation dialog title text color (#111827)
`--confirmation-title-font-size`	Confirmation dialog title font size (1.125em)
`--confirmation-message-color`	Confirmation dialog message text color (uses --loading-text-color)
`--confirmation-message-font-size`	Confirmation dialog message font size (1em)
`--confirmation-button-cancel-bg-color`	Cancel button background color (uses --button-background-color-hover)
`--confirmation-button-cancel-bg-hover-color`	Cancel button background on hover (#e5e7eb)
`--confirmation-button-cancel-text-color`	Cancel button text color (uses --header-button-text-color)
`--confirmation-button-confirm-bg-color`	Confirm button background color (uses --error-text-color)
`--confirmation-button-confirm-bg-hover-color`	Confirm button background on hover (uses --error-text-color)
`--confirmation-button-confirm-text-color`	Confirm button text color (uses --send-button-text-color)

Input bar¶

Name	Description
`--input-bg-color`	Input area background color (transparent)
`--input-border-color`	Input field border color (#d1d5db)
`--input-outline-focus-color`	Input field focus ring color (#3b82f6)
`--input-placeholder-color`	Input placeholder text color (#6b7280)
`--input-text-color`	Input text color (#111827)

File Attachments¶

Name	Description
`--file-attachment-button-bg-color`	Attach file button background color (transparent)
`--file-attachment-button-bg-hover-color`	Attach file button background hover color (--header-button-bg-hover-color)
`--file-attachment-button-text-color`	Attach file button text color (--header-button-text-color)
`--file-attachment-button-text-disabled-color`	Attach file button disabled text color (--send-button-text-disabled-color)
`--selected-file-bg-color`	Selected file item background color (--button-background-color-hover)
`--selected-file-font-size`	Selected file item font size (--chat-window-font-size-sm)
`--selected-file-icon-size`	Selected file item icon size (1.25em)
`--selected-file-name-color`	Selected file name color (--message-assistant-text-color)
`--selected-file-remove-icon-color`	Selected file remove icon color (--error-text-color)
`--selected-file-remove-icon-hover-color`	Selected file remove icon hover (#dc2626)
`--selected-file-size-color`	Selected file size display color (--input-placeholder-color)
`--selected-files-bg-color`	Selected files container background color (--chat-window-bg-color)
`--selected-files-border-color`	Selected files container border color (--header-border-color)
`--message-attachment-icon-size`	Message attachment icon size (1em)

Send button¶

Name	Description
`--send-button-bg-color`	Send button background color (#3b82f6)
`--send-button-bg-disabled-color`	Send button background when disabled (#d1d5db)
`--send-button-bg-hover-color`	Send button background on hover (#2563eb)
`--send-button-text-color`	Send button text color (#ffffff)
`--send-button-text-disabled-color`	Send button text when disabled (#6b7280)

Loading indicators¶

Name	Description
`--loading-spinner-fill-color`	Loading spinner fill color (#3b82f6)
`--loading-spinner-size`	Loading spinner size (1.25em)
`--loading-spinner-track-color`	Loading spinner track color (#e5e7eb)
`--loading-text-color`	Loading text color (#6b7280)
`--typing-progress-bg-color`	Typing progress bar background color (#ade3ff)

Markdown code¶

By default, the Markdown code colours are relative to the assistant message text and background colours, but they can be overridden.

User messages no longer render Markdown

As of v0.13.0 participant messages are shown as plain text, so --code-bg-user-color, --code-border-user-color and --code-text-user-color have no effect.

Name	Description
`--code-bg-assistant-color`	Code background in assistant messages (--message-assistant-bg-color + 50% white)
`--code-border-assistant-color`	Code border in assistant messages (--message-assistant-bg-color + 10% black)
`--code-text-assistant-color`	Code text color in assistant messages (--message-assistant-text-color)
`--code-bg-user-color`	Code background in user messages (--message-user-bg-color + 20% white)
`--code-border-user-color`	Code border in user messages (--message-user-bg-color + 20% black)
`--code-text-user-color`	Code text color in user messages (--message-user-text-color)

Error message¶

Name	Description
`--error-text-color`	Error text color (#ef4444)
`--success-text-color`	Success text color (#10b981)

Z-Index¶

If the chatbot appears below other elements on the page you can increase the z-index of the chatbot by setting the --chat-z-index CSS variable. The default value is 50.

open-chat-studio-widget {
    --chat-z-index: 100;
}

In some cases, it may also be necessary to reduce the z-index of other elements on the page.

CSS CSS Styling¶