Personalizar el widget del formulario de suscripción

Por defecto, el widget del formulario de suscripción utiliza un estilo neutro que funciona en la mayoría de las páginas. Después de agregar el código de inserción, puede hacerlo coincidir con la identidad visual de su sitio estableciendo propiedades personalizadas de CSS en el elemento pushwoosh-subscribe-widget. Los valores en las tablas a continuación reemplazan los predeterminados.

Personalizar colores

Variable	Descripción	Predeterminado
`--esw-primary-color`	Color primario para botones, enlaces y acentos	`#0E72E5`
`--esw-primary-hover`	Color de los elementos primarios al pasar el cursor	`#1A85FF`
`--esw-text-color`	Color del texto principal	`#4B5057`
`--esw-text-secondary`	Texto secundario (placeholders, leyendas)	`#969CA3`
`--esw-background`	Fondo del widget	`#FFFFFF`
`--esw-surface-color`	Color de la superficie (hovers, fondo secundario)	`#F7F9FA`
`--esw-border-color`	Color del borde	`#DCE1E5`
`--esw-border-color-focus`	Color del borde en estado de foco	`#0E72E5`
`--esw-error-color`	Color de error	`#E52E59`
`--esw-success-color`	Color de éxito	`#479900`
`--esw-success-bg`	Fondo del mensaje de éxito	`#F7F9FA`

Tipografía

Variable	Descripción	Predeterminado
`--esw-font-family`	Familia de fuentes	`Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif`
`--esw-font-size-base`	Tamaño de fuente base	`14px`
`--esw-font-size-title`	Tamaño de fuente del título	`18px`
`--esw-font-size-label`	Tamaño de fuente de la etiqueta del campo	`12px`
`--esw-font-size-small`	Texto pequeño (errores, notas)	`12px`
`--esw-font-weight-regular`	Grosor regular	`400`
`--esw-font-weight-medium`	Grosor medio	`500`
`--esw-font-weight-bold`	Grosor negrita	`700`
`--esw-line-height-base`	Altura de línea base	`1.4`
`--esw-line-height-title`	Altura de línea del título	`1.2`

Tamaños y espaciado

Variable	Descripción	Predeterminado
`--esw-input-height`	Altura del campo de entrada	`36px`
`--esw-button-height`	Altura del botón	`36px`
`--esw-spacing-xs`	Espaciado extra pequeño	`4px`
`--esw-spacing-sm`	Espaciado pequeño	`8px`
`--esw-spacing-md`	Espaciado mediano	`16px`
`--esw-spacing-lg`	Espaciado grande	`24px`
`--esw-popup-width`	Ancho del modal	`380px`
`--esw-popup-max-width`	Ancho máximo del modal	`90vw`

Apariencia

Variable	Descripción	Predeterminado
`--esw-border-radius`	Radio de esquina para los elementos	`4px`
`--esw-border-radius-popup`	Radio de esquina del modal	`8px`
`--esw-shadow-popup`	Sombra de la caja del 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>