# Настройка виджета формы подписки

По умолчанию виджет формы подписки имеет нейтральный стиль, который подходит для большинства страниц. После добавления [кода для встраивания](/ru/product/audience-data-and-segmentation/subscription-forms/create-subscription-forms/#copy-the-embed-code-and-add-it-to-your-site) вы можете привести его в соответствие с визуальным стилем вашего сайта, установив пользовательские свойства CSS для элемента `pushwoosh-subscribe-widget`. Значения в таблицах ниже заменяют значения по умолчанию.

<Aside type="caution" icon="setting" title="Требуется помощь разработчика">
Вам может потребоваться помощь вашей команды разработчиков, чтобы применить эти изменения стиля виджета на вашем сайте.
</Aside>

## Настройка цветов

| Переменная | Описание | По умолчанию |
| --- | --- | --- |
| `--esw-primary-color` | Основной цвет для кнопок, ссылок и акцентов | `#0E72E5` |
| `--esw-primary-hover` | Цвет основных элементов при наведении | `#1A85FF` |
| `--esw-text-color` | Основной цвет текста | `#4B5057` |
| `--esw-text-secondary` | Второстепенный текст (плейсхолдеры, подписи) | `#969CA3` |
| `--esw-background` | Фон виджета | `#FFFFFF` |
| `--esw-surface-color` | Цвет поверхности (при наведении, второстепенный фон) | `#F7F9FA` |
| `--esw-border-color` | Цвет рамки | `#DCE1E5` |
| `--esw-border-color-focus` | Цвет рамки в состоянии фокуса | `#0E72E5` |
| `--esw-error-color` | Цвет ошибки | `#E52E59` |
| `--esw-success-color` | Цвет успеха | `#479900` |
| `--esw-success-bg` | Фон сообщения об успехе | `#F7F9FA` |

## Типографика

| Переменная | Описание | По умолчанию |
| --- | --- | --- |
| `--esw-font-family` | Семейство шрифтов | `Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif` |
| `--esw-font-size-base` | Базовый размер шрифта | `14px` |
| `--esw-font-size-title` | Размер шрифта заголовка | `18px` |
| `--esw-font-size-label` | Размер шрифта метки поля | `12px` |
| `--esw-font-size-small` | Мелкий текст (ошибки, примечания) | `12px` |
| `--esw-font-weight-regular` | Обычная насыщенность | `400` |
| `--esw-font-weight-medium` | Средняя насыщенность | `500` |
| `--esw-font-weight-bold` | Жирная насыщенность | `700` |
| `--esw-line-height-base` | Базовая высота строки | `1.4` |
| `--esw-line-height-title` | Высота строки заголовка | `1.2` |

## Размеры и отступы

| Переменная | Описание | По умолчанию |
| --- | --- | --- |
| `--esw-input-height` | Высота поля ввода | `36px` |
| `--esw-button-height` | Высота кнопки | `36px` |
| `--esw-spacing-xs` | Очень маленький отступ | `4px` |
| `--esw-spacing-sm` | Маленький отступ | `8px` |
| `--esw-spacing-md` | Средний отступ | `16px` |
| `--esw-spacing-lg` | Большой отступ | `24px` |
| `--esw-popup-width` | Ширина модального окна | `380px` |
| `--esw-popup-max-width` | Максимальная ширина модального окна | `90vw` |

## Внешний вид

| Переменная | Описание | По умолчанию |
| --- | --- | --- |
| `--esw-border-radius` | Радиус скругления углов для элементов | `4px` |
| `--esw-border-radius-popup` | Радиус скругления углов модального окна | `8px` |
| `--esw-shadow-popup` | Тень модального окна | `0 0 6px rgba(0, 0, 0, 0.06), 0 10px 16px rgba(0, 0, 0, 0.1)` |

## Примеры

<Tabs>
<TabItem label="CSS">

```css
pushwoosh-subscribe-widget {
  --esw-primary-color: #ff6b6b;
  --esw-border-radius: 12px;
  --esw-font-family: "Inter", sans-serif;
}
```

</TabItem>
<TabItem label="Атрибут style">

```html
<pushwoosh-subscribe-widget
  formCode="YOUR_FORM_CODE"
  style="--esw-primary-color: #ff6b6b; --esw-border-radius: 12px;"
></pushwoosh-subscribe-widget>
```

</TabItem>
</Tabs>