• 가이드

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

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

추가방법

1단계, 카카오톡 채널 홈 ID 알아내기

사용 중인 카카오톡 채널 홈 ID를 확인하고 복사해둡니다.

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

2단계, 카카오 API키 발급 및 적용하기

카카오톡 채널 1:1 버튼을 설치하려면, 카카오 API키가 필요합니다. 다음 도움말을 참조해 카카오 API키를 발급 받고 사이트에 적용해주세요.

주의 : 기존 사용 중인 카카오 API키가 있는 경우, 이 과정은 건너 뛰어도 됩니다. 단, 기존 사용 중인 API키를 카카오 로그인용으로 사용하시는 경우 추가 API키를 발급 받아야 합니다.
3단계, 카카오톡 채널 상담 버튼 코드 복사하기

다음의 카카오톡 채널 상담 버튼 코드 전체를 복사합니다.

<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>
4단계, SEO 헤더설정 이동 및 코드 붙여넣기
  1. 새 브라우저 탭을 열고, 아임웹 관리자 메뉴에 접속합니다.
  2. 왼쪽 관리 메뉴에서 [환경설정 > SEO 헤더설정]을 클릭합니다.
  3. 페이지 하단 Footer Code 란에 위 3단계에서 복사한 코드를 붙여넣습니다.

5단계, 카카오톡 채널 홈 ID 입력하기
  1. 붙여넣은 코드에 홈 ID라고 작성된 부분을 확인합니다.
  2. 코드의 홈 ID를 삭제하고, 위 1단계에서 메모해둔 홈 ID 값을 붙여넣습니다.

6단계, JavaScript 키 입력하기
  1. 붙여넣은 코드에 JavaScript 키라고 작성된 부분을 확인합니다.
  2. 코드의 JavaScript 키를 삭제하고, 위 2단계에서 발급 받은 JavaScript 키를 붙여넣습니다.

7단계, 카카오톡 채널 상담 버튼 위치 변경하기
  1. 주석을 참조해 PC 버전 카카오톡 채널 상담 버튼 위치를 변경합니다.

  2. 주석을 참조해 모바일 버전 카카오톡 상담 버튼 위치를 변경합니다.

8단계, 카카오톡 상담 버튼 작동여부 확인하기

미리보기를 클릭해 작동여부를 확인하고, 게시하기를 클릭해 실제 사이트에 적용합니다.

목록으로

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

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

리셀러/디자이너 신청

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

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

115.6K

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

297

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

1.8K

전국 파트너/리셀러 수

아임웹 공식제휴사

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