채널톡 추가하기 - 고객 포털, 파트너센터 가이드
고객 응대는 비즈니스 성공에 중요한 역할을 합니다. 셀렉트어드민으로 만든 파트너센터나 고객 포털에 채널톡 같은 고객 응대 채팅 도구를 추가하면 고객과의 소통을 강화하고 사용자 경험을 크게 개선할 수 있습니다.
고객 응대는 비즈니스 성공에 중요한 역할을 합니다. 셀렉트어드민으로 만든 파트너센터나 고객 포털에 채널톡 같은 고객 응대 채팅 도구를 추가하면 고객과의 소통을 강화하고 사용자 경험을 크게 개선할 수 있습니다.
이 가이드는 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 값을 입력해야합니다.
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을 설정하면 셀렉트어드민 기반의 파트너센터나 고객 포털에 채널톡을 쉽게 통합할 수 있습니다.
이제 고객과 원활한 소통을 시작해보세요!
참고
셀렉트어드민으로 고객 포털, 파트너센터를 구축할 수 있습니다. 관련 기능을 살펴보시고 셀렉트 팀에게 문의해주세요.
