[22-08-05 TIL] 리액트에 채널톡 적용하기

사내 프로젝트에 채널톡을 커스텀화해서 적용했다.

1. 버튼 커스텀하기

채널톡 developer에 있는 내용을 복사해서 수정했다.
(링크가 없어져서 새 링크를 넣었다. 그런데 좀 달라진 것 같다.)

import App from "../App";

class ChannelService {
  
  constructor() {
    this.loadScript();
  }

  loadScript() {
    const w = window;
    if (w.ChannelIO) {
      return (window.console.error || window.console.log || function(){})('ChannelIO script included twice.');
    }
    const ch = function() {
      ch.c(arguments);
    };
    ch.q = [];
    ch.c = function(args) {
      ch.q.push(args);
    };
    w.ChannelIO = ch;
    function l() {
      if (w.ChannelIOInitialized) {
        return;
      }
      w.ChannelIOInitialized = true;
      const s = document.createElement('script');
      s.type = 'text/javascript';
      s.async = true;
      s.src = 'https://cdn.channel.io/plugin/ch-plugin-web.js';
      s.charset = 'UTF-8';
      const x = document.getElementsByTagName('script')[0];
      x.parentNode.insertBefore(s, x);
    }
    if (document.readyState === 'complete') {
      l();
    } else if (window.attachEvent) {
      window.attachEvent('onload', l);
    } else {
      window.addEventListener('DOMContentLoaded', l, false);
      window.addEventListener('load', l, false);
    }
  }

  boot(callback) {
    window.ChannelIO('boot', {
      "pluginKey": "YOUR_CHANNEL_TALK_PLUGIN_KEY",
      "customLauncherSelector": ".button", // 커스텀 버튼의 클래스명을 작성한다.
      "hideChannelButtonOnBoot": true, // 커스텀 버튼일때 작성한다.
      // memberId, profile: 유저가 익명이면 작성하지 않는다.
	  "memberId": 'yourMemberId',
      "profile": {
          "name": "yourName",
          "mobileNumber": "010-xxxx-xxxx",
          "email": "yourEmail@gmail.com",
       }   
    }, (error, user) => {
      callback(user.alert); // callback함수에 사용자의 alert 값을 전달한다.
    });
    return window.ChannelIO;
  }

  shutdown() {
    window.ChannelIO('shutdown');
  }
}


export default new ChannelService();

커스텀 버튼의 클래스 이름은 위 파일의 customLauncherSelector에 작성한 것과 동일하게 해줘야된다.

2. 배지 추가하기

여기서 배지는 버튼 우측상단에 표시되는 답장 알림 숫자이다.
onBadgeChanged 이벤트를 사용하면 메시지를 새로 받을 때 마다 이벤트가 발생해서 알림 숫자를 변경할 수 있다.

ChannelIO('onBadgeChanged', (unreadCount: number) => {
	// todo
});

문제는 답장이 와있는 상태에서 사이트에 들어왔을 때도
숫자를 표현해야되는데 저 이벤트를 사용할 수 없다는 것이다.

이를 찾기 위해 개발 문서를 여러번 보고 고민하다가 onBoot를 사용하면 알림 갯수를 얻을 수 있다는 것을 알았다.

ChannelService 클래스에 boot 함수를 보면
boot된 후 호출되는 콜백함수에 err, user가 있는데 user에는 alert 정보가 있다.
저것을 쓰면 된다. ヾ(≧▽≦*)o

참고

• ChannelIO