Chat Overlay Custom Themes
In a chat overlay you can change many different aspects of the theme of your overlay by adding a new chat overly field of type "theme"
And then choosing which characteristic of the theme you want to change.
Below shows a sample screenshot to reflect what each theme setting does. You can easily use google's colour picker it help you pick hex colour codes, have a look here
| Theme Field | Sample Value | Description | Screenshot (click for larger view) |
|---|---|---|---|
| button-background | #a83232 | This changes the colour of the chat overlay icon that is shown when it first loads and is minimized on the screen. |  |
| dialog-background | #1e8225 | This changes the background colour of the main dialog area excluding the header. |  |
| button-color | #ffa200 | This changes the foreground colour of the button which ends up changing the text colour displayed on the button |  |
| button-notification-background-gradient-start | #ff0000 | This value changes the starting gradient colour inside of the small button shown when a chat that has already started is minimized (arrow in the screenshot is pointing to it for illustration purposes, arrow is NOT part of the rendered UI) |  |
| button-notification-background-gradient-end | #ff0000 | This value changes the ending gradient colour inside of the small button shown when a chat that has already started is minimized (arrow in the screenshot is pointing to it for illustration purposes, arrow is NOT part of the rendered UI) |  |
| dialog-border | #00ff04 | This changes the colour of the border around the whole chat window. As you can see in the screenshot the whole border around the window is green. |  |
| button-font-weight | 900 | This setting changes the weight of the font shown in the chat overlay button. You can see how setting it to 900 makes the font VERY bold. Valid entries are listed below: |  |
| button-shadow | #00ff00 | This setting changes the colour of the drop shadow around the chat overlay button. In this example the button-shadow has been changed to green: |  |
| button-new-message-background | #26ff00 | This changes the background colour of new message notification. This shows when the chat overlay is minimized and a new message is sent so the customer knows there is a new message in the conversation. |  |
| button-new-message-color | #26ff00 | This changes the colour of the font displaying the new message count. This shows when the chat overlay is minimized and a new message is sent so the customer knows there is a new message in the conversation. You can see that in this example we changed the font to green. |  |
| dialog-message-color | red | ||
| dialog-header-background-gradient-start | #26ff00 |  |
|
| dialog-header-background-gradient-end | #26ff00 |  |
|
| dialog-header-title-color | #26ff00 |  |
|
| dialog-header-separator-color | #26ff00 |  |
|
| dialog-header-subtitle-color | #26ff00 |  |
|
| dialog-header-landing-close-icon-color | #26ff00 |  |
|
| dialog-header-chat-close-icon-color | #26ff00 |  |
|
| dialog-header-landing-back-icon-color | #26ff00 |  |
|
| dialog-header-dropdown-menu-background | #26ff00 |  |
|
| dialog-header-dropdown-item-background | #26ff00 |  |
|
| dialog-header-dropdown-item-color | #26ff00 |  |
|
| dialog-header-dropdown-item-end-chat-color | #26ff00 |  |
|
| dialog-button-background | #26ff00 |  |
|
| dialog-button-color | #26ff00 |  |
|
| dialog-button-font-weight | normal | This setting changes the weight of the font shown in the chat dialog live chat button . You can see how setting it to bolder changes the weight in the screenshot. Valid entries are listed below: |  |
| dialog-contact-us-color | #26ff00 | This changes the colour of the text used for the contact us fields defined. |  |
| dialog-contact-us-icon-color | #26ff00 | This changes the colour of the icons used for the contact us fields defined. |  |
| dialog-contact-us-icon-border | #26ff00 | This changes the colour of the circular border used around the icons for the defined contact us fields. |  |
| dialog-contact-us-separator-color | #26ff00 |  |
|
| dialog-dynamic-form-error-color | #26ff00 |  |
|
| dialog-dynamic-form-label-color | #26ff00 |  |
|
| dialog-dynamic-form-label-color-focused | #26ff00 |  |
|
| dialog-dynamic-form-text-field-background | #26ff00 |  |
|
| dialog-dynamic-form-text-field-border | #26ff00 |  |
|
| dialog-dynamic-form-text-field-border-focused | #26ff00 |  |
|
| dialog-dynamic-form-text-field-color | #26ff00 |  |
|
| dialog-dynamic-form-enum-field-background-gradient-from | #26ff00 |  |
|
| dialog-dynamic-form-enum-field-background-gradient-to | #26ff00 |  |
|
| loading-spinner-background-color | #26ff00 |  |
|
| loading-spinner-text-color | #26ff00 |  |
|
| loading-spinner-text-container-background-color | #26ff00 |  |
|
| loading-spinner-light-circle-color | #26ff00 |  |
|
| loading-spinner-dark-circle-color | #26ff00 |  |
|
| mitel-chat--unread-dialog-background-gradient-start | #26ff00 | This changes the gradient start colour for the unread messages dialog |  |
| mitel-chat--unread-dialog-background-gradient-start | #26ff00 | This changes the gradient end colour for the unread messages dialog |  |
| mitel-chat--unread-dialog-color | #26ff00 | This changes the color for the text on the unread messages dialog |  |