영카트에 로그인/비로그인 분류 가능한 채널톡 추가하기

 

진행 중인 영카트로 쇼핑몰을 개발하는 과정에서 고객 채팅 시스템 솔루션을 고려하다가 전에 온라인 코딩 교육 사이트인 인프런에서 어떤 솔루션이 있던걸 기억해내고, 찾아보니 '채널 톡'이라는 솔루션을 사용하고 있다는 것을 확인하였습니다.

 

바로 가입해서 둘러보니 실시간 채팅으로는 굉장히 잘만들어져있는것같아서 바로 도입을 시도하여보았습니다.

 

단순하게 스크립트 한줄만 복사해서 tail.sub.php 파일에 추가해주고 테스트해보니 버튼이 정상적으로 출력되었습니다.

 

여기에 회원정보를 연동할수 있는 방법이 있는 것 같아 검색을 해보니 아래와 같은 자료가 검색되었는데 조금 지난 게시물이라 그런지 댓글을 보니 정상적으로 작동하지 않는 것으로 보였습니다. 이에 새로 코드를 작성하여 공유하고자 합니다.

 

채널톡 노출을 원하는 곳에 복사해주면 될 것 같습니다. 저의 경우에는 tail.sub.php에 복사하였는데 테스트 상으로는 별문제 없이 적용이 완료되었습니다.

 

해당 코드의 작동확인은 영카트 5.5.5 버전에서 테스트되었고, 채널톡 작동 시점은 2022-04-18일 기준입니다.

<!-- Channel Plugin Scripts -->
<script>
  (function() {
    var w = window;
    if (w.ChannelIO) {
      return (window.console.error || window.console.log || function(){})('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';
      s.charset = 'UTF-8';
      var 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);
    }
  })();
</script>

<!-- 채널톡 사용자 로그인 / 비로그인 구분 코드  -->
<?php if ($is_member) { ?>
  <script>
    if ('<?php echo $member['mb_id'] ?>') {
        ChannelIO('boot', {
        "pluginKey": "채널톡 플러그인 키",
        "memberId": "<?php echo $member['mb_id'] ?>",	// 멤버 고유키
        "profile": {
        "name": "<?php echo $member['mb_name'] ?>",	// 멤버 이름
        "mobileNumber": "<?php echo $member['mb_hp'] ?>",	// 멤버 휴대폰 번호
        "email": "<?php echo $member['mb_email'] ?>"	// 멤버 이메일
      }
    });
  }
  </script>
<?php } else { ?>
  <script>
    let tempHashNumber = new Uint32Array(1);
    window.crypto.getRandomValues(tempHashNumber);	// 비로그인 회원 구분을 위한 난수 생성
    ChannelIO('boot', {
        "pluginKey": "채널톡 플러그인 키",
        "memberId": `${tempHashNumber[0]}`,	// 비로그인 회원용 난수를 추가시 채널톡에서 임의 멤버명 생성
        "profile": {
        "name": '',	// 빈칸으로 둘시에 채널톡에서 회원에게 해당 정보를 요구
        "mobileNumber": "" // 빈칸으로 둘시에 채널톡에서 회원에게 해당 정보를 요구
      }
    });
  </script>
<?php } ?>

<!-- End Channel Plugin -->