채널톡 추가하기 - 고객 포털, 파트너센터 가이드

고객 응대는 비즈니스 성공에 중요한 역할을 합니다. 셀렉트어드민으로 만든 파트너센터나 고객 포털에 채널톡 같은 고객 응대 채팅 도구를 추가하면 고객과의 소통을 강화하고 사용자 경험을 크게 개선할 수 있습니다.

이 가이드는 YAML 스펙을 사용하여 셀렉트어드민의 layout head에 스크립트를 삽입하고, 익명 사용자, 비인증 사용자, 인증 사용자에 따라 채널톡을 설정하는 방법을 안내드립니다.

설치 완료된 모습

1. 준비사항

채널톡 계정: 채널톡 홈페이지에서 계정을 생성하세요.
스크립트 확인: 채널톡 설정 페이지에서 설치 script를 확인합니다.
셀렉트어드민 팀: 셀렉트어드민에서 관리 중인 팀이 준비되어 있어야 합니다.

2. YAML 구조 이해하기

셀렉트어드민에서는 레이아웃의 head에 스크립트를 삽입하여 외부 도구를 통합할 수 있습니다. 예제의 YAML 구조는 아래와 같습니다.

자세한 사용법은 여기서(https://docs.selectfromuser.com/reference#layout-head) 확인할 수 있어요.

layout:
  head:
    - tag: script
      innerHTML: |
        // 스크립트 내용

3. 채널톡 스크립트 추가하기

3.1 공통 스크립트 구조

아래와 같이 스크립트를 YAML의 innerHTML에 삽입합니다. pluginKey는 채널톡에서 복사한 값으로 대체하세요.

채널톡 설치하기: https://docs.channel.io/help/ko/articles/1bfa136b
개발 가이드: https://developers.channel.io/reference/web-quickstart-kr

layout:
  head:
    - tag: script
      innerHTML: |
        (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);}})();
        
        ChannelIO('boot', {
          "pluginKey": "******"
        });

3.2 익명 사용자 설정

익명 사용자의 경우 추가적인 사용자 정보 없이 기본 설정만 사용합니다. 위의 공통 스크립트를 그대로 사용하면 됩니다.

layout:
  head:
    - tag: script
      innerHTML: |
        (function(){/* 스크립트 내용 */})();

        ChannelIO('boot', {
          "pluginKey": "******"
        });

3.3 비인증 사용자 설정

비인증 사용자는 이름, 이메일 같은 기본 정보를 추가해 채널톡에서 사용자 프로필을 생성합니다.

layout:
  head:
    - tag: script
      innerHTML: |
        (function(){/* 스크립트 내용 */})();

        ChannelIO('boot', {
          "pluginKey": "******",
          "profile": {
            "name": "방문자 이름",
            "email": "email@example.com"
          }
        });

3.4 인증 사용자 설정

인증된 사용자는 ID와 같은 고유 정보를 활용해 고객 데이터를 연결할 수 있습니다.
참고: 고객 정보 암호화 기능을 활성화한 경우 memberHash를 추가해야 합니다.

자세한 사항은 채널톡 개발 문서에서 확인해주세요.

채널톡 설정 > 보안 및 개발 > 보안

layout:
  head:
    - tag: script
      innerHTML: |
        (function(){/* 스크립트 내용 */})();

        ChannelIO('boot', {
          "pluginKey": "******",
          "memberId": window.selectAdminSession.id,
          // "memberHash": window.selectAdminSession.channelTalkHash, // 고객 정보 암호화를 켠 경우 활성화
          "profile": {
            "name": window.selectAdminSession.name,
            "email": window.selectAdminSession.email
          }
        });

셀렉트어드민 정보는 window.selectAdminSession에서 확인할 수 있습니다.

인증 사용자 설정시 셀렉트어드민의 설정 > 환경변수에서 CHANNEL_TALK_SECRET_KEY 를 추가하고 채널톡의 Access Secret 값을 입력해야합니다.

셀렉트어드민 환경변수 설정

채널톡 Access Secret 조회

3.5 전체 YAML

아래 YAML을 복사하여 셀렉트어드민에 적용하고 필요한 방향으로 수정해보세요.

layout:
  head:
    - tag: script
      innerHTML: |
        (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);}})();

        ChannelIO('boot', {
          "pluginKey": "******",
          "memberId": window.selectAdminSession.id,
          "memberHash": window.selectAdminSession.channelTalkHash,
          "profile": {
            "name": window.selectAdminSession.name,
            "email": window.selectAdminSession.email
          }
        });

4. FAQ

4.1 `pluginKey`는 어디서 확인하나요?

채널톡의 일반 설정 > 버튼 설치 및 설정 메뉴에서 확인할 수 있습니다. (최신 정보는 채널톡 가이드에서 확인해주세요.)

4.2 고객 정보 암호화는 어떻게 활성화하나요?

채널톡의 설정 > 보안 및 개발 > 보안에서 고객 정보 암호화 옵션을 켜고, memberHash 를 스크립트에 포함하세요.

5. 마무리

위 가이드를 따라 YAML을 설정하면 셀렉트어드민 기반의 파트너센터나 고객 포털에 채널톡을 쉽게 통합할 수 있습니다.

이제 고객과 원활한 소통을 시작해보세요!

고객 채팅 문의시 채널톡 화면

참고

셀렉트어드민으로 고객 포털, 파트너센터를 구축할 수 있습니다. 관련 기능을 살펴보시고 셀렉트 팀에게 문의해주세요.