Skip to main content

Styles

This page documents all available sections that may be passed into the styles prop of the ChatBot. For an example on how to structure your styles, please refer to the default styles in the dropdown below.

Click to view default styles
export const DefaultStyles: Styles = {
// styles
tooltipStyle: {},
notificationBadgeStyle: {},
chatWindowStyle: {},
headerStyle: {},
bodyStyle: {},
chatInputContainerStyle: {},
chatInputAreaStyle: {},
chatInputAreaFocusedStyle: {},
chatInputAreaDisabledStyle: {},
userBubbleStyle: {},
botBubbleStyle: {},
botOptionStyle: {},
botOptionHoveredStyle: {},
botCheckboxRowStyle: {},
botCheckboxNextStyle: {},
botCheckMarkStyle: {},
botCheckMarkSelectedStyle: {},
characterLimitStyle: {},
characterLimitReachedStyle: {},
chatHistoryLineBreakStyle: {},
chatMessagePromptStyle: {},
chatMessagePromptHoveredStyle: {},
footerStyle: {},
loadingSpinnerStyle: {},
mediaDisplayContainerStyle: {},
chatButtonStyle: {},
chatHistoryButtonStyle: {},
chatHistoryButtonHoveredStyle: {},
sendButtonStyle: {},
sendButtonHoveredStyle: {},
sendButtonDisabledStyle: {},
audioButtonStyle: {},
audioButtonDisabledStyle: {},
closeChatButtonStyle: {},
emojiButtonStyle: {},
emojiButtonDisabledStyle: {},
fileAttachmentButtonStyle: {},
fileAttachmentButtonDisabledStyle: {},
notificationButtonStyle: {},
notificationButtonDisabledStyle: {},
voiceButtonStyle: {},
voiceButtonDisabledStyle: {},
chatIconStyle: {},
audioIconStyle: {},
audioIconDisabledStyle: {},
closeChatIconStyle: {},
emojiIconStyle: {},
emojiIconDisabledStyle: {},
fileAttachmentIconStyle: {},
fileAttachmentIconDisabledStyle: {},
notificationIconStyle: {},
notificationIconDisabledStyle: {},
voiceIconStyle: {},
voiceIconDisabledStyle: {},
sendIconStyle: {},
sendIconDisabledStyle: {},
sendIconHoveredStyle: {},
rcbTypingIndicatorContainerStyle: {},
rcbTypingIndicatorDotStyle: {},
toastPromptContainerStyle: {},
toastPromptStyle: {},
toastPromptHoveredStyle: {}
}
Tip

Before diving into styling, you may be interested in browsing for themes to pick out designs close to your desired appearance.

Sections

If you wish to refine the appearance of the chatbot, these are the list of sections available.

NameTypeDefaultDescription
bodyStyleobjectStyles for the chatbot body.
botBubbleStyleobjectStyles for bot chat bubbles.
botCheckboxNextStyleobjectStyles for the next bot checkbox.
botCheckboxRowStyleobjectStyles for bot checkbox rows.
botCheckMarkSelectedStyleobjectStyles for the selected bot checkmark.
botCheckMarkStyleobjectStyles for the bot checkmark.
botOptionHoveredStyleobjectStyles for hovered settings.
botOptionStyleobjectStyles for settings.
characterLimitStyleobjectStyles for the character limit display.
characterLimitReachedStyleobjectStyles for the character limit display when limit is reached.
chatButtonStyleobjectStyles for the chatbot button.
chatHistoryButtonHoveredStyleobjectStyles for the hovered chat history button.
chatHistoryButtonStyleobjectStyles for the chat history button.
chatHistoryLineBreakStyleobjectStyles for the chat history line break.
chatInputContainerStyleobjectStyles for the chatbot input text area.
chatInputAreaStyleobjectStyles for the chatbot input container.
chatInputAreaFocusedStyleobjectStyles for the chatbot input container when it is focused.
chatInputAreaDisabledStyleobjectStyles for the chatbot input container when it is disabled.
chatMessagePromptStyleobjectStyles for the new message prompt.
chatMessagePromptHoveredStyleobjectStyles for the new message prompt when it is hovered.
chatWindowStyleobjectStyles for the chatbot window.
footerStyleobjectStyles for the chatbot footer.
headerStyleobjectStyles for the chatbot header.
loadingSpinnerStyleobjectStyles for the loading spinner.
notificationBadgeStyleobjectStyles for the chatbot notification badge.
sendButtonDisabledStyleobjectStyles for the disabled send button.
sendButtonHoveredStyleobjectStyles for the hovered send button.
sendButtonStyleobjectStyles for the send button.
tooltipStyleobjectStyles for the chatbot tooltip.
userBubbleStyleobjectStyles for user chat bubbles.
audioButtonStyleobjectStyles for the audio button.
audioButtonDisabledStyleobjectStyles for the disabled audio button.
closeChatButtonStyleobjectStyles for the close chat button.
emojiButtonStyleobjectStyles for the emoji button.
emojiButtonDisabledStyleobjectStyles for the disabled emoji button.
fileAttachmentButtonStyleobjectStyles for the file attachment button.
fileAttachmentButtonDisabledStyleobjectStyles for the disabled file attachment button.
notificationButtonStyleobjectStyles for the notification button.
notificationButtonDisabledStyleobjectStyles for the disabled notification button.
voiceButtonStyleobjectStyles for the voice button.
voiceButtonDisabledStyleobjectStyles for the disabled voice button.
chatIconStyleobjectStyles for the chat icon.
audioIconStyleobjectStyles for the audio icon.
audioIconDisabledStyleobjectStyles for the disabled audio icon.
closeChatIconStyleobjectStyles for the close chat icon.
emojiIconStyleobjectStyles for the emoji icon.
emojiIconDisabledStyleobjectStyles for the disabled emoji icon.
fileAttachmentIconStyleobjectStyles for the file attachment icon.
fileAttachmentIconDisabledStyleobjectStyles for the disabled file attachment icon.
notificationIconStyleobjectStyles for the notification icon.
notificationIconDisabledStyleobjectStyles for the disabled notification icon.
voiceIconStyleobjectStyles for the voice icon.
voiceIconDisabledStyleobjectStyles for the disabled voice icon.
sendIconStyleobjectStyles for the send icon.
sendIconDisabledStyleobjectStyles for the disabled send icon.
sendIconHoveredStyleobjectStyles for the hovered send icon.
rcbTypingIndicatorContainerStyleobjectStyles for the typing indicator container.
rcbTypingIndicatorDotStyleobjectStyles for the typing indicator dot.
toastPromptContainerStyleobjectStyles for the toast prompt container.
toastPromptStyleobjectStyles for the toast prompt.
toastPromptHoveredStyleobjectStyles for the hovered toast prompt.

The utilization of styles is remarkably simple, as each section readily accepts inline React styles. For instance, you can customise the headerStyle with headerStyle: {background: "red"}.

Tip

If you wish to customise the chatbot appearance with even more granularity, you may also overwrite the CSS classes directly. Class names for this library are appended with rcb and you may find the relevant classes through inspect element or by combing through the CSS files within the components in the code repository.