Das Widget für das Anmeldeformular anpassen

Standardmäßig verwendet das Widget für das Anmeldeformular einen neutralen Stil, der auf den meisten Seiten funktioniert. Nachdem Sie den Einbettungscode hinzugefügt haben, können Sie es an die visuelle Identität Ihrer Website anpassen, indem Sie benutzerdefinierte CSS-Eigenschaften für das Element pushwoosh-subscribe-widget festlegen. Die Werte in den folgenden Tabellen ersetzen die Standardwerte.

Farben anpassen

Variable	Beschreibung	Standard
`--esw-primary-color`	Primärfarbe für Schaltflächen, Links und Akzente	`#0E72E5`
`--esw-primary-hover`	Hover-Farbe für primäre Elemente	`#1A85FF`
`--esw-text-color`	Haupttextfarbe	`#4B5057`
`--esw-text-secondary`	Sekundärtext (Platzhalter, Beschriftungen)	`#969CA3`
`--esw-background`	Widget-Hintergrund	`#FFFFFF`
`--esw-surface-color`	Oberflächenfarbe (Hover, sekundärer Hintergrund)	`#F7F9FA`
`--esw-border-color`	Rahmenfarbe	`#DCE1E5`
`--esw-border-color-focus`	Rahmenfarbe im Fokus-Zustand	`#0E72E5`
`--esw-error-color`	Fehlerfarbe	`#E52E59`
`--esw-success-color`	Erfolgsfarbe	`#479900`
`--esw-success-bg`	Hintergrund für Erfolgsmeldungen	`#F7F9FA`

Typografie

Variable	Beschreibung	Standard
`--esw-font-family`	Schriftfamilie	`Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif`
`--esw-font-size-base`	Basisschriftgröße	`14px`
`--esw-font-size-title`	Schriftgröße des Titels	`18px`
`--esw-font-size-label`	Schriftgröße der Feldbezeichnung	`12px`
`--esw-font-size-small`	Kleiner Text (Fehler, Hinweise)	`12px`
`--esw-font-weight-regular`	Normale Schriftstärke	`400`
`--esw-font-weight-medium`	Mittlere Schriftstärke	`500`
`--esw-font-weight-bold`	Fette Schriftstärke	`700`
`--esw-line-height-base`	Basiszeilenhöhe	`1.4`
`--esw-line-height-title`	Zeilenhöhe des Titels	`1.2`

Größen und Abstände

Variable	Beschreibung	Standard
`--esw-input-height`	Höhe des Eingabefeldes	`36px`
`--esw-button-height`	Höhe der Schaltfläche	`36px`
`--esw-spacing-xs`	Extra kleiner Abstand	`4px`
`--esw-spacing-sm`	Kleiner Abstand	`8px`
`--esw-spacing-md`	Mittlerer Abstand	`16px`
`--esw-spacing-lg`	Großer Abstand	`24px`
`--esw-popup-width`	Breite des Modals	`380px`
`--esw-popup-max-width`	Maximale Breite des Modals	`90vw`

Erscheinungsbild

Variable	Beschreibung	Standard
`--esw-border-radius`	Eckenradius für Elemente	`4px`
`--esw-border-radius-popup`	Eckenradius des Modals	`8px`
`--esw-shadow-popup`	Box-Schatten des Modals	`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>