쇼핑몰 설정하기


실시간채팅카카오톡 채널 커스텀 채팅 버튼 추가하기

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

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

교육자료 다운로드

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

  • 파일 크기 및 형식: 20KB, ZIP 압축 (다운로드)
  • 파일 구성: PSD, PNG

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="void kakaoChatStart()" class="kakaoChatPc hidden-md hidden-sm hidden-xs">
    <img src="이미지주소" width="72px" height="72px">
</a>

<!-- 모바일 카카오톡 상담 버튼 -->
<a href="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. (선택 사항) widthheight 속성의 숫자를 변경해, 버튼 이미지의 크기를 수정할 수 있습니다. (숫자만 변경하세요.)

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

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

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

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

  1. 관리자 페이지 왼쪽 상단의 미리보기 아이콘을 클릭합니다.
  2. 상담하기 버튼을 클릭해 작동여부를 확인합니다.

    참고: 스마트폰으로 내 사이트에 접속해 작동여부를 확인할 수도 있습니다.


관리자 추가 인증하기

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

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

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

문의하기

홈페이지 및 쇼핑몰 제작에 대한 걱정 NO !!

처음 홈페이지나 쇼핑몰, 기업 홈페이지를 제작하시는 분들도 걱정하지 않으셔도 됩니다. 

푸시웹은 마치 내 집을 짓는 듯한 정성과 세심함으로 여러분의 아이디어와 비즈니스를 현실로 옮겨 드립니다. 

어떤 질문이든 부담 없이 문의해 주세요. 우리는 여러분의 성공적인 온라인 비즈니스 파트너가 되고자 합니다.

푸시웹(푸쉬웹)

2012년 모바일 앱 제작으로 첫발을 내딛은 이래, 2014년 PC 홈페이지, 모바일 웹, 앱 간의 원활한 연동 시스템 개발을 통해 기술적 기반을 다졌습니다. 이러한 경험을 바탕으로, 2016년 1월에는 다양한 업종을 위한 반응형 홈페이지, 쇼핑몰, 펜션 웹 솔루션을 선보이며 서비스 범위를 확장했습니다. 우리는 고객에게 최상의 사용 경험을 제공하고, 시대의 흐름에 맞춘 서비스 개발에 지속적으로 힘쓰고 있습니다.

대표자명 : 김형연

개인정보책임자: 허서윤

사업자등록번호:809-06-00700

통신판매업신고번호:제 2017-경기안산-0242호


서울 : 서울시 금천구 가산동 50-3 대륭포스트 6차 707호 가산디지털단지역 2번출구 바로 앞


경기: 경기도 안산시 상록구 수암길33, 101동 401호


호스트서버 소재지 : 서울시 강남구 논현로 508, GS타워 12층 

대표전화070-7517-8832
상담직통010-5264-8829
자료 전송pushweb@naver.com
국민은행
계좌: 666201-01-678489
예금주: 푸시웹
고객센터
070.7517.8832