The same Livechat with different colours on many, different pages

Is it possible to include the same chat on different websites?

The same chat can be put on different websites. As a result, customers from different parts of our company can be supported by the same consultants. However, websites often differ visually from each other and the same chat look will not be compatible with the appearance of individual websites. Then we can use individual CSS styles.

own CSS

How to adjust the appearance of chat to the style of website?

We can add a few different CSSs in the individual design settings.

By default, the styles that we add will be included in all our chat on each page where we add livechat. So if we want to apply a particular style to one of the chats (one of the website) we disable the option "Apply all chats automatically".

Then we will see a note about the need to add a fragment to the chat code, which will be a display the style we have added.

custom appearance

The default chat code without CSS modification is looks like as follows

default chat code
default chat appearance

We have added CSS styles to the settings. To the code on the website we added a generated fragment. This is the code after the changes:

customized chat code
customized chat appearance

Chat CSS related to colors:
  • Header
    .czater-header { background-color: red !important; }
  • Button
    .czater-button { background-color: red; color: white; }
  • Invitation to a conversation
    #e3D18r_czater #czater-contener #teaser { background: red !important; color: white; }
    #teaser::after { border-color: transparent red; }
  • Footer
    .czater-submit { background: red; }
  • Handset
    #czatercall-button-body #czatercall-button { background: red!important; } #czatercall-button-body #czatercall-button:before { background: red!important; }
  • A background of a consultant message
    #chatInsideBody .czater-leftMessage { background-color: red !important; } #chatInsideBody .czater-leftMessage:before { border-color: transparent red!important; }
In the example shown above we used red for each element. Of course you can use any colours you like..