페이지 이동경로
  • 문서>
  • 카카오톡 채널>
  • JavaScript

카카오톡 채널

JavaScript

이 문서는 Kakao SDK for JavaScript(이하 JavaScript SDK)를 사용한 카카오톡 채널 기능 구현 방법을 안내합니다.

이 문서에 포함된 기능 일부는 [도구] > [JS 데모]를 통해 사용해 볼 수 있습니다.

애플리케이션 설정 확인

이 기능을 사용하려면 카카오디벨로퍼스(Kakao Developers, 이하 개발자 웹사이트) 애플리케이션(이하 앱) 설정에 Web 플랫폼 및 도메인 등 정보가 등록되어 있어야 합니다. 자세한 내용은 애플리케이션 등록을 참고합니다.

카카오톡 채널 버튼 만들기

JavaScript SDK 사용 시, 직접 만든 버튼 이미지를 사용해 카카오톡 채널 기능들을 구현할 수 있습니다. [도구] > [소셜 플러그인] 메뉴에서 채널 추가하기, 1:1 채팅 시작하기 버튼 및 코드를 자동으로 생성하는 기능을 제공합니다.

이 문서에 사용된 태그

Tag Description
로그인 필수 카카오 로그인이 필요한 API를 의미합니다. 카카오 로그인을 먼저 구현하고, 카카오 로그인을 통해 발급 받은 액세스 토큰(Access Token)을 이용하여 해당 API를 호출해야 합니다.

카카오톡 채널 추가하기

사용자가 카카오톡 채널을 친구 추가하러 이동할 수 있도록 연결 페이지를 띄우는 기능입니다. 카카오톡 채널을 친구로 추가하려면 사용자가 로그인한 상태여야 합니다. 사용자가 로그인하지 않은 상태에서 카카오톡 채널 추가 버튼을 누른다면, 먼저 카카오 로그인 과정을 거칩니다.

카카오가 제공하는 카카오톡 채널 추가 버튼의 사용 여부에 따라 createAddChannelButtonaddChannel 중 하나의 API를 선택해 연결 페이지(Bridge page)를 호출합니다.

  • createAddChannelButton: 카카오가 제공하는 카카오톡 채널 추가 버튼 사용
  • addChannel: 직접 만든 버튼과 같은 특정 웹 페이지 구성 요소 사용
Request: createAddChannelButton
Kakao.Channel.createAddChannelButton(PARAMETER);
Request: addChannel
Kakao.Channel.addChannel(PARAMETER);
Parameter
Name Type Description Required
container String 버튼을 추가할 위치의 Element ID O
channelPublicId String 카카오톡 채널 프로필 ID
채널 URL에서 http://pf.kakao.com/ 부분을 제외한 뒷자리 값
예) 채널 URL이 http://pf.kakao.com/_WxdPrT인 경우, 카카오톡 채널의 프로필 ID는 _WxdPrT
O
Sample: createAddChannelButton(), 카카오톡 채널 추가 버튼 출력
Kakao.Channel.createAddChannelButton({
  container: '#kakao-add-channel-button',
  channelPublicId: '_xcLqmC' // 카카오톡 채널 홈 URL에 명시된 id로 설정합니다.
});
Sample: addChannel(), 직접 만든 버튼에 카카오톡 채널 추가 기능 적용
Kakao.Channel.addChannel({
  channelPublicId: '_xcLqmC'
});

카카오톡 채널 추가 여부는 이 API가 알려주지 않습니다. 카카오톡 채널 관계 확인하기 API로 사용자와 카카오톡 채널의 관계를 조회해야 추가 또는 삭제 상태를 알 수 있습니다.

카카오톡 채널 채팅하기

사용자가 서비스의 카카오톡 채널과 1:1 채팅을 시작하는 기능을 제공하는 연결 페이지를 호출합니다. 카카오가 제공하는 1:1 채팅 버튼 사용 여부에 따라 createChatButtonchat 중 하나의 API를 선택해 사용합니다.

  • createChatButton: 카카오가 제공하는 1:1 채팅 버튼 사용
  • chat: 직접 만든 버튼 등 특정 웹 페이지 구성 요소 사용

카카오톡 채널을 친구로 추가하려면 사용자가 로그인한 상태여야 합니다. 사용자가 로그인하지 않은 상태에서 카카오톡 채널 채팅 버튼을 누른다면, 먼저 카카오 로그인 과정을 거칩니다.

Request: createChatButton
Kakao.Channel.createChatButton(PARAMETER);
Request: chat
Kakao.Channel.chat(PARAMETER);
Parameter
Name Type Description Required
container String 버튼을 추가할 위치의 Element ID O
channelPublicId String 카카오톡 채널 프로필 ID
채널 URL에서 http://pf.kakao.com/ 부분을 제외한 뒷자리 값
예) 채널 URL이 http://pf.kakao.com/_WxdPrT인 경우, 카카오톡 채널의 프로필 ID는 _WxdPrT
O
Sample: createChatButton(), 카카오톡 채널 1:1 채팅 버튼 출력
Kakao.Channel.createChatButton({
  container: '#kakao-talk-channel-chat-button',
  channelPublicId: '_xcLqmC' // 카카오톡 채널 홈 URL에 명시된 id로 설정합니다.
});
Sample: chat(), 직접 만든 버튼에 1:1 채팅 연결 기능 적용
Kakao.Channel.chat({
  channelPublicId: '_xcLqmC' // 카카오톡 채널 홈 URL에 명시된 id로 설정합니다.
});

카카오톡 채널 1:1 채팅 API는 사용자가 성공적으로 채팅방에 진입했는지 여부를 알려주지 않습니다.

카카오톡 채널 관계 확인하기 로그인 필수

동의 항목 설정 필요

이 API를 사용하려면 동의 항목 설정을 참고하여 '카카오톡 채널 추가 상태 및 내역' 동의 항목을 설정해야 합니다.

카카오톡 채널 관계 확인하기는 특정 사용자가 앱과 연동된 카카오톡 채널을 추가 또는 차단했는지 확인하는 기능입니다. 이 API는 요청을 보낸 앱과 연결된 카카오톡 채널에 한해서만 관계를 알려줍니다.

사용자가 '카카오톡 채널 추가 상태 및 내역' 동의 항목에 동의하지 않아 에러 응답을 받았을 경우, 추가 항목 동의 받기 기능을 사용해 사용자에게 다시 동의를 요청할 수 있습니다.

Request
Kakao.API.request({
  url: '/v1/api/talk/channels',
});
Parameter
Name Type Description Required
url String /v1/api/talk/channels 로 고정 O
success Function(Object) API 호출이 성공할 때 실행되는 콜백 함수 X
fail Function(Object) API 호출이 실패할 때 실행되는 콜백 함수 X
always Function(Object) API 호출 성공 여부에 관계 없이 항상 호출되는 콜백 함수 X
Sample
Kakao.API.request({
  url: '/v1/api/talk/channels',
  success: function(response) {
    console.log(response);
  },
  fail: function(error) {
    console.log(error);
  }
});

요청 성공 시 응답은 REST API와 동일하므로 REST API > Response를 참고합니다.

사용자가 서비스와 연결된 카카오톡 채널을 추가 또는 차단했을 때 알림을 받으려면, '카카오톡 채널 관계 알림 받기' 기능을 사용합니다. 자세한 구현 방법 및 콜백 요청 정보는 유용한 참고 정보 > 고급 > 카카오톡 채널 알림을 참고합니다.

더보기