웹 인박스 위젯
웹 메시지 인박스를 웹사이트에 통합하면 전환율이 크게 증가합니다. 바로 사용할 수 있는 웹 인박스 위젯은 사용자와 소통하는 데 필요한 모든 메서드에 기본적으로 구독되어 있습니다. 웹사이트에 위젯을 통합하고 브랜드에 맞게 외관을 사용자 정의하기만 하면 됩니다.
inboxWidget.enable: true를 설정하면 방문자가 푸시 알림 권한을 부여하지 않은 경우에도 방문자의 기기가 인박스 전송을 위해 등록되므로, 푸시에 구독하지 않은 방문자에게도 도달할 수 있습니다.
전제 조건
Anchor link to웹사이트용 메시지 인박스를 통합하려면 가이드를 따르세요.
위젯 통합
Anchor link toPushwoosh WebSDK를 초기화할 때 inboxWidget 매개변수를 추가하세요:
Pushwoosh.push(['init', { ..., inboxWidget: { enable: true, triggerId: 'pwInbox' }}]);위젯을 렌더링하려면 위젯에 대한 트리거 요소를 지정해야 합니다. 페이지의 모든 DOM 요소가 트리거가 될 수 있습니다. ID를 “pwInbox”로 지정하거나 SDK를 초기화할 때 triggerId 매개변수에 사용자 정의 ID를 할당하세요.
WebSDK가 초기화되면 읽지 않은 메시지 배지가 트리거 요소에 표시됩니다. 트리거 요소를 탭하면 위젯이 페이지에 나타납니다.
위치 지정
Anchor link to기본적으로 위젯은 트리거 요소에서 가장 가까운 화면 경계의 반대 방향에 위치합니다. 구성 매개변수를 통해 위젯의 위치를 설정할 수 있습니다:
Pushwoosh.push(['init', {
..., inboxWidget: { enable: true, triggerId: 'pwInbox', position: 'top' }}]);기본적으로 inboxWidget는 닫는 </body> 태그 앞에 위치해야 합니다.
아래 예시와 같이 페이지의 어느 곳에나 위젯을 렌더링하세요:
Pushwoosh.push(['init', { ..., inboxWidget: {
enable: true, triggerId: 'pwInbox', appendTo: '.widget-parent-element-class' }}]);부모 요소 검색은 querySelector로 수행되므로 클래스, id 또는 요소의 명확한 사양이 필요합니다.
위젯 사용자 정의
Anchor link to텍스트 사용자 정의
Anchor link to위젯 텍스트를 사용자 정의하려면 emptyInboxTitle 및 emptyInboxText 매개변수를 추가하세요:
Pushwoosh.push(['init', { ..., inboxWidget: { enable: true, triggerId: 'pwInbox', title: 'Inbox', // 위젯 제목 emptyInboxTitle: 'You\'re all caught up', // 빈 인박스 위젯 제목 emptyInboxText: 'There are no new messages. Stay tuned!' // 빈 인박스 위젯 텍스트 }}]);결과는 다음과 같습니다:
외관 사용자 정의
Anchor link to위젯의 외관을 사용자 정의하려면 다음 매개변수를 사용하세요:
Pushwoosh.push(['init', { ..., inboxWidget: { enable: true, triggerId: 'pwInbox', bgColor: '#ffffff', // 위젯 배경 borderColor: 'transparent', // 위젯 테두리 색상 borderRadius: 4, // 위젯 테두리 반경 (px) widgetWidth: 350, // 위젯 너비 (px) zIndex: 100 // z-index }}]);읽지 않은 메시지 수 배지는 다음과 같이 사용자 정의할 수 있습니다:
Pushwoosh.push(['init', { ..., inboxWidget: { enable: true, triggerId: 'pwInbox', badgeBgColor: '#ff4c00', // 배지 색상 badgeTextColor: '#ffffff' // 배지 텍스트 색상 }}]);텍스트 속성을 사용자 정의하려면 다음 코드를 추가하세요:
Pushwoosh.push(['init', { ..., inboxWidget: { enable: true, triggerId: 'pwInbox', textColor: '#333333', // 텍스트 색상 fontFamily: 'Helvetica, Arial, sans-serif', // 글꼴 messageTitleColor: '#7a7a7a', // 메시지 제목 색상 timeTextColor: '#c4c4c4', // 타임스탬프 텍스트 색상 emptyInboxTitleColor: '#333333', // 빈 인박스 제목 색상 emptyInboxTextColor: '#7a7a7a' // 빈 인박스 텍스트 색상 }}]);마지막으로 빈 인박스 아이콘을 지정할 수 있습니다:
Pushwoosh.push(['init', { ..., inboxWidget: { enable: true, triggerId: 'pwInbox', emptyInboxIconUrl: 'https://pushon.pushwoosh.com/images/icon-empty-inbox.png' // 아이콘의 URL 경로 }}]);셀 레이아웃 사용자 정의
Anchor link to위젯은 제어판의 캠페인 미리보기에 표시되는 것과 동일한 네 가지 셀 레이아웃(classic, banner, captioned 또는 carousel) 중 하나로 메시지를 그립니다. 메시지가 담고 있는 내용으로 렌더링할 수 없는 레이아웃은 classic으로 다운그레이드됩니다. banner는 히어로 이미지가 필요하고, captioned는 히어로 이미지와 제목 및 본문이 모두 필요하며, carousel은 최소 하나의 슬라이드와 제목 및 본문이 모두 필요합니다.
레이아웃의 외관을 사용자 정의하려면 다음 매개변수를 사용하세요:
Pushwoosh.push(['init', { ..., inboxWidget: { enable: true, triggerId: 'pwInbox', unreadDotColor: '#ff4c00', // 클래식 아바타의 읽지 않은 점 avatarBgColor: '#e6e6e6', // 클래식 아바타 배경 avatarTextColor: '#333333', // 클래식 아바타 이니셜 색상 avatarSize: 52, // 클래식 아바타 크기 (px) mediaRadius: 8, // 배너/캡션/캐러셀 미디어의 모서리 반경 (px) slideCaptionColor: '#ffffff', // 캐러셀 슬라이드 캡션 텍스트 색상 slideScrimColor: '#000000', // 캐러셀 슬라이드 캡션 배경 스크림 pagerDotActiveColor: '#ff4c00', // 캐러셀 활성 페이지 점 pagerDotColor: '#c4c4c4' // 캐러셀 비활성 페이지 점 }}]);Control Panel에서 관리하기
Anchor link toControl Panel에서 위젯을 설정하려면:
-
Settings → Configure platforms → Web으로 이동합니다.
-
Inbox widget 카드에서 Configure를 클릭합니다.
-
Show the inbox on the site를 켭니다.
-
패널에서 관리할 필드를 입력하고 나머지는 비워 둡니다. 비워 둔 필드는 저장되지 않으므로 스니펫의 값 또는 SDK 기본값이 계속 적용됩니다.
triggerId와appendTo를 가리키는 마크업 옆의 스니펫에 유지하려면 ID of the element that opens the inbox 필드와 Insert into (CSS selector) 필드를 비워 두세요. -
미리보기에서 결과를 확인합니다. With messages와 No messages 사이를 전환하여 두 상태를 모두 확인하세요.
-
양식을 저장합니다. Width, px에는 200에서 1200 사이의 정수를, Corner radius, px에는 0에서 64 사이의 정수를 입력할 수 있습니다. 그 외의 값은 필드 아래에 오류가 표시되며 저장되지 않습니다.
카드와 스니펫의 동작 방식
Anchor link to카드에 저장된 값은 init 스니펫의 동일한 inboxWidget 키를 키별로 재정의합니다. 각 필드는 하나의 키를 설정합니다:
| 섹션 | 필드 | inboxWidget 키 |
|---|---|---|
| Placement | ID of the element that opens the inbox | triggerId |
| Placement | Opens | position |
| Placement | Insert into (CSS selector) | appendTo |
| Texts | Widget title | title |
| Texts | Title when there are no messages | emptyInboxTitle |
| Texts | Text when there are no messages | emptyInboxText |
| Texts | Image when there are no messages (URL) | emptyInboxIconUrl |
| Appearance | Width, px (200–1200) | widgetWidth |
| Appearance | Corner radius, px (0–64) | borderRadius |
| Appearance | Font | fontFamily |
| Appearance | Background, Text, Border | bgColor, textColor, borderColor |
| Appearance | Counter background, Counter text, Unread mark | badgeBgColor, badgeTextColor, unreadDotColor |
셀 레이아웃 매개변수나 legacyClassicCell처럼 카드에 없는 키는 항상 스니펫에서 읽습니다.
Show the inbox on the site 스위치도 같은 방식으로 작동합니다. 패널에서 저장하기 전까지 카드의 배지에는 Set in the snippet이 표시되며, 위젯 표시 여부는 스니펫의 enable이 결정합니다. 스위치를 저장하면 배지에 On 또는 Off가 표시되고 카드가 스니펫보다 우선합니다:
- Off는 스니펫에서
enable: true로 설정해도 위젯을 숨깁니다. - On은 스니펫에
inboxWidget이 전혀 없어도 위젯을 표시합니다.enable: true와 마찬가지로 푸시 권한이 없는 방문자도 인박스 전송 대상으로 등록합니다.
저장된 변경 사항은 1분 이내에 다음 페이지 로드 시 사이트에 반영됩니다.
위젯 관리를 스니펫으로 되돌리려면 카드에서 Return to snippet을 클릭하고 확인합니다. 이 버튼은 카드에 무언가가 저장되면 나타납니다. 이 작업은 패널에 저장된 모든 인박스 설정을 삭제하며, 사이트는 다시 스니펫의 inboxWidget 설정을 사용합니다.
위젯을 열거나 닫으려면 다음 API 메서드를 사용하세요:
Pushwoosh.pwinboxWidget.toggle(open?: boolean);위젯을 열면 서버에서 새로고침되며, 최대 30초에 한 번씩 수행됩니다. 독립형 앱 인박스 메시지는 푸시가 없는 채널을 사용하므로 페이지 로드 사이에 다른 어떤 것도 메시지 도착을 알리지 않습니다.