Personalizar o widget do formulário de inscrição

Por padrão, o widget do formulário de inscrição usa um estilo neutro que funciona na maioria das páginas. Depois de adicionar o código de incorporação, você pode combiná-lo com a identidade visual do seu site definindo propriedades personalizadas de CSS no elemento pushwoosh-subscribe-widget. Os valores nas tabelas abaixo substituem os padrões.

Personalizar cores

Variável	Descrição	Padrão
`--esw-primary-color`	Cor primária para botões, links e destaques	`#0E72E5`
`--esw-primary-hover`	Cor de hover para elementos primários	`#1A85FF`
`--esw-text-color`	Cor principal do texto	`#4B5057`
`--esw-text-secondary`	Texto secundário (placeholders, legendas)	`#969CA3`
`--esw-background`	Fundo do widget	`#FFFFFF`
`--esw-surface-color`	Cor da superfície (hovers, fundo secundário)	`#F7F9FA`
`--esw-border-color`	Cor da borda	`#DCE1E5`
`--esw-border-color-focus`	Cor da borda no estado de foco	`#0E72E5`
`--esw-error-color`	Cor de erro	`#E52E59`
`--esw-success-color`	Cor de sucesso	`#479900`
`--esw-success-bg`	Fundo da mensagem de sucesso	`#F7F9FA`

Tipografia

Variável	Descrição	Padrão
`--esw-font-family`	Família da fonte	`Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif`
`--esw-font-size-base`	Tamanho da fonte base	`14px`
`--esw-font-size-title`	Tamanho da fonte do título	`18px`
`--esw-font-size-label`	Tamanho da fonte do rótulo do campo	`12px`
`--esw-font-size-small`	Texto pequeno (erros, notas)	`12px`
`--esw-font-weight-regular`	Peso regular	`400`
`--esw-font-weight-medium`	Peso médio	`500`
`--esw-font-weight-bold`	Peso negrito	`700`
`--esw-line-height-base`	Altura da linha base	`1.4`
`--esw-line-height-title`	Altura da linha do título	`1.2`

Tamanhos e espaçamento

Variável	Descrição	Padrão
`--esw-input-height`	Altura do campo de entrada	`36px`
`--esw-button-height`	Altura do botão	`36px`
`--esw-spacing-xs`	Espaçamento extra pequeno	`4px`
`--esw-spacing-sm`	Espaçamento pequeno	`8px`
`--esw-spacing-md`	Espaçamento médio	`16px`
`--esw-spacing-lg`	Espaçamento grande	`24px`
`--esw-popup-width`	Largura do modal	`380px`
`--esw-popup-max-width`	Largura máxima do modal	`90vw`

Aparência

Variável	Descrição	Padrão
`--esw-border-radius`	Raio do canto para elementos	`4px`
`--esw-border-radius-popup`	Raio do canto do modal	`8px`
`--esw-shadow-popup`	Sombra da caixa do modal	`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>