#1823: CSS стили в виджете

Брендирование виджета с помощью CSS

Внешний вид виджета можно изменить в настройках бренда. Для этого не требуется редактировать код подключения виджета или размещать отдельный CSS-файл на сайте.

Добавление пользовательских стилей

1. Перейдите в раздел Настройки - Управление брендами.
2. Откройте бренд, который используется виджетом.
3. Добавьте CSS-код в поле Стили для темы.
4. Сохраните изменения внизу страницы.
5. Обновите страницу, на которой размещён виджет, и проверьте результат.

В поле Стили для темы необходимо добавлять только CSS-код - теги style не требуются.

CSS-классы виджета

Все публичные CSS-классы виджета имеют префикс: .sw-widget-

Например:

.sw-widget-body
.sw-widget-container
.sw-widget-header
.sw-widget-header-title
.sw-widget-header-button
.sw-widget-chat-input
.sw-widget-login-title
.sw-widget-login-button

Не рекомендуется использовать внутренние классы Bootstrap или привязывать правила к конкретной структуре HTML. Внутренние классы и разметка могут измениться при обновлении виджета.

Ограничение области действия стилей

Поле Стили для темы также используется для брендирования основной платформы. Поэтому не добавляйте глобальные селекторы, которые могут изменить внешний вид элементов за пределами виджета.

Не рекомендуется:

body {
  font-family: Arial, sans-serif;
}

button {
  border-radius: 20px;
}

Вместо этого используйте публичные классы виджета:

.sw-widget-body {
  font-family: Arial, sans-serif;
}

.sw-widget-login-button {
  border-radius: 20px;
}

Пример кастомизации

.sw-widget-body {
  font-family: "Trebuchet MS", system-ui, sans-serif;
}

.sw-widget-container {
  border-radius: 24px;
}

.sw-widget-header {
  background-color: #ffffff;
}

.sw-widget-header-button {
  color: #CACFDE;
}

.sw-widget-header-button svg {
  width: 24px;
  height: 24px;
}

.sw-widget-header-title {
  left: 28%;
  font-size: 20px;
  font-weight: 400;
  color: #000000;
}


.sw-widget-login-title {
  display: none;
}

.sw-widget-chat-input {
  background-color: #dbdbdb;
}

.sw-widget-login-button {
  color: #407aff;
  background-color: #ccdcff;
  border-color: #ccdcff;
  font-weight: 600;
  width: 225px;
  margin: 0px auto;
  border-radius: 20px;
  line-height: 1.8;
}

Размеры элементов

Виджет отображается внутри iframe, размеры которого ограничены. Значительное изменение размеров компонентов может привести к проблемам с вёрсткой:

• обрезанию текста или элементов;
• появлению нежелательной прокрутки;
• наложению компонентов друг на друга;
• выходу кнопок за границы виджета;
• некорректному отображению на мобильных устройствах.

Не рекомендуется без необходимости значительно изменять:

width
height
min-width
min-height
padding
margin
font-size
position
transform

Например, слишком большая фиксированная ширина может не поместиться в виджет:

/* Не рекомендуется */
.sw-widget-login-button {
  width: 500px;
}

Если размер всё же необходимо изменить, предпочтительнее использовать относительные ограничения:

.sw-widget-login-button {
  width: 225px;
  max-width: 100%;
}

Адаптивные стили

При необходимости можно использовать медиазапросы:

@media (max-width: 480px) {
  .sw-widget-header-title {
    font-size: 16px;
  }

  .sw-widget-login-button {
    width: 100%;
  }
}

После изменений рекомендуется проверить виджет как минимум:

• в закрытом и открытом состоянии;
• на странице входа;
• в списке чатов и внутри чата;
• на компьютере и мобильном устройстве;
• с короткими и длинными текстами;
• на всех используемых языках.

Приоритет правил

Если пользовательское правило не применяется, сначала попробуйте повысить специфичность селектора:

.sw-widget-body .sw-widget-header {
  background-color: #ffffff;
}

`!important` следует использовать только в крайнем случае, чрезмерное использование !important затрудняет дальнейшую настройку и поддержку стилей.