В личном кабинете вы можете менять внешний вид виджета.
Для этого выполните следующие действия:
- Нажмите кнопку Чаты и затем выберите пункт Настройки.
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> |
Результат:
