• 가이드

카카오 플러스친구 1:1 채팅 버튼 추가하기 (카카오톡 채널)

개요

내 사이트에 카카오톡 채널 1:1 채팅 버튼(구 플러스친구)을 추가할 수 있습니다.


적용방법

1단계, 카카오톡 채널 홈 ID 알아내기
사용 중인 카카오톡 채널 홈 ID를 확인하고 복사해둡니다.

1) 카카오톡 채널 관리자센터 에 접속합니다.
2) 내 채널을 선택합니다. *채널이 없는 경우 새 채널을 만들어야 합니다.
3) 관리자센터 왼쪽 [관리 - 상세설정] 메뉴에 접속합니다.
4) 채널 홈 ID 를 확인하고 메모장에 보관해둡니다. *홈 ID는 차후 다시 사용됩니다.


2단계, 카카오 앱 만들기

1) 카카오 앱 만들기 페이지로 클릭합니다.
2) 앱 아이콘 을 업로드하고, 앱 이름, 회사명(없는 경우 이름)을 입력합니다.
3) 앱 만들기 버튼을 클릭합니다.


3단계, 앱 플랫폼 추가하기

1) 왼쪽 메뉴에서 [설정 - 일반] 을 클릭합니다.


2) 오른쪽 플랫폼 항목에서 플랫폼 추가 를 클릭합니다.


3) 을 선택하고, 사이트 도메인을 추가합니다. (예시 : http://imweb.me)
*본 주소 외 아임웹 서브 도메인도 추가해주시면 제작 중 확인이 편리합니다.

5) 추가 버튼을 클릭합니다.


4단계, JavaScript 키 복사, 메모해두기

1) 페이지 상단의 JavaScript 키를 마우스로 드래그 하여 복사(Ctrl + C) 합니다.
2) 복사한 JavaScript 키를 메모장 같은 곳에 보관합니다.
*JavaScript 키는 홈 ID와 함께 차후 다시 사용됩니다.


5단계, 카카오톡 채널 1:1 채팅 버튼 코드 복사하기

다음 카카오톡 채널 1:1 채팅 버튼 코드를 복사(Ctrl + C) 합니다.

<style>
    /* pc 화면 */
    @media (min-width: 768px) {
        #kakao-talk-channel-chat-button {
        position: fixed;
        z-index: 999;
        right: 30px; /* 화면 오른쪽으로부터의 거리 */
        bottom: 30px; /* 화면 아래쪽으로부터의 거리 */
        }
    }
    /* 모바일 화면 */
    @media (max-width:767px) {
        #kakao-talk-channel-chat-button {
        position: fixed;
        z-index: 999;
        right: 15px; /* 화면 오른쪽으로부터의 거리 */
        bottom: 30px; /* 화면 아래쪽으로부터의 거리 */
        }
    }
</style>
    
<div id="kakao-talk-channel-chat-button"></div>
    
<script src="//developers.kakao.com/sdk/js/kakao.min.js"></script>
<script type='text/javascript'>
    //<![CDATA[
    // 사용할 앱의 JavaScript 키를 설정해 주세요.
    Kakao.init('JavaScript 키');
    // 카카오톡 채널 1:1채팅 버튼을 생성합니다.
    Kakao.Channel.createChatButton({
        container: '#kakao-talk-channel-chat-button',
        channelPublicId: '홈 ID' // 카카오톡 채널 홈 URL에 명시된 id로 설정합니다.
        });
    //]]>
</script>


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

1) 아임웹 관리자 메뉴에 접속합니다.
2) [환경설정 - SEO 헤더설정] 으로 이동합니다.
3) 페이지 하단 Footer Code 작성란에 위 5단계에서 복사한 코드를 붙여넣기 합니다.


7단계, 카카오톡 채널 홈 ID 입력하기

1) SEO, 헤더설정에 붙여넣기 한 코드 내 홈 ID라고 작성된 부분을 확인합니다.
2) 기존 홈 ID 를 삭제합니다.
3) 위 1단계에서 확인한 홈 ID 값을 붙여넣습니다.


8단계, JavaScript 키 입력하기

1) SEO, 헤더설정에 붙여넣기 한 코드 내 JavaScript 키 라고 작성된 부분을 확인합니다.
2) 기존 JavaScript 키 를 삭제합니다.
3) 위 4단계에서 메모해두었던 JavaScript 키를 붙여넣기 합니다.


9단계, 톡 상담 버튼 위치 변경하기

PC버전, 모바일 버전일 때의 버튼 위치를 변경합니다.

1) PC 버전 톡 상담 버튼 위치 변경


2) 모바일 버전 톡 상담 버튼 위치 변경


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

디자인 모드 오른쪽 상단 미리보기를 클릭하여, 톡상담 버튼이 정상적으로 작동 하는지 확인합니다.

목록으로

아임웹 디자이너가 되어주세요!

개인 디자이너, 1인 기업을 위한 아임웹 디자이너 프로그램

리셀러/디자이너 신청

한 번 이용하면 팬이 됩니다.

아임웹에서 당신의 생각을 표현해보세요.

115.6K

누적 사이트 이용 수
이미 수만 명이 아임웹 팬이 되어
각자의 생각을 표현하고 있습니다.

297

일 평균 사이트 개설 수
지금 이 순간에도 매일
새로운 브랜드가 소개되고 있습니다.

1.4K

전국 파트너/리셀러 수

아임웹 공식제휴사

아임웹은 페이팔, KG이니시스, 네이버, KCP, 채널, 엑심베이 공식파트너입니다.