В личном кабинете вы можете менять внешний вид виджета.
Для этого выполните следующие действия:
- Разверните в боковой панели раздел Чаты и затем выберите пункт Настройки.
2. Найдите название нужного чата. 
3. Нажмите кнопку Редактировать.
Откроется окно Редактирование чата.
4. Прокрутите вниз до поля Цвет пользователя. Нажмите на него и выберите цвет.
Код цвета можно указать вручную. Поддерживаются форматы HEX, RGBA, HSLA.
Для того чтобы ваш виджет выглядел гармонично, стоит выбирать темные оттенки цветов.
Для элементов, которые поддерживают стилизацию, устанавливается фон в виде градиента. Слева будет оттенок, который выбрали вы, а справа – более светлый оттенок, который определяется автоматически.
Поля Цвет робота, Цвет оператора, Цвет кнопок и Цвет текста кнопок являются устаревшими и больше не используются.
5. Чтобы загрузить аватар для робота, нажмите кнопку Аватар робота и выберите изображение, которое хотите загрузить.
Удалить аватар на данный момент нельзя. Но можно заменить его на новый.
Аватары для оператора и чата можно загрузить таким же образом.
6. Когда все изменения внесены, прокрутите окно Редактирование чата вниз и нажмите кнопку Сохранить чат.
7. Чтобы увидеть результат, обновите страницу на которой размещен виджет (нажмите F5 для Windows или cmd + R в MacOS).
Стилизация за счет переопределения стилей
Рассмотрим на примере кнопки, которая разворачивает виджет чата:
Если открыть инструменты разработчика, то можно увидеть, что за стили этой кнопки отвечает класс .twc-chat-button.
Добавьте следующий код перед закрывающим тегом </head>:
<style type="text/css">
.twc-chat-button {
background: orange !important;
}
</style>
Как видите, стиль фона был переопределен и теперь кнопка оранжевая:
Чтобы заменить изображение на кнопке, в стили для класса .twc-chat-button добавьте строчку с параметром content и установите отступ padding:
<style type="text/css">
.twc-chat-button {
content: url('https://адрес изображения');
padding: 10px;
background: orange !important;
}
</style>
Результат:
