채널톡 연동 방법: 상담 버튼 설치부터 회원·이벤트 연결까지

안녕하세요. 사랑받는 IT 프로덕트의 첫걸음, 똑똑한개발자입니다.

채널톡은 웹사이트와 앱에 상담 창을 연결하고 고객 정보·상담 이력·메시지를 관리하는 고객 상담 솔루션입니다. 설치 방법은 직접 개발한 사이트인지, 웹빌더인지, 모바일 앱인지에 따라 달라집니다. 오늘은 설치와 회원 정보 연결, 이벤트 활용 방법을 알아보겠습니다.

채널톡 연동 전에 알아둘 것, 채널톡은 어떤 도구인가

채널톡은 채널코퍼레이션이 운영하는 고객 상담 솔루션으로, 상담 버튼 뒤에 고객 정보와 마케팅 메시지, AI 상담이 묶여 있습니다.

그래서 채널톡 SDK 설치는 채팅창 하나로 끝나지 않습니다. 회원 정보와 고객이 본 페이지가 함께 들어와야 상담사가 같은 질문을 되풀이하지 않습니다.

채널톡 설치 방법 3가지, 사이트 구조로 고릅니다

자체 제작 사이트는 스크립트 한 덩어리면 됩니다.

설치 스크립트와 플러그인 키는 [채널 설정] → [일반 설정] → [버튼 설치 및 설정] → [채널톡 버튼 설치]에 있습니다. 스크립트를 body 안에 넣고 boot를 호출하면 상담 버튼이 뜹니다.

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

웹빌더로 만든 사이트는 공식 연동부터 확인합니다.

채널톡 도움말에 공식 연동으로 오른 빌더는 카페24, 아임웹, 식스샵, 고도몰, 메이크샵, 워드프레스 등입니다. 목록에 없는 빌더라면 스크립트를 직접 넣습니다.

앱은 SDK를 따로 설치합니다.

모바일 SDK는 유료 플랜 전용입니다. 하이브리드 앱이면 웹뷰 가이드를, 네이티브 앱이면 플랫폼별 SDK 가이드를 따릅니다.

로그인 회원 연동은 memberId와 memberHash로 합니다

memberId를 넘기면 회원으로 인식합니다.

boot에 memberId가 있으면 회원으로, 없으면 익명 사용자로 분류됩니다. 이름과 연락처는 profile에 담습니다.

memberHash는 반드시 서버에서 계산합니다.

채널톡 개발자 문서는 회원 ID나 이메일처럼 추측 가능한 memberId에 보안 위험이 있다고 경고합니다. [채널 설정] → [보안 및 개발] → [보안]에서 비밀 키를 확인한 다음 memberId를 HMAC-SHA256으로 해시해 memberHash로 보냅니다. 비밀 키는 서버에만 둡니다.

ChannelIO('boot', {
  "pluginKey": "YOUR_PLUGIN_KEY",
  "memberId": "USER_MEMBER_ID",
  "memberHash": "SERVER_GENERATED_HASH"
});

이 기능을 켠 뒤 해시가 틀리면 boot는 인증 오류로 실패합니다.

이벤트 트래킹과 마케팅 메시지는 상담 버튼이 먼저 말을 걸게 합니다

기본 이벤트는 설치만 해도 쌓입니다.

페이지 조회(PageView), 새 상담 열기(UserChatOpen) 같은 이벤트는 개발 없이 기록됩니다. 장바구니 클릭 같은 행동은 track으로 보내고 웹빌더 사이트는 GTM의 channel.io 템플릿을 씁니다.

SPA라면 setPage를 따로 호출합니다.

SPA는 주소가 바뀌어도 SDK가 알아채지 못해 setPage와 track을 호출해야 합니다. 쌓인 이벤트를 조건으로 걸면 마케팅 메시지가 먼저 나갑니다.

상담 이벤트를 GA4에 기록하는 방법

상담 시작을 별도 분석 도구에 기록하려면 SDK가 제공하는 콜백과 분석 도구의 이벤트 전송 기능을 연결할 수 있습니다. 상담 시작을 전환으로 보려면 SDK 콜백 onChatCreated에서 GA4 이벤트를 직접 보내면 됩니다.

채널톡 운영 시간과 AI 상담·요금제

운영 시간을 정해야 고객이 기다릴 시간을 압니다.

[채널 설정] → [상담] → [운영]에서 운영 시간과 휴일을 정합니다. 비운영 시간에는 워크플로우로 자동 안내를 보내거나 새 채팅을 막을 수 있습니다.

AI 상담은 ALF라는 이름으로 제공됩니다.

ALF는 등록한 지식과 규칙으로 답하는데, 태스크를 설정하면 주문 취소나 예약 변경까지 처리합니다.

요금은 무료 플랜부터 시작할 수 있습니다.

무료·유료 플랜의 지원 기능과 고객 수, 상담 인원, AI 사용량에 따라 비용이 달라집니다. 앱 SDK·마케팅·AI 상담을 사용할 경우 각각 현재 요금제의 제공 범위를 확인합니다.

세부 항목과 최신 적용 조건은 채널톡 SDK 시작 가이드를 참고해 보세요.

궁금한 순간, 상담으로 자연스럽게 이어지도록

서비스에 필요한 연동 기능을 하나씩 붙이다 보면 화면뿐 아니라 데이터와 운영 방식도 함께 살펴보게 됩니다. 지금 서비스에 필요한 범위부터 차근차근 정리해볼 수 있습니다.

똑똑한개발자는 UX/UI 디자인과 웹·앱 개발을 함께 진행합니다. 사용자가 이용하는 화면과 운영에 필요한 기능을 연결해 서비스를 만들어가는 과정을 돕습니다.

서비스에 필요한 연동 기능을 준비하면서 궁금한 점이 있다면 아래 똑똑한개발자 링크로 편하게 이야기 남겨주세요. 함께 살펴보겠습니다. 감사합니다. :)