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

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

채널톡 추가하기 - 고객 포털, 파트너센터 가이드
Photo by Blake Wisz / Unsplash

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

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

설치 완료된 모습

1. 준비사항

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

2. YAML 구조 이해하기

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

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

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

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

3.1 공통 스크립트 구조

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

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을 설정하면 셀렉트어드민 기반의 파트너센터나 고객 포털에 채널톡을 쉽게 통합할 수 있습니다.

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

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

참고

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

Read more

셀렉트 클라우드의 새로운 데이터베이스 연결 방법 (Secure Tunnel)

안녕하세요 셀렉트팀 이진혁입니다. 셀렉트 어드민은 기존 데이터베이스를 연결하여 쉽게 조회, 수정등 페이지를 만들고 계정 초대로 팀원에게 쉽게 공유가능한 서비스입니다. 기존에는 이러한 어드민 개선과 데이터 업무를 위해 개발자, 개발팀 단위로 시간과 노력이 필요했지만 셀렉트 어드민은 SQL, API, DB, UI등 복잡한 단계를 통합하여 누구나 빠르게 데이터를 다루고, 협업이 가능한 환경을 추구해왔습니다. 셀렉트

By LEE JINHYUK

Self-hosted 로컬 CLI (커스텀인증구현)

셀렉트 어드민 CLI에서는 데이터베이스 접근과 모든 화면은 로컬/내부에서 처리하면서, 동시에 간편한 도입과 설치를 위해 로그인(인증, 사용자, 권한) 부분만 클라우드를 통해 제공하고 있습니다. 일부 금융권등 보안성 요건에 따라 로그인(인증)부터 모든 사용자 계정정보의 보관, 감사로그도 완벽히 내부망에서 이루어져야 합니다. 이를 위해 셀렉트 어드민은 완전구축형(on premise)을 지원하여

By LEE JINHYUK