콘텐츠로 건너뛰기
사용자 가이드 사용 방법 가이드 지원 데모 요청 로그인
Pushwoosh.com

웹 인박스 위젯

웹 메시지 인박스를 웹사이트에 통합하면 전환율이 크게 증가합니다. 바로 사용할 수 있는 웹 인박스 위젯은 사용자와 소통하는 데 필요한 모든 메서드에 기본적으로 구독되어 있습니다. 웹사이트에 위젯을 통합하고 브랜드에 맞게 외관을 사용자 정의하기만 하면 됩니다.

inboxWidget.enable: true를 설정하면 방문자가 푸시 알림 권한을 부여하지 않은 경우에도 방문자의 기기가 인박스 전송을 위해 등록되므로, 푸시에 구독하지 않은 방문자에게도 도달할 수 있습니다.

전제 조건

Anchor link to

웹사이트용 메시지 인박스를 통합하려면 가이드를 따르세요.

위젯 통합

Anchor link to

Pushwoosh WebSDK를 초기화할 때 inboxWidget 매개변수를 추가하세요:

예시
Pushwoosh.push(['init', {
  ...,
  inboxWidget: {
    enable: true,
    triggerId: 'pwInbox'
  }
}]);

트리거

Anchor link to

위젯을 렌더링하려면 위젯에 대한 트리거 요소를 지정해야 합니다. 페이지의 모든 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 to

패널 관리 애플리케이션에서 Settings → Configure platforms → Web으로 이동하여 Inbox widget 카드를 찾습니다.

Web 플랫폼 설정 페이지의 Inbox widget 카드. ON 배지와 Configure 버튼이 표시되어 있습니다

카드에서 Configure를 클릭합니다. 양식에는 Show the inbox on the site 스위치, 아래 필드들, 그리고 With messages와 No messages 사이를 전환하는 실시간 미리보기가 있습니다.

Show the inbox on the site 스위치가 켜져 있고 Placement, Texts, Appearance 필드와 두 개의 샘플 메시지 미리보기가 표시된 Inbox widget 양식

양식의 각 필드는 init 스니펫에서 설정하는 것과 동일한 inboxWidget 키 하나를 설정합니다:

섹션필드inboxWidget 키
PlacementID of the element that opens the inboxtriggerId
PlacementOpensposition
PlacementInsert into (CSS selector)appendTo
TextsWidget titletitle
TextsTitle when there are no messagesemptyInboxTitle
TextsText when there are no messagesemptyInboxText
TextsImage when there are no messages (URL)emptyInboxIconUrl
AppearanceWidth, px (200–1200)widgetWidth
AppearanceCorner radius, px (0–64)borderRadius
AppearanceFontfontFamily
AppearanceBackground, Text, BorderbgColor, textColor, borderColor
AppearanceCounter background, Counter text, Unread markbadgeBgColor, badgeTextColor, unreadDotColor

양식은 범위를 벗어나거나 정수가 아닌 Width, px 또는 Corner radius, px 값을 저장하지 않고, 대신 필드 아래에 오류를 표시합니다.

카드에 저장된 값은 init 스니펫의 동일한 inboxWidget 키를 키별로 재정의합니다. 비워 둔 필드는 저장되지 않으므로 스니펫의 값 또는 SDK 기본값이 계속 적용됩니다. triggerId와 appendTo를 가리키는 마크업 옆의 스니펫에 유지하려면 ID of the element that opens the inbox와 **Insert into (CSS selector)**를 비워 두세요. 셀 레이아웃 매개변수나 legacyClassicCell처럼 카드에 없는 키는 항상 스니펫에서 읽습니다.

패널에서 스위치를 저장하기 전까지 카드의 배지에는 Set in the snippet이 표시되며, 위젯 표시 여부는 스니펫의 enable이 결정합니다. 저장하면 배지에 On 또는 Off가 표시되고 스니펫보다 우선합니다. 스니펫에서 enable: true로 설정해도 Off는 위젯을 숨기고, 스니펫에 inboxWidget이 전혀 없어도 On은 위젯을 표시하며, 푸시 권한이 없는 방문자도 같은 방식으로 인박스 전송 대상으로 등록합니다.

API

Anchor link to

위젯을 열거나 닫으려면 다음 API 메서드를 사용하세요:

예시
Pushwoosh.pwinboxWidget.toggle(open?: boolean);

위젯을 열면 서버에서 새로고침되며, 최대 30초에 한 번씩 수행됩니다. 독립형 앱 인박스 메시지는 푸시가 없는 채널을 사용하므로 페이지 로드 사이에 다른 어떤 것도 메시지 도착을 알리지 않습니다.