Even though there is no option to edit chat window messages by default, you are able to customize them using Custom CSS. To do so, navigate to Configuration > Chat > Chat buttons > Edit your chat button. Then in the "Chat window" tab scroll down to the "Custom CSS" section and add the following CSS code:
/*
In the below example, we are changing Avatar background, Messages background and
Messages time color to BLACK. In order to change them to a different color, replace
all blacks to any other color.
*/
.MessageNotification, .chatMessagesGroupMe .Avatar, .chatMessagesGroupAgent .Avatar {
background-color: black !important;
}
.chatMessagesGroupMe .messagesPanel .MessageNotification:first-child:before {
border-color: transparent black transparent transparent;
}
.chatMessagesGroupAgent .messagesPanel .MessageNotification:first-child:before {
border-color: transparent transparent transparent black;
}
.chatMessagesGroupMe .messagesPanel .MessageNotification:first-child .messageTime,
.chatMessagesGroupAgent .messagesPanel .MessageNotification:first-child .messageTime {
color: black;
font-weight: 900;
}
/*
Message font colors can be customized by the default chat window customization UI.
*/
Do not forget to APPLY the CSS code and SAVE the chat window.