How to set custom background for chat window

Even though there is no option to use your own image as the chat window background by default, you are able to achieve this requirement using Custom CSS. To do so, navigate to Configuration > Chat > Chat buttons > Edit your chat button. In the "Chat window" tab scroll down to the "Custom CSS" section and add the following CSS code:

.ChatFrame {
    background-image: url(https://miro.medium.com/max/1400/1*dP81IJq-tGFxy1rIK3RYsg.png) !important;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

In the upper example, we´ve set a custom image as the background. In order to insert your own image, replace the image URL in the CSS code with a URL pointing to your image. Do not forget to APPLY the CSS code and SAVE the chat window.

×