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

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

이 도움말에서는 사용자가 직접 디자인한 버튼 이미지를 사용해 카카오톡 채널 채팅 버튼을 추가하는 방법을 설명합니다.

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

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

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

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

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

1. 카카오톡채널 관리자센터에 접속합니다.

2. 내 채널을 선택합니다. (채널이 없는 경우 새로운 채널을 생성해 주세요.)

3. 왼쪽의 [관리 > 상세설정] 메뉴를 클릭합니다.

4. 채널 홈ID를 확인하고 메모장에 메모해 둡니다. (메모해 둔 홈ID는 아래 6단계에서 사용됩니다.)

   

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

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

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. 카카오톡으로 전달 받은 인증번호를 입력해 관리자 추가인증을 완료합니다.

카카오 API키 발급 및 적용방법 (카카오 링크)

방문자는 공유하기 아이콘을 클릭해, 내 사이트의 콘텐츠(상품, 게시물 등)를 간편하게 메신저, SNS에 공유할 수 있습니다.

이 도움말에서는 카카오톡 공유 및 카카오 스토리 공유를 위한 카카오 API키 발급 및 적용방법을 설명합니다.

1단계: 카카오 개발자 페이지 접속하기

1. 카카오 디벨로퍼스에 접속합니다. https://developers.kakao.com/ 
2. 오른쪽 상단의 로그인 버튼을 클릭해 카카오 계정으로 로그인 합니다. *카카오 계정이 없는 경우 새롭게 계정을 생성합니다.

2단계: 내 애플리케이션 만들기

    1) 상단 메뉴에서 내 애플리케이션을 클릭합니다.

    2) 서비스 이용 동의 페이지가 나타나는 경우 필수 항목에 동의하고, 개발자 이름을 입력한 다음 회원가입 버튼을 클릭해 다음 단계로 넘어갑니다. 
        (기존에 서비스 이용 동의한 경우 표시되지 않을 수 있습니다.)

    3) 전체 애플리케이션 페이지가 나타나면, 애플리케이션 추가하기를 클릭합니다.

    4) 앱 아이콘(로고)을 업로드하고, 앱 이름, 회사 이름을 작성합니다.

   5) 저장 버튼을 클릭합니다.

3단계: 플랫폼 설정하기

    1) 전체 애플리케이션 목록으로 돌아가면, 새로 추가한 앱을 클릭합니다.

    2) 플랫폼 항목에서 플랫폼 설정하기를 클릭합니다.

    3) Web 항목의 Web 플랫폼 등록 버튼을 클릭합니다.

    4) 운영 중인 사이트 주소(URL)를 입력합니다. 여러 개의 도메인을 사용하고 계신 경우, Enter로 구분해 도메인을 모두 입력합니다.

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

4단계: 발급 받은 Javascript 키 복사하기

    1) 왼쪽 탭 메뉴에서 앱 키를 클릭합니다.

    2) JavaScript 키 오른쪽 복사 버튼을 클릭합니다.

5단계: 내 사이트에 JavaScript 키 적용하기

    1) 내 사이트 관리자 페이지에 접속합니다. 접속방법

    2) 왼쪽 메뉴에서 [환경설정 > 소셜 로그인 / API 설정]을 클릭합니다.

    3) 상단 공유 및 API 설정 탭 메뉴를 클릭합니다.

    4) 카카오 링크 항목에서 카카오 링크 사용을 선택합니다.

    5) API 키 오른쪽 빈 칸에, 위 4단계에서 복사한 JavaScript 키를 붙여넣습니다.

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

카카오톡 공유(카카오링크)가 되지 않아요.

방문자는 공유하기 아이콘을 클릭해, 내 사이트의 콘텐츠(상품, 게시물 등)를 간편하게 메신저 및 SNS에 공유할 수 있습니다. 

이 도움말에서는 카카오톡 및 카카오스토리 공유를 위한 카카오 API키 발급방법 및 적용방법을 설명합니다.

