Personnaliser le widget de formulaire d'abonnement

Par défaut, le widget de formulaire d’abonnement utilise un style neutre qui fonctionne sur la plupart des pages. Après avoir ajouté le code d’intégration, vous pouvez l’adapter à l’identité visuelle de votre site en définissant des propriétés personnalisées CSS sur l’élément pushwoosh-subscribe-widget. Les valeurs dans les tableaux ci-dessous remplacent les valeurs par défaut.

Personnaliser les couleurs

Variable	Description	Par défaut
`--esw-primary-color`	Couleur principale pour les boutons, les liens et les accents	`#0E72E5`
`--esw-primary-hover`	Couleur de survol des éléments principaux	`#1A85FF`
`--esw-text-color`	Couleur du texte principal	`#4B5057`
`--esw-text-secondary`	Texte secondaire (placeholders, légendes)	`#969CA3`
`--esw-background`	Arrière-plan du widget	`#FFFFFF`
`--esw-surface-color`	Couleur de surface (survols, arrière-plan secondaire)	`#F7F9FA`
`--esw-border-color`	Couleur de la bordure	`#DCE1E5`
`--esw-border-color-focus`	Couleur de la bordure à l’état focus	`#0E72E5`
`--esw-error-color`	Couleur d’erreur	`#E52E59`
`--esw-success-color`	Couleur de succès	`#479900`
`--esw-success-bg`	Arrière-plan du message de succès	`#F7F9FA`

Typographie

Variable	Description	Par défaut
`--esw-font-family`	Famille de polices	`Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif`
`--esw-font-size-base`	Taille de police de base	`14px`
`--esw-font-size-title`	Taille de police du titre	`18px`
`--esw-font-size-label`	Taille de police de l’étiquette de champ	`12px`
`--esw-font-size-small`	Petit texte (erreurs, notes)	`12px`
`--esw-font-weight-regular`	Graisse normale	`400`
`--esw-font-weight-medium`	Graisse moyenne	`500`
`--esw-font-weight-bold`	Graisse grasse	`700`
`--esw-line-height-base`	Hauteur de ligne de base	`1.4`
`--esw-line-height-title`	Hauteur de ligne du titre	`1.2`

Tailles et espacements

Variable	Description	Par défaut
`--esw-input-height`	Hauteur du champ de saisie	`36px`
`--esw-button-height`	Hauteur du bouton	`36px`
`--esw-spacing-xs`	Espacement très petit	`4px`
`--esw-spacing-sm`	Petit espacement	`8px`
`--esw-spacing-md`	Espacement moyen	`16px`
`--esw-spacing-lg`	Grand espacement	`24px`
`--esw-popup-width`	Largeur de la modale	`380px`
`--esw-popup-max-width`	Largeur maximale de la modale	`90vw`

Apparence

Variable	Description	Par défaut
`--esw-border-radius`	Rayon des coins pour les éléments	`4px`
`--esw-border-radius-popup`	Rayon des coins de la modale	`8px`
`--esw-shadow-popup`	Ombre de la boîte modale	`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>