카카오톡 채널 커스텀 채팅 버튼 추가하기 (코드, 고급)

내 사이트에 카카오톡 채널 1:1 채팅 버튼(구.플러스친구)을 추가할 수 있습니다. 이 도움말에서는 사용자가 직접 디자인한 버튼 이미지를 사용해 카카오톡 채널 채팅 버튼을 추가하는 방법을 설명합니다.

참고: 카카오에서 공식 제공하는 채팅 버튼 이미지를 사용하려는 경우, 카카오톡 채널 1:1 채팅 버튼 추가하기 도움말을 확인해 주세요.

교육자료 다운로드

샘플 카카오톡 채널 버튼 이미지를 내려받을 수 있습니다. 내려받은 파일은 압축을 풀어 이용해 주세요.

1단계: 카카오 API키 발급 및 적용하기

카카오톡 채널 채팅 버튼을 사용하려면, 카카오 API키가 필요합니다. 아래 도움말 링크를 참고해 카카오 API키를 발급받고 사이트에 적용해 주세요.

카카오 API키 발급 및 적용방법

참고: 기존 사용 중인 카카오 API키가 있는 경우, 이 과정은 건너 뛰어도 됩니다.

2단계: 카카오톡 채널 홈 ID 알아내기

사용 중인 카카오톡 채널의 홈 ID를 확인하고 메모합니다.

  1. 카카오톡채널 관리자센터에 접속합니다.
  2. 내 채널을 선택합니다. (채널이 없는 경우 새로운 채널을 생성해 주세요.)
  3. 왼쪽의 [관리 > 상세설정] 메뉴를 클릭합니다.
  4. 채널 홈ID를 확인하고 메모장에 메모해 둡니다. (메모해 둔 홈ID는 아래 6단계에서 사용됩니다.)

3단계: 카카오톡 채널 코드 복사하기

아래의 카카오톡 채널 커스텀 채팅 버튼 코드 전체를 복사합니다.

<style>
/* PC 카카오톡 채널 버튼 위치 */
.kakaoChatPc {
    position: fixed;
    z-index: 999;
    right: 20px; /* 화면 오른쪽으로부터의 거리, 숫자만 입력 */
    bottom: 20px; /* 화면 아래쪽으로부터의 거리, 숫자만 입력 */
}
/* 모바일 카카오톡 채널 버튼 위치 */
.kakaoChatMob {
    position: fixed;
    z-index: 999;
    right: 20px; /* 화면 오른쪽으로부터의 거리, 숫자만 입력 */
    bottom: 20px; /* 화면 아래쪽으로부터의 거리, 숫자만 입력 */
}
</style>

<!-- PC 카카오톡 상담 버튼 -->
<a href="javascript:void kakaoChatStart()" class="kakaoChatPc hidden-md hidden-sm hidden-xs">
    <img src="이미지주소" width="72px" height="72px">
</a>

<!-- 모바일 카카오톡 상담 버튼 -->
<a href="javascript:void kakaoChatStart()" class="kakaoChatMob hidden-lg">
    <img src="이미지주소" width="64px" height="64px">
</a>

<!-- 카카오톡 채널 스크립트 -->
<script src="//developers.kakao.com/sdk/js/kakao.min.js"></script>
<script type='text/javascript'>
    Kakao.init('JavaScript키'); // 사용할 앱의 JavaScript키를 입력해 주세요.
    function kakaoChatStart() {
        Kakao.Channel.chat({
            channelPublicId: '홈ID' // 카카오톡 채널 홈 URL에 명시된 ID를 입력합니다.
        });
    }
</script>

4단계: SEO 헤더설정 이동 및 코드 붙여넣기

  1. 새 브라우저 탭을 열고,  관리자 페이지에 접속합니다. 
  2. 왼쪽 메뉴에서 [환경설정 > SEO 헤더설정]을 클릭합니다.
  3. 페이지 하단의 Footer Code 입력 칸에 위 3단계에서 복사한 코드를 붙여넣습니다.

5단계: Javascript 키 입력하기

  1. 붙여넣은 코드의 JavaScript키를 삭제합니다.
  2. 위 1단계에서 발급받은 JavaScript키를 붙여넣습니다.

6단계: 카카오톡 채널 홈 ID 입력하기

  1. 코드에서 홈ID를 삭제합니다.
  2. 위 2단계에서 메모해 둔 홈ID를 붙여넣습니다.

7단계: 카카오톡 채널 커스텀 상담 버튼 이미지 추가하기

  1. 코드에서 이미지주소를 삭제합니다.
  2. 카카오톡 채널 채팅 버튼으로 사용할 이미지의 주소(http 또는 https로 시작하는)를 입력합니다. (PC용과 모바일용 버튼 이미지를 함께 쓰거나, 따로따로 사용할 수도 있습니다.)
    참고: 채팅 버튼으로 사용할 이미지의 주소를 획득하는 방법은 빠른 이미지 주소 획득 방법 도움말을 참고해 주세요.

  3. (선택 사항) width 와 height 속성의 숫자를 변경해, 버튼 이미지의 크기를 수정할 수 있습니다. (숫자만 변경하세요.)

8단계: 카카오톡 채널 상담 버튼 위치 변경하기

  1. 주석을 참고해 PC와 모바일 카카오톡 채널 버튼 이미지의 위치를 각각 수정합니다.

  2. 저장 버튼을 클릭해 적용합니다.

9단계: 톡 상담 정상 작동 확인하기

  1. 관리자 페이지 왼쪽 상단의 미리보기 아이콘을 클릭합니다.
  2. 상담하기 버튼을 클릭해 작동여부를 확인합니다.
    참고: 스마트폰으로 내 사이트에 접속해 작동여부를 확인할 수도 있습니다.

추가 도움말: 관리자 추가 인증하기

모두 정상적으로 적용 완료했는데, 카카오톡 채널 채팅이 시작되지 않는 경우, 아래 그림과 같이 1:1 채팅 사용을 위해 관리자 추가인증 작업이 필요할 수 있습니다. 아래 절차를 참고해 인증을 완료해 주세요.

  1. 카카오톡채널 관리자센터 접속 후 왼쪽 메뉴에서 [1:1 채팅 > 채팅목록]을 클릭합니다.

  2. 관리자 추가인증 버튼을 클릭합니다.
  3. 카카오톡으로 전달 받은 인증번호를 입력해 관리자 추가인증을 완료합니다.