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

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

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

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

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

:::note
Добавленные стили автоматически применяются ко всем виджетам, использующим этот бренд.
:::

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

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

Например*:*

```css
.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. Внутренние классы и разметка могут измениться при обновлении виджета.

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

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

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

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

button {
  border-radius: 20px;
}
```

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

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

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

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

```css
.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`, размеры которого ограничены. Значительное изменение размеров компонентов может привести к проблемам с вёрсткой:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

```