Customize the subscription form widget

By default, the subscription form widget uses a neutral style that works on most pages. After you add the embed code, you can match it to your site’s visual identity by setting CSS custom properties on the pushwoosh-subscribe-widget element. The values in the tables below replace the defaults.

Customize colors

Variable	Description	Default
`--esw-primary-color`	Primary color for buttons, links, and accents	`#0E72E5`
`--esw-primary-hover`	Primary elements hover color	`#1A85FF`
`--esw-text-color`	Main text color	`#4B5057`
`--esw-text-secondary`	Secondary text (placeholders, captions)	`#969CA3`
`--esw-background`	Widget background	`#FFFFFF`
`--esw-surface-color`	Surface color (hovers, secondary background)	`#F7F9FA`
`--esw-border-color`	Border color	`#DCE1E5`
`--esw-border-color-focus`	Border color in focus state	`#0E72E5`
`--esw-error-color`	Error color	`#E52E59`
`--esw-success-color`	Success color	`#479900`
`--esw-success-bg`	Success message background	`#F7F9FA`

Typography

Variable	Description	Default
`--esw-font-family`	Font family	`Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif`
`--esw-font-size-base`	Base font size	`14px`
`--esw-font-size-title`	Title font size	`18px`
`--esw-font-size-label`	Field label font size	`12px`
`--esw-font-size-small`	Small text (errors, notes)	`12px`
`--esw-font-weight-regular`	Regular weight	`400`
`--esw-font-weight-medium`	Medium weight	`500`
`--esw-font-weight-bold`	Bold weight	`700`
`--esw-line-height-base`	Base line height	`1.4`
`--esw-line-height-title`	Title line height	`1.2`

Sizes and spacing

Variable	Description	Default
`--esw-input-height`	Input field height	`36px`
`--esw-button-height`	Button height	`36px`
`--esw-spacing-xs`	Extra small spacing	`4px`
`--esw-spacing-sm`	Small spacing	`8px`
`--esw-spacing-md`	Medium spacing	`16px`
`--esw-spacing-lg`	Large spacing	`24px`
`--esw-popup-width`	Modal width	`380px`
`--esw-popup-max-width`	Modal max width	`90vw`

Appearance

Variable	Description	Default
`--esw-border-radius`	Corner radius for elements	`4px`
`--esw-border-radius-popup`	Modal corner radius	`8px`
`--esw-shadow-popup`	Modal box shadow	`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>