웹 인박스 위젯

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

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

전제 조건

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

위젯 통합

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

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

트리거

위젯을 렌더링하려면 위젯에 대한 트리거 요소를 지정해야 합니다. 페이지의 모든 DOM 요소가 트리거가 될 수 있습니다. ID를 “pwInbox”로 지정하거나 SDK를 초기화할 때 triggerId 매개변수에 사용자 정의 ID를 할당하세요. WebSDK가 초기화되면 읽지 않은 메시지 배지가 트리거 요소에 표시됩니다. 트리거 요소를 탭하면 위젯이 페이지에 나타납니다.

위치 지정

기본적으로 위젯은 트리거 요소에서 가장 가까운 화면 경계의 반대 방향에 위치합니다. 구성 매개변수를 통해 위젯의 위치를 설정할 수 있습니다:

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 또는 요소의 명확한 사양이 필요합니다.

위젯 사용자 정의

텍스트 사용자 정의

위젯 텍스트를 사용자 정의하려면 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!'    // 빈 인박스 위젯 텍스트
  }
}]);

결과는 다음과 같습니다:

외관 사용자 정의

위젯의 외관을 사용자 정의하려면 다음 매개변수를 사용하세요:

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 경로
  }
}]);

셀 레이아웃 사용자 정의

위젯은 제어판의 캠페인 미리보기에 표시되는 것과 동일한 네 가지 셀 레이아웃(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'      // 캐러셀 비활성 페이지 점
  }
}]);

API

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

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

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