В личном кабинете вы можете менять внешний вид виджета.



Для этого выполните следующие действия:

  1. Нажмите кнопку Чаты и затем выберите пункт Настройки.

 


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>

Результат:



  • Нет меток