웹 인박스 위젯

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

전제 조건

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

위젯 통합

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);