웹 팝업 콘텐츠 블록

Elements 탭에서 웹 팝업 콘텐츠 레이아웃에 추가할 수 있는 모든 블록에 대한 참조입니다.

각 블록 유형은 팝업에서 다른 목적을 수행합니다:

• 텍스트: 인라인 서식 및 텍스트 스타일이 있는 팝업의 문구
• 버튼: 링크를 열거나, 팝업을 닫거나, 웹 푸시를 요청하거나, 다른 페이지로 이동하는 콜투액션(CTA)
• 아이콘: 텍스트 옆의 작은 그림문자
• 카운트다운: 실시간 마감 타이머
• 주제 선택기: 관심사를 태그에 기록하는 체크박스 또는 칩
• 평점: 이벤트로 전송되는 NPS, 별점 또는 좋아요/싫어요 점수
• 구독 양식: 이메일 가입 및 기타 양식 필드

콘텐츠 블록 구성 방법

1. 오른쪽의 Elements 탭을 엽니다.

2. 타일을 팝업으로 드래그하거나 클릭하여 페이지에 추가합니다.
   • 클릭하면 캔버스에서 선택한 항목 아래에 블록이 삽입됩니다.
   • 아무것도 선택하지 않으면 블록은 페이지의 첫 번째 섹션 끝에 추가됩니다.
3. 팝업에서 블록을 선택하여 (Elements 옆의) Settings 탭을 엽니다. Elements에서 블록을 추가하면 Settings가 바로 열립니다.

팝업의 다른 섹션으로 이동하는 것을 포함해 블록을 팝업의 원하는 위치로 옮기려면 블록을 선택한 다음 왼쪽에 나타나는 핸들을 원하는 틈새로 드래그합니다.

Settings에서 다음을 수행할 수 있습니다:

• 해당 블록의 자체 옵션 구성
• POSITION(위아래 화살표)으로 섹션 내에서 위나 아래로 이동
• 삭제 아이콘으로 삭제

참고

팝업의 섹션에 아직 요소가 없으면, 그 자리에 자체적으로 + Text, + Button, + Form 컨트롤이 표시됩니다. 대신 아이콘, 카운트다운, 주제 선택기 또는 평점을 추가하려면:

1. + Text 또는 + Button 컨트롤을 사용하여 요소를 추가합니다.
2. 해당 요소를 선택합니다.
3. Elements 탭에서 블록을 추가합니다. 블록은 선택한 항목 아래의 동일한 섹션에 배치됩니다.

텍스트

팝업의 텍스트나 버튼 레이블을 클릭하여 인라인으로 편집합니다. 그 위에 툴바가 나타납니다:

• 굵게, 기울임꼴 또는 밑줄 서식을 적용합니다.
• 링크를 추가하거나 제거합니다.
• 왼쪽, 가운데 또는 오른쪽 정렬을 설정합니다.

텍스트 스타일을 변경하려면 텍스트를 선택하고 오른쪽의 Settings 탭을 엽니다. Icon(아이콘 블록이 아닌 텍스트 스타일), Eyebrow, Heading 1–3, Body 또는 Caption을 선택합니다.

버튼

버튼을 클릭하여 선택한 다음 오른쪽의 Settings 탭을 엽니다:

• Button style: Primary 또는 Secondary.
• Action:
  • Open a link: Link URL을 입력합니다. New tab은 기본적으로 켜져 있습니다. 링크를 동일한 탭에서 열려면 체크박스를 선택 해제합니다.
  • Close the popup.
  • Subscribe: 웹 푸시 권한을 요청하고 방문자를 구독시킵니다. 이것은 이메일 Subscription form 블록이 아닙니다. 요청이 허용되면 팝업이 닫힙니다. 거부되면 버튼이 비활성화됩니다. 브라우저는 두 번 프롬프트를 표시하지 않기 때문입니다.
  • Go to page: 전환할 팝업의 다른 페이지를 선택합니다. 이 옵션은 팝업에 두 개 이상의 페이지가 있을 때 나타납니다. 여러 페이지 작업하기를 참조하세요.

POSITION을 사용하여 버튼을 위아래로 이동하거나 삭제 아이콘을 사용하여 제거합니다.

아이콘

Icon 블록을 추가하여 텍스트 옆에 작은 그림문자(예: 세일용 퍼센트 기호, 경품용 선물)를 넣습니다. 이것은 텍스트 아래의 Icon 텍스트 스타일이 아닌 아이콘 블록입니다.

1. 오른쪽의 Elements 탭을 엽니다.
2. Icon을 클릭합니다.
3. Settings 탭에서 옵션을 설정합니다:

