| Chat Theme Property | Example value | Description |
|---|
| chatBorderRadius | 8px 8px 0 0 | Changes the chat rounding |
| chatShadow | # A81F1F | Changes the chat shadow |
| Chat Theme Property | Example value | Description |
|---|
| headerBackgroundColor | "#C90C90" | Changes the header background colour |
| headerBorderWidth | "0 0 2px 0" | Adds the header border |
| headerBorderColor | "#CCCCCC" | Adds the header border colour |
| headerBorderRadius | 0 0 6px 6px | Adds the rounding to the header |
| headerTextColor | # FFFFFF | Changes the text colour in the header |
| headerIconColor | # FFFFFF | Changes the icon colour in the header |
| headerIconBackgroundColorActive | # 000000 | Changes the icon background colour when it's active |
| headerIconBackgroundColorHover | # CCCCCC | Changes the icon background colour when it's hovered |
| headerMenuBackgroundColor | # F1F1F1 | Changes the background of the dropdown menu |
| headerMenuBorderRadius | 0 0 6px 6px | Changes the rounding of the dropdown menu |
| headerMenuBorderColor | # F1F1F1 | Changes the border colour and style of the dropdown menu |
| headerMenuBorderWidth | 2px | Changes the border width of the dropdown menu |
| headerMenuShadow | # 9B3636 | Changes the shadow of the dropdown menu |
| headerMenuLinkIconColor | # AE2525 | Changes the icon colour in the dropdown menu item |
| headerMenuLinkTextColor | # 292929 | Changes the text colour of the dropdown menu item |
| headerMenuLinkTextColorFocus | # 292929 | Changes the text colour of the dropdown menu item when it's focused |
| headerMenuLinkTextColorHover | # 292929 | Changes the text colour of the dropdown menu item when it's hovered |
| headerMenuLinkBackgroundColor | # F9f5EF | Changes the text background colour of the dropdown menu item |
| headerMenuLinkBackgroundColorFocus | # D7B7B7 | Changes the text background colour of the dropdown menu item when it's focused |
| headerMenuLinkBackgroundColorHover | # E0E0E0 | Changes the text background colour of the dropdown menu item when it's hovered |
Note, when when the message type shows as INCOMING, this is a message, that comes into the webchat, so sent by the agent or a chatbot. When the message shows as OUTGOING, this is a message that is sent by the person using the webchat, into an agent.
| Chat Theme Property | Example value | Description |
|---|
| messageIncomingBorderRadius | 0 0 6px 6px | Changes the shape of the incoming messages |
| messageIncomingBackgroundColor | # 000000 | Changes the background colour of the incoming messages |
| messageIncomingTextColor | # 000000 | Changes the text colour of the incoming messages |
| messageIncomingLinkColor | # 000000 | Changes link colour |
| messageIncomingLinkColorHover | # 000000 | Changes link colour when it's hovered |
| messageIncomingLinkColorFocus | # 000000 | Changes link colour when it's focused |
| messageIncomingLinkColorVisited | # 000000 | Changes link colour when it's already visited |
| messageOutgoingBorderRadius | 0 0 6px 6px | Changes the shape of the outgoing messages |
| messageOutgoingTextColor | # 000000 | Changes the text colour of the outgoing messages |
| messageOutgoingBackgroundColor | # 000000 | Changes the background colour of the outgoing messages |
| messageOutgoingLinkColor | # 000000 | Changes link colour |
| messageOutgoingLinkColorHover | # 000000 | Changes link colour when it's hovered |
| messageOutgoingLinkColorFocus | # 000000 | Changes link colour when it's focused |
| messageOutgoingLinkColorVisited | # 000000 | Changes link colour when it's already visited |
| Chat Theme Property | Example value | Description |
|---|
| chatBackgroundColor | # CCCCCC | Changes the chat background colour |
| chatTextColor | # 000000 | Changes the text in Main (Invitation, PreChat, Window) |
| chatLoaderColor | # 000000 | Change the loader stroke width |
| chatSeparatorBackgroundColor | # F1F1F1 | Changes the background colour of the separator located above the send message field and field on PreChat form step |
| Chat Theme Property | Example value | Description |
|---|
| formLabelTextColor | # 000000 | Changes the label text color for input, radio, textarea, and select components |
| formElementTextColor | # 000000 | Changes the text colour of the form element |
| formElementBorderColor | # 000000 | Changes the border colour of the form element |
| formElementBorderRadius | # 000000 | Changes the rounding of of the form element |
| formElementBackgroundColor | # 000000 | Changes the background colour of the form element |
| formElementBackgroundColorHover | # 000000 | Changes the background colour of the select option in dropdown when it's hovered |
| Chat Theme Property | Example value | Description |
|---|
| attachmentItemColor | # 000000 | Changes the text colour inside the adding attachment widget |
| attachmentItemBackgroundColor | # FFFFFF | Changes the background colour inside the adding attachment widget |
| attachmentItemBorderRadius | 6px | Changes the adding attachment widget rounding |
| attachmentItemBorderColor | # CCCCCC | Changes the adding attachment widget border colour |
| attachmentLinkColor | # 2983A4 | Changes the link text colour inside the adding attachment widget |
| attachmentLinkColorHover | # 00394B | Changes the link text colour inside the adding attachment widget when it's hover |
| attachmentLinkColorFocus | # 0049B7 | Changes the link outline colour inside the adding attachment widget when it's focus |
| attachmentIconDownloadColor | # B79F00 | Changes the download icon colour in attachment preview |
| attachmentIconDownloadColorHover | # 5B4F00 | Changes the colour of the icon to download on hover |
