Place this tag within <head></head> section:

<link rel="stylesheet" href="//">

LiveChat Boilerplate is CSS stylesheet for basic interface elements. To lift off you just need to add the boilerplate stylesheet to your project.


Use tooltips to explain particular elements of interface or to provide additional context or details. You can also create a neat onboarding experience using tooltips as a guide elements.

<div class="menu">
	<span class="app-icon app-icon-settings"></span>
	<div class="small-tooltip small-tooltip--visible">
		<div class="small-tooltip__arrow"></div>
		<div class="small-tooltip__content">Settings</div>

You can change the position of a tooltip arrow using these classes:

  • info-tooltip__arrow--left-top
  • info-tooltip__arrow--right-top
  • info-tooltip__arrow--top-left
  • info-tooltip__arrow--top-right

Username has to be outstanding.

Let us know your name, it's going to look awesome on the home screen!
Next (1 of 3 steps)


Example usage

<!-- A element -->
<a href="" class="button yellow"><span>Save settings</span></a>

<!-- BUTTON element -->
<button class="button yellow"><span>Save settings</span></button>

LiveChat Boilerplate ships with a handful of predefined buttons. Two formats are supported: <a...> and <button...>. Mind the <span...> tag, necessary for both!

<a> tag <button> tag
<a href="" class="button yellow"><span>...</span></a> <button class="button yellow"><span>...</span></button>

Using buttons

LiveChat Agent App uses a unified color scheme within all the views. Feel free to pick up your favourites, but keep in mind the users got used to particular colors and already associated certain functions with them.

Colors & functions

Function Color CSS classes Preview
save {#efa843} button yellow Save
continue {#4285f4} button blue Continue
delete {#ea4335} button red Delete
activate {#46b776} button green Activate
other {#000000} button black Read the docs


Here are the most common implementations.

Save changes

<a href="" class="button yellow"><span>Save changes</span></a>
<span class="cancel">or <a href="">cancel</a></span>


<a href="" class="button blue"><span>Log out of this app</span></a>
<span class="alternative">or <a href="">log out of all devices</a></span>


<a href="" class="button red"><span>Delete message</span></a>
<span class="cancel">or <a href="">cancel</a></span>


<button class="button switch on">
	<span class="on"></span>
	<span class="off"></span>
	<span class="toggle"></span>
Should we notify new users?


Form is probably the most basic way of interacting with a user. Make sure it is accessible and self-explanatory. It also helps to break huge forms into separate pieces. Provide validation feedback with predefined --error classes.

Basic form

<form class="form">
	<p class="form__p">
		<label class="form__label" for="message1">Message</label>
		<textarea class="form__textarea" id="message1"></textarea>
	<p class="form__p">
		<label class="form__label" for="username1">Username</label>
		<input type="text" class="form__input" id="username1">
		<span class="form__explanation">Your username can consist of the following characters: [a-ZA-Z0-9].</span>
	<p class="form__cta">
		<button class="button yellow"><span>Save</span></button>
		<span class="cancel">or <a href="">cancel</a></span>

Your username should be surprising.

or cancel

Form with errors

<form class="form">
	<p class="form__p">
		<label class="form__label" for="message2">Message</label>
		<textarea class="form__textarea form__textarea--error" id="message2"></textarea>
		<span class="form__error">Message cannot be empty.</span>
	<p class="form__p">
		<label class="form__label" for="username2">Username</label>
		<input type="text" class="form__input form__input--error" id="username2">
		<span class="form__error">Please enter your username.</span>
		<span class="form__explanation">Your username should sound funny.</span>
	<p class="form__cta">
		<button class="button yellow"><span>Save</span></button>
		<span class="cancel">or <a href="">cancel</a></span>
		<span class="form__error">Oops! Something went wrong....</span>

Message cannot be empty.

Please enter your username. Your username should reflect your attitude.

or cancel Oops! Something went wrong...


Example usage

<span class="app-icon app-icon-accepting"></span>

With icons you can build a side-menu or draw additional context. Keep in mind that the icons listed below are already in use within LiveChat Agent App – try not to interfere with them.

Styling the icons

Icons are served as a font, thus you can easily adjust their size and color with CSS.

Preview CSS
Watch out color: #efa843; font-size: 28px;
Perfect! color: #ea4335; font-size: 28px;

Full icon list

Icon Example
<span class="app-icon app-icon-accepting"></span>
<span class="app-icon app-icon-achat"></span>
<span class="app-icon app-icon-activity"></span>
<span class="app-icon app-icon-addcanned"></span>
<span class="app-icon app-icon-alert"></span>
<span class="app-icon app-icon-arrow_left"></span>
<span class="app-icon app-icon-arrow_right"></span>
<span class="app-icon app-icon-ban"></span>
<span class="app-icon app-icon-bell"></span>
<span class="app-icon app-icon-billing"></span>
<span class="app-icon app-icon-canned"></span>
<span class="app-icon app-icon-cart"></span>
<span class="app-icon app-icon-channels"></span>
<span class="app-icon app-icon-chat"></span>
<span class="app-icon app-icon-chatwindow"></span>
<span class="app-icon app-icon-cookie"></span>
<span class="app-icon app-icon-copy"></span>
<span class="app-icon app-icon-dashboard"></span>
<span class="app-icon app-icon-dissatisfaction"></span>
<span class="app-icon app-icon-edittext"></span>
<span class="app-icon app-icon-exportreports"></span>
<span class="app-icon app-icon-facebook"></span>
<span class="app-icon app-icon-firstresponse"></span>
<span class="app-icon app-icon-goal"></span>
<span class="app-icon app-icon-greeting"></span>
<span class="app-icon app-icon-incognito"></span>
<span class="app-icon app-icon-integration"></span>
<span class="app-icon app-icon-kb"></span>
<span class="app-icon app-icon-key"></span>
<span class="app-icon app-icon-last7days"></span>
<span class="app-icon app-icon-mail"></span>
<span class="app-icon app-icon-marketing"></span>
<span class="app-icon app-icon-move"></span>
<span class="app-icon app-icon-notaccepting"></span>
<span class="app-icon app-icon-open"></span>
<span class="app-icon app-icon-pending"></span>
<span class="app-icon app-icon-pin"></span>
<span class="app-icon app-icon-queued"></span>
<span class="app-icon app-icon-referrer"></span>
<span class="app-icon app-icon-returning"></span>
<span class="app-icon app-icon-satisfaction"></span>
<span class="app-icon app-icon-search"></span>
<span class="app-icon app-icon-security"></span>
<span class="app-icon app-icon-settings"></span>
<span class="app-icon app-icon-spam"></span>
<span class="app-icon app-icon-star"></span>
<span class="app-icon app-icon-stopchat"></span>
<span class="app-icon app-icon-tick"></span>
<span class="app-icon app-icon-ticket"></span>
<span class="app-icon app-icon-tool"></span>
<span class="app-icon app-icon-transfer"></span>
<span class="app-icon app-icon-upload"></span>
<span class="app-icon app-icon-visited"></span>


Use loaders in variety of sizes to entertain user while loading the content.

Size Snippet
<div class="app__loading app__loading--large"></div>
<div class="app__loading app__loading--medium"></div>
<div class="app__loading app__loading--small"></div>
<div class="app__loading app__loading--tiny"></div>
<span class="app__loading app__loading--icon"></span>