Documentation navigation
Documentation

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 in the Chatlio settings. Here is how to adjust these settings:

  1. Open the Dashboard.
  2. Select the widget for which you would like to customize.
  3. Select the Appearance tab and you will see all of the settings to customize the look of your widget.

Customize Chatlio appearance

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

CSS customization

For the standalone v6 widget, use the supported v6 CSS custom properties and ::part() hooks. The examples below target the legacy v5 light-DOM widget and do not cross v6’s Shadow DOM.

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, Make widget wider

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

Example 2, Make widget taller

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

Example 3, Move widget up

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

Example 4, Move widget to left side of screen. You don’t have to use CSS to accomplish this one.

  1. Open the Chatlio dashboard
  2. Select the widget you want to move.
  3. On the Appearance tab locate the “Alignment” section at the bottom of the page.

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.