웹 인박스 위젯

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

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

API

위젯을 열거나 닫으려면 다음 API 메서드를 사용합니다.

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