How to set custom background for pre-chat form

Even though there is no option to use your own image as the pre-chat form 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 and open Pre-chat form > Design. Now scroll down to the "Custom CSS" section and add the following CSS code:

For Material & Ascent use

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

For Rotary use

.leftFormSide {
    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 design.