• Icon: 20개의 고정된 아이콘 세트(bell, gift, cart, chart, lock, calendar, check, star, clock, tag, mail, phone, download, play, shield, sparkle, percent, truck, ticket, user) 중에서 선택합니다. 사용자 지정 아이콘 업로드는 지원되지 않습니다.
• Size: 24, 32 또는 48 px.
• Accent: 기본적으로 켜져 있어 아이콘이 팝업의 강조 색상과 일치합니다. 사용자 지정 색상을 선택하려면 끕니다.

카운트다운

Countdown 블록을 추가하여 팝업에서 실시간으로 카운트다운되는 마감일로 긴급성을 조성합니다.

1. 오른쪽의 Elements 탭을 엽니다.
2. Countdown을 클릭합니다.
3. Settings 탭에서 옵션을 설정합니다:

• Deadline: 카운트다운이 0에 도달하는 날짜와 시간.
• Time zone: 방문자의 시간대가 아닌 마감일이 읽히는 시간대입니다. 기본값은 브라우저의 시간대입니다. 대신 마감일을 문자 그대로 읽으려면 목록에서 UTC를 선택합니다.
• Language: 단위 레이블(일, 시간 등)의 언어입니다. **English (default)**로 두거나 14개의 다른 언어 중에서 선택합니다.
• Labels: 숫자 옆에 단위 레이블을 표시하려면 켭니다.
• When the deadline passes:
  • Show zeros: 카운트다운이 계속 00:00:00을 표시합니다.
  • Do not show the popup: 마감일이 지나면 전체 팝업이 건너뛰어집니다. Pushwoosh는 팝업이 나타나기 직전에 마감일을 확인합니다. 이 방식으로 건너뛴 팝업은 Once per visitor 빈도에 포함되지 않습니다.
  • Go to page: 마감일이 지나면 팝업의 다른 페이지로 이동합니다. 팝업에 두 개 이상의 페이지가 있을 때만 제공됩니다. 나타나는 드롭다운에서 대상 페이지를 선택합니다. 여러 페이지 작업하기를 참조하세요.

주제 선택기

Topic picker 블록을 추가하여 방문자가 체크박스나 칩으로 관심사를 직접 선택하게 합니다. 선택 사항은 기기의 태그에 기록됩니다.

1. 오른쪽의 Elements 탭을 엽니다.
2. Topic picker를 클릭합니다. 블록이 두 개의 플레이스홀더 옵션과 함께 나타납니다. 설정은 Settings 탭에서 열립니다.

3. List tag the choice is written to에서 기존 List 유형 태그를 선택하거나, Create a list tag를 선택하여 편집기를 나가지 않고 태그를 만듭니다. 태그를 선택할 때까지 블록은 아무것도 기록하지 않습니다.
4. Control을 Checkboxes 또는 Chips로 설정합니다.
5. Minimum picks와 Maximum picks를 설정합니다. 양쪽 끝에 0은 해당 측면에 제한이 없음을 의미합니다(필드 레이블의 0 = any). 최소값이 0일 때도 제출하려면 항상 하나 이상의 선택이 필요합니다. 최대값을 초과하여 선택하거나 최소값 미만으로 제출하려고 하면 아무것도 보내는 대신 블록 옆에 인라인 메시지가 표시됩니다.
6. Options and copy 아래에서 각 옵션의 레이블(방문자가 읽는 내용)과 Tag value(태그에 기록되는 내용)를 편집합니다. Tag value를 비워두면 Pushwoosh는 옵션의 내부 ID(option-1, option-2 등)를 대신 기록합니다. + Option을 사용하여 다른 행을 추가하며, 총 12개 옵션까지 가능합니다.
7. Button label(기본값 Save)과 Message after sending(기본값 Thanks! Your choice is saved.)을 설정합니다.

선택은 추가만 가능하며, 제거는 불가능합니다

방문자의 선택은 태그에 추가됩니다. 블록을 다시 제출하면 더 많은 값이 추가됩니다. 이전 값을 지우지는 않습니다. 팝업에서는 방문자가 이전에 선택한 주제를 선택 해제할 수 없습니다. 이를 위해서는 동일한 태그를 사용하는 환경설정 페이지와 같은 다른 인터페이스가 필요합니다.

평점

Rating 블록을 추가하여 빠른 점수(NPS, 별점 또는 좋아요/싫어요)를 사용자 지정 이벤트로 수집합니다.

1. 오른쪽의 Elements 탭을 엽니다.
2. Rating을 클릭합니다. 블록이 이벤트가 설정되지 않은 상태로 나타납니다. 설정은 Settings 탭에서 열립니다.

