React) 채널톡 자체제작 사이트에 연동하기

고객 센터 기능을 간단하게 구현하기 위해 채널톡 api를 선택했다.

따로 웹빌더에서도 연동 기능을 제공해주지만
나는 AWS를 이용하므로 JavaScript SDK를 이용하도록 하겠다.

웹 서비스가 React와 같은 SPA로 구성되었다면 해당 공식 문서를 참조하면 된다. 공식 설치 문서

1단계: Service 추가하기

ChannelService.js에 아래 소스코드를 그대로 복사

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

  loadScript() {
    (function(){var w=window;if(w.ChannelIO){return w.console.error("ChannelIO script included twice.");}var 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;var s=document.createElement("script");s.type="text/javascript";s.async=true;s.src="https://cdn.channel.io/plugin/ch-plugin-web.js";var x=document.getElementsByTagName("script")[0];if(x.parentNode){x.parentNode.insertBefore(s,x);}}if(document.readyState==="complete"){l();}else{w.addEventListener("DOMContentLoaded",l);w.addEventListener("load",l);}})();
  }

  boot(option, callback) {
    window.ChannelIO('boot', option, callback);
  }

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

  showMessenger() {
    window.ChannelIO('showMessenger');
  }
  
  hideMessenger() {
    window.ChannelIO('hideMessenger');
  }

  openChat(chatId, message) {
    window.ChannelIO('openChat', chatId, message);
  }

  track(eventName, eventProperty) {
    window.ChannelIO('track', eventName, eventProperty);
  }
  
  onShowMessenger(callback) {
    window.ChannelIO('onShowMessenger', callback);
  }
  
  onHideMessenger(callback) {
    window.ChannelIO('onHideMessenger', callback);
  }
  
  onBadgeChanged(callback) {
    window.ChannelIO('onBadgeChanged', callback);
  }

  onChatCreated(callback) {
    window.ChannelIO('onChatCreated', callback);
  }

  onFollowUpChanged(callback) {
    window.ChannelIO('onFollowUpChanged', callback);
  }

  onUrlClicked(callback) {
    window.ChannelIO('onUrlClicked', callback);
  }

  clearCallbacks() {
    window.ChannelIO('clearCallbacks');
  }
  
  updateUser(userInfo, callback) {
    window.ChannelIO('updateUser', userInfo, callback);
  }

  addTags(tags, callback) {
    window.ChannelIO('addTags', tags, callback);
  }

  removeTags(tags, callback) {
    window.ChannelIO('removeTags', tags, callback);
  }

  setPage(page) {
    window.ChannelIO('setPage', page);
  }

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

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

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

  setAppearance(appearance) {
    window.ChannelIO('setAppearance', appearance);
  }
}

export default new ChannelService();

2, 3단계: 설치하기, 부트하기

1단계에서 ChannelService.js에 추가한 Service를 통해 SDK를 설치할수 있다
"채널톡을 보여주고 싶은 페이지"에 설치 및 부트하면 된다.(난 Main.js에 나타낼 것이다)

import React from "react";
//ChannelService 참조
import ChannelService from "./ChannelService";

const Main = () => {
  //2. 설치하기
  ChannelService.loadScript();

  //3. 부트하기
  ChannelService.boot({
    pluginKey: "fill your plugin key",
    },
  });
  return (
    <>
      <div>메인화면입니다.</div>
    </>
  );
};

export default Main;

4단계: 끝

다음엔 고객정보를 채널톡에 연동하여 관리자가 고객을 특정할수 있도록 해보겠다.