تخصيص ويدجت نموذج الاشتراك

بشكل افتراضي، يستخدم ويدجت نموذج الاشتراك نمطًا محايدًا يعمل على معظم الصفحات. بعد إضافة كود التضمين، يمكنك مطابقته مع الهوية البصرية لموقعك عن طريق تعيين خصائص CSS المخصصة على عنصر pushwoosh-subscribe-widget. القيم الموجودة في الجداول أدناه تحل محل القيم الافتراضية.

تخصيص الألوان

المتغير	الوصف	القيمة الافتراضية
`--esw-primary-color`	اللون الأساسي للأزرار والروابط واللمسات المميزة	`#0E72E5`
`--esw-primary-hover`	لون العناصر الأساسية عند التمرير	`#1A85FF`
`--esw-text-color`	لون النص الرئيسي	`#4B5057`
`--esw-text-secondary`	النص الثانوي (العناصر النائبة، التسميات التوضيحية)	`#969CA3`
`--esw-background`	خلفية الويدجت	`#FFFFFF`
`--esw-surface-color`	لون السطح (عند التمرير، الخلفية الثانوية)	`#F7F9FA`
`--esw-border-color`	لون الحدود	`#DCE1E5`
`--esw-border-color-focus`	لون الحدود في حالة التركيز	`#0E72E5`
`--esw-error-color`	لون الخطأ	`#E52E59`
`--esw-success-color`	لون النجاح	`#479900`
`--esw-success-bg`	خلفية رسالة النجاح	`#F7F9FA`

الطباعة

المتغير	الوصف	القيمة الافتراضية
`--esw-font-family`	عائلة الخط	`Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif`
`--esw-font-size-base`	حجم الخط الأساسي	`14px`
`--esw-font-size-title`	حجم خط العنوان	`18px`
`--esw-font-size-label`	حجم خط تسمية الحقل	`12px`
`--esw-font-size-small`	النص الصغير (الأخطاء، الملاحظات)	`12px`
`--esw-font-weight-regular`	الوزن العادي	`400`
`--esw-font-weight-medium`	الوزن المتوسط	`500`
`--esw-font-weight-bold`	الوزن الغامق	`700`
`--esw-line-height-base`	ارتفاع السطر الأساسي	`1.4`
`--esw-line-height-title`	ارتفاع سطر العنوان	`1.2`

الأحجام والمسافات

المتغير	الوصف	القيمة الافتراضية
`--esw-input-height`	ارتفاع حقل الإدخال	`36px`
`--esw-button-height`	ارتفاع الزر	`36px`
`--esw-spacing-xs`	مسافة صغيرة جدًا	`4px`
`--esw-spacing-sm`	مسافة صغيرة	`8px`
`--esw-spacing-md`	مسافة متوسطة	`16px`
`--esw-spacing-lg`	مسافة كبيرة	`24px`
`--esw-popup-width`	عرض النافذة المنبثقة	`380px`
`--esw-popup-max-width`	أقصى عرض للنافذة المنبثقة	`90vw`

المظهر

المتغير	الوصف	القيمة الافتراضية
`--esw-border-radius`	نصف قطر الزاوية للعناصر	`4px`
`--esw-border-radius-popup`	نصف قطر زاوية النافذة المنبثقة	`8px`
`--esw-shadow-popup`	ظل صندوق النافذة المنبثقة	`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>