Customization (사용자화)

이 문서는 채널톡 React-Native SDK (이하 SDK)의 커스텀 옵션에 대해서 설명합니다.

채널 버튼

이 단락은 채널 버튼의 커스텀 옵션에 대해서 설명합니다.

채널 버튼 위치

channelButtonOption을 통해서 채널 버튼의 위치를 조절할 수 있습니다.

이 옵션을 수정 한 뒤, setting 의 속성값에 대입하여 적용합니다. 예시는 다음과 같습니다.

let settings = {
  "pluginKey": <YOUR_PLUGIN_KEY>,
  "channelButtonOption": {
    "xMargin": 16,
    "yMargin": 16,
    "position": <POSITION>,  // 'left', 'right'
  }
}

ChannelIO.boot(settings).then((result) => {
  //boot completed
})

커스텀 채널 버튼

채널 버튼 모양 수정을 원한다면, 본인만의 버튼을 만들어 사용해야 합니다.

1. 이전의 기본 채널 버튼은 보이지 않아야 하므로, ChannelIO.hideChannelButton함수를 호출합니다.
2. 버튼을 만들어 원하는 위치에 띄운 뒤, 해당 버튼의 터치 이벤트에 ChannelIO.showMessenger 이벤트를 연결합니다.

읽지 않은 메시지 숫자

채널 버튼을 커스텀한 경우, 유저의 읽지 않은 메시지 숫자가 노출되지 않습니다. 이 경우에는 onBadgeChanged 를 이용하여 읽지 않은 메시지 숫자를 보여줄 것을 권장합니다. 예시는 다음과 같습니다.

ChannelIO.onBadgeChanged((count) => {
  //do something with count
});

인앱 푸시 알림

이 단락은 인앱 푸시 알림 커스텀에 대해서 설명합니다.

SDK는 기본적으로 사용자의 앱으로 다음과 같은 인앱 푸시 알림(사진)을 보냅니다. 이는 유저가 앱을 사용중인 온라인 상태에서 유효합니다.

1. 인앱 푸시 알림 정보

인앱 푸시알림 정보를 받기 위해서는 onPopupDataRecevied 메소드를 구현합니다. 예시는 다음과 같습니다.

ChannelIO.onPopupDataReceived((popupData) => { });

onPopupDataRecevied 의 메소드 파라미터의 명세는 PopupData 를 참고합니다.

2. 커스텀 인앱 푸시 알림

인앱 푸시 화면을 수정하려면, 본인만의 인앱 푸시 알림 화면을 만들어 사용해야 합니다.

1. 이전의 기존 인앱 푸시 알림 뷰는 보이지 않아야 하므로, settings의 hidePopup 옵션을 true로 설정합니다.
2. 위 settings를 담아 새로 boot합니다.
3. 1번에서 구현한 onPopupDataRecevied 메소드를 이용하여 본인만의 인앱 푸시 알림 화면을 채웁니다.

이벤트 트래킹

유저의 특정 동작을 트래킹 하기 위해서 track 메소드를 사용합니다.
다음은, SDK를 사용하는 유저가 특정 뷰 컨트롤러에 접근했을때의 이벤트를 로깅하는 예제입니다.

ChannelIO.track(
  "CheckOut", 
  {
    "sampleID": 1234,
    "userName": "Jason" 
  }
);