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

По умолчанию виджет формы подписки имеет нейтральный стиль, который подходит для большинства страниц. После добавления кода для встраивания вы можете привести его в соответствие с визуальным стилем вашего сайта, установив пользовательские свойства CSS для элемента pushwoosh-subscribe-widget. Значения в таблицах ниже заменяют значения по умолчанию.

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

Переменная	Описание	По умолчанию
`--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)`

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

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