How to display your logo in the Material or Rotary pre-chat form

Even though there is no option to change the header image for Material or Rotary pre-chat form designs by default, you are able to display your own logo instead using Custom CSS. To do so, navigate to Configuration > Chat > Chat buttons > Edit your button and upload your logo in the "Pre-chat form" tab. Then in the "Design" tab scroll down to the "Custom CSS" section and insert the following CSS code:

For Material use

.ContactHeader:before, .ContactHeader:after {
    content: normal;
}
.ContactHeader img {
    display: initial !important;
}
.ContactHeader {
    margin-top: 20px !important;
    margin-left: 0px !important;
}

For Rotary use

.ContactHeader:before {
    content: normal;
}
.ContactHeader img {
    display: initial !important;
}

Do not forget to APPLY the CSS code and SAVE the design.