구독 양식 위젯 맞춤 설정하기

기본적으로 구독 양식 위젯은 대부분의 페이지에서 잘 어울리는 중립적인 스타일을 사용합니다. 임베드 코드를 추가한 후, pushwoosh-subscribe-widget 요소에 CSS 사용자 지정 속성을 설정하여 사이트의 시각적 아이덴티티에 맞게 조정할 수 있습니다. 아래 표의 값들은 기본값을 대체합니다.

색상 맞춤 설정하기

변수	설명	기본값
`--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>