1단계: 카카오 API키 발급 및 적용방법

카카오 공유하기는 카카오 개발자 페이지에서 API키를 발급 받아, 내 사이트에 적용하는 것만으로 사용 가능합니다. API키 발급 방법 및 적용방법은 다음 도움말을 참고해 주세요.

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

2단계: 작동여부 확인하기

카카오 API키 발급 및 적용 후에는 아래의 절차를 참고해 작동여부를 확인해 주세요.

1. 내 사이트 게시판의 게시물 또는 상품 상세페이지에 접속합니다.
2. 공유하기  아이콘을 클릭합니다.
3. 공유하기 창에 카카오톡 또는 카카오스토리아이콘이 표시되는지 확인합니다.

   
   

4. 카카오 공유 아이콘을 클릭해 작동여부를 테스트 합니다.

카카오 API키 발급 및 적용방법 (카카오 링크)

방문자는 공유하기 아이콘을 클릭해, 내 사이트의 콘텐츠(상품, 게시물 등)를 간편하게 메신저, SNS에 공유할 수 있습니다. 이 도움말에서는 카카오톡 공유 및 카카오 스토리 공유를 위한 카카오 API키 발급 및 적용방법을 설명합니다.

중요: 2018년 6월 1일부로 카카오 링크 2.0 정책 변경으로 인해 카카오톡, 카카오 스토리에 공유 기능을 사용하기 위해선 카카오 개발자센터에서 API 키를 발급받아 내 사이트에 적용해야 합니다.  카카오 개발자센터 공지 확인하기

1단계: 카카오 개발자 페이지 접속하기

1. 카카오 디벨로퍼스에 접속합니다.
2. 오른쪽 상단의 로그인 버튼을 클릭해 카카오 계정으로 로그인 합니다. *카카오 계정이 없는 경우 새롭게 계정을 생성합니다.

2단계: 내 애플리케이션 만들기

1. 상단 메뉴에서 내 애플리케이션을 클릭합니다.
2. 서비스 이용 동의 페이지가 나타나는 경우 필수 항목에 동의하고, 개발자 이름을 입력한 다음 회원가입 버튼을 클릭해 다음 단계로 넘어갑니다. (기존에 서비스 이용 동의한 경우 표시되지 않을 수 있습니다.)
3. 전체 애플리케이션 페이지가 나타나면, 애플리케이션 추가하기를 클릭합니다.
4. 앱 아이콘(로고)을 업로드하고, 앱 이름, 회사 이름을 작성합니다. 5. 저장 버튼을 클릭합니다.

3단계: 플랫폼 설정하기

1. 전체 애플리케이션 목록으로 돌아가면, 새로 추가한 앱을 클릭합니다.
2. 플랫폼 항목에서 플랫폼 설정하기를 클릭합니다.
3. Web 항목의 Web 플랫폼 등록 버튼을 클릭합니다.
4. 운영 중인 사이트 주소(URL)를 입력합니다. 여러 개의 도메인을 사용하고 계신 경우, Enter로 구분해 도메인을 모두 입력합니다.

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

4단계: 발급 받은 Javascript 키 복사하기

1. 왼쪽 탭 메뉴에서 앱 키를 클릭합니다.
2. JavaScript 키 오른쪽 복사버튼을 클릭합니다.

5단계: 내 사이트에 JavaScript 키 적용하기

1. 내 사이트 관리자 페이지에 접속합니다. 
2. 왼쪽 메뉴에서 [환경설정 > 소셜 로그인 / API 설정]을 클릭합니다.
3. 상단 공유 및 API 설정 탭 메뉴를 클릭합니다.
4. 카카오 링크 항목에서 카카오 링크 사용을 선택합니다.
5. API 키 오른쪽 빈 칸에, 위 4단계에서 복사한 JavaScript 키를 붙여넣습니다.

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