Customize Chatlio appearance

General appearance updates

You can customize pretty much everything about the chatlio widget. First, most of the most commonly modified elements can be modified directly from the Chatlio dashboard. Look here first.

Customize Chatlio appearance

You can also modify the style of widget shown, eg. sidebar, bottom right corner, embed, etc.

CSS customization

We also don’t charge extra for you modifying the CSS for the widget, giving you full control over the look of Chatlio.

Just a word of warning: Although we try hard to not modify our classes and markup structure, at times it might be necessary on our end. This could break your overrides. Here is an example of a css override to move widget to left side of screen.

We recommend you wrap all your Chatlio CSS overrides under the #chatlio-widget .chatlio-widget-body selector to minimize the risk of conflicts with other styles on the page.

Example 1, Move widget to left side of screen. Go to the Chatlio dashboard and look for “Alignment” section.

Example 2, Make widget wider

#chatlio-widget .chatlio-widget-body {
  width: 400px;

Example 3, Make widget taller

#chatlio-widget .chatlio-widget-body {
  height: 400px;

Example 4, Move widget up

#chatlio-widget-container {
  bottom: 40px;

Multi-language support and setting label text dynamically

If you need to configure multiple language support with Chatlio, check out configure() in our JS API.

Your browser is out-of-date!

This website is built using latest technogies. Unfortunately your browser doesn't support those. Please update your browser to view this website correctly. Thank you.Update my browser now