Customize your chat window with CSS

You can spice up your chat window using custom CSS code.

Here are some examples of possible customizations and instructions on how to achieve them.

• Placing the chat window on the bottom left of the page
• Wider chat window
• Chat window in the bottom right, closer to the center
• Rounded avatars in the chat window
• Custom chat window background
• Higher or lower chat window
• Moving the eye-catcher
• Custom embedded invitation graphic

Placing the chat window on the bottom left of the page

To place you chat window in the bottom left portion of your website, put the following css code in your website’s code:

#livechat-compact-container,
#livechat-full {
	left: 20px; 
	right: auto;
}

To move the chat window more to the left edge, decrease the left value.

Wider chat window

To make your chat window wider, insert the following css code in your website’s code:

#livechat-compact-container,
#livechat-full {
	width: 450px !important; 
}

By changing the width value you can make the window wider or narrower.

Chat window in the bottom right, closer to the center

To have your window placed in the bottom right but a bit more to the center, place the following css code in your website’s code:

#livechat-compact-container,
#livechat-full {
	right: 40px !important; 
	bottom: 40px !important;
}

Rounded avatars in the chat window

This piece of code will make your chat window avatars rounded. Go to the Theme section, click on Customize… and input the following code there:

.operators-bar img {
        border-radius: 30px !important;
}

Custom chat window background

You can set up a custom background for your chat window. To do that, go to the Theme, click on Customize… and put the following code there:

#body-inner {
	background: url(your_background_file.jpg);
}

Remember to substitute your_background_file.jpg with full path to your custom background.

Taller or shorter chat window

To make your chat window taller or shorter, insert the following css code in your website’s code:

#livechat-full {
	height: 350px !important;
}

Changing the height value will make the chat window taller or shorter.

Moving the eye-catcher

If you plan to move your chat window around, you might want to move the eye-catcher as well. In order to achieve that, you have to use the codes below.

To move it to the left, use this code:

#livechat-eye-catcher { 
	left: 20px !important; 
	width: 250px !important; 
}

To move it to the right, you need a slightly different code:

#livechat-eye-catcher {
	right: 20px !important;
}

Custom embedded invitation graphic

To set up a custom graphic for your embedded chat invitation, you have to go to the Theme section of your Control panel and click on Customize… button.

Next, copy and paste the code below in the Custom CSS box.

#invitation-message { 
	visibility:hidden;
} 
#invitation { 
	padding-top:170px; 
} 
#view-invitation { 
	background-image:url(your_example_invite.png); 
	background-repeat:no-repeat; 
	background-attachment:fixed; 
	background-position:center 40px; 
}

Note that the (your_example_invite.png); portion of the code should be replaced with a path to the graphic of your invitation. The custom invite won’t show up properly if you don’t provide a correct path.

To finalize, click on Save changes.