3. Scale을 NPS 0–10, Stars(1~5) 또는 Thumbs(좋아요 또는 싫어요)로 설정합니다. 세 가지 모두에서 점수가 높을수록 긍정적인 평가를 의미합니다. Thumbs는 좋아요에 대해 1을, 싫어요에 대해 0을 보냅니다.
4. When the score is sent를 On tap(방문자가 값을 선택할 때 전송) 또는 With a button(제출 클릭을 기다림)으로 설정합니다.
5. Event the score is sent as에서 프로젝트의 이벤트를 선택하거나, Create an event를 선택하여 팝업을 나가지 않고 새 이벤트를 정의합니다. 점수는 해당 이벤트(score, scale, slotKey 속성)로 저장됩니다. 다른 이벤트와 마찬가지로 세그먼트나 Customer Journeys에서 사용합니다. 이벤트를 선택할 때까지 블록은 아무것도 보내지 않습니다.
6. 선택적으로 척도의 양쪽 끝에 Left label과 Right label을 채웁니다.
7. When the score is sent가 With a button인 경우, Button label(기본값 Send rating)을 설정합니다.

여기서 이벤트를 생성하면 영구적입니다

• 이 메뉴에서 생성하는 이벤트는 초안이 아닌 프로젝트의 실제 이벤트입니다. 나중에 삭제하려면 팝업을 변경하는 것이 아니라 프로젝트의 이벤트 목록으로 이동해야 합니다.
• 블록에 바인딩된 이벤트가 나중에 다른 곳에서 이름이 변경되거나 삭제되거나, 이 필드가 선택기가 되기 전에 입력된 경우, 선택기는 **Missing: <event name>**을 표시합니다. 이벤트를 자동으로 삭제하거나 교체하지 않습니다. 바인딩을 수정하려면 다른 이벤트를 선택하십시오.

구독 양식

Subscription form 블록을 추가하여 팝업에서 이메일 가입 및 기타 필드를 수집합니다. 이메일 및 양식 필드에 사용합니다. 웹 푸시 권한의 경우, 대신 Subscribe 액션이 있는 버튼을 사용합니다. 구독 양식에 대해 자세히 알아보기.

참고

팝업에는 하나의 Subscription form만 있을 수 있습니다. 어떤 페이지에 이미 양식이 있으면 Elements에서 해당 타일을 사용할 수 없습니다.

블록 추가

1. 오른쪽의 Elements 탭을 엽니다.
2. Subscription form을 클릭합니다.
3. 블록이 기본 Email 필드와 Subscribe 버튼과 함께 나타납니다. 설정은 Settings 탭에서 열립니다.

양식 소스 선택

블록이 선택된 상태에서 Settings 탭에는 블록을 프로젝트의 구독 양식에 연결하는 Subscription form 드롭다운이 표시됩니다. 새 양식을 만들거나 이미 존재하는 양식을 선택할 수 있습니다:

옵션	사용 시기
New form — created on save (기본값)	가장 빠른 시작: 팝업을 저장할 때 Pushwoosh가 “팝업 이름 — web popup”이라는 이름으로 양식을 생성합니다.
+ Create new form…	팝업을 저장하기 전에 양식의 이름을 지정하고 설정하고 싶을 때. New subscription form 대화 상자가 열립니다. Name을 입력하고 Fields, Submit 텍스트, Privacy를 설정한 다음 Create를 클릭합니다.
드롭다운에서 기존 양식 선택	이미 구독자나 이중 옵트인이 구성된 양식을 재사용합니다.

중요

드롭다운에서 기존 양식을 선택하면, 이 팝업을 저장할 때 전체 프로젝트에 대한 해당 구독 양식이 업데이트됩니다. 이 블록에서 설정한 필드, 제출 버튼 텍스트, 성공 메시지가 해당 양식이 이전에 가지고 있던 내용을 대체합니다. 여기에는 웹사이트에 포함된 양식과 Audience → Subscription forms의 양식이 포함됩니다.

동일한 양식을 사용하는 다른 웹 팝업은 업데이트되지 않습니다. 각 팝업은 해당 팝업을 다시 열고 저장할 때까지 블록의 필드와 텍스트의 자체 복사본을 유지합니다.

필드 및 제출 동작 설정

Settings 탭에서 계속 진행합니다:

1. Submit button style을 설정합니다:
   • Primary: 팝업 Accent 색상으로 채워진 버튼. Subscribe가 페이지의 주요 액션일 때 가장 좋습니다.
   • Secondary: 테두리와 강조 색상 레이블이 있는 윤곽선 버튼. 팝업에 이미 기본 버튼이 있거나 더 가벼운 모양을 원할 때 가장 좋습니다.
2. Privacy를 켜서 양식 아래에 개인정보 동의 줄을 추가한 다음, 나타나는 필드에 개인정보 처리방침 URL을 입력합니다.

3. Fields 아래에서 Email(항상 필요)을 유지하고 First name, Last name, Phone 또는 Custom을 추가합니다.
   • Custom 필드의 경우, Pick a tag… 드롭다운에서 값이 제출될 태그를 선택하거나, Create a tag를 선택하여 편집기를 나가지 않고 새 문자열 태그를 만듭니다.
   • 방문자가 제출한 후 표시되는 Success 및 Confirm email 텍스트를 설정합니다.