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 (--message-system-bg-color)
`--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 respective message text and background colours, but they can be overridden.

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.