Custom Chat Widget Themes

Ewa Hendrychowska in Design, News, Product, on January 24, 2018, Comments

LiveChat Custom Themes

At LiveChat, we believe in the power of personalization. One-size-fits-all solutions rarely work, so we want each customer to be able to tailor LiveChat to their needs.

As you may already know, LiveChat supports full CSS customization. Just basic CSS and HTML skills are enough to adjust the LiveChat widget to the look and feel of your website. To make the process even easier, we have released an exhaustive LiveChat Custom Themes documentation with everything you may need to start creating.

Custom Themes Marketplace

But that’s not all! Starting today, custom themes are available in the LiveChat Marketplace.

Chat themes Marketplace Chat themes in the Marketplace

Download

To download a theme for your license, just click “Install” button next to the theme of your choice. Then go to Chat Window > Theme in the agent app and select your new template from the dropdown list.

Select LiveChat Theme A brand new way of selecting LiveChat window themes

Contribute

Creating new LiveChat themes is extremely simple. Basically, it’s overwriting the styles of one of the default templates with your own CSS declarations. All you need is some CSS knowledge and the ability to use your browser’s developer tools (the inspector).

To create a theme, go to the Developer Console and create a new app (“Chat widget theme” type). Then go to “Features” section of your theme, select the base and paste your custom styles in “Theme CSS” box.

Create Custom Theme “Create an theme” screen in the Developer Console (click to zoom)

Finally, go to “Distribution” screen and install the theme for your license or submit it for review.

Sample themes

To help you get started, we have prepared a set of sample themes. Feel free to modify the selectors or add your own, and don’t forget to share with the community!

The themes are available on GitHub here.