JavaScript

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

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

JS SDK 데모outlink

카카오톡 채널 추가하기

기본 정보

권한	사전 설정	카카오 로그인	사용자 동의	레퍼런스
-	플랫폼 등록	-	-	createAddChannelButton() addChannelUrl()

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

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

• createAddChannelButton(): 카카오가 제공하는 카카오톡 채널 추가 버튼 사용
• addChannel(): 직접 만든 버튼과 같은 서비스 웹 페이지 구성 요소의 클릭 이벤트 핸들러에서 해당 함수 호출

파라미터

이름	타입	설명	필수
container	String	버튼을 추가할 위치의 Element ID	O
channelPublicId	String	카카오톡 채널 프로필 ID 채널 URL에서 https://pf.kakao.com/ 부분을 제외한 뒷자리 값 예) 채널 URL이 https://pf.kakao.com/_ZeUTxl인 경우, 카카오톡 채널의 프로필 ID는 _ZeUTxl	O

예제: createAddChannelButton(), 카카오톡 채널 추가 버튼 출력

Kakao.Channel.createAddChannelButton({
  container: '#kakao-add-channel-button',
  channelPublicId: '_ZeUTxl' // 카카오톡 채널 홈 URL에 명시된 id로 설정합니다.
});

예제: addChannel(), 직접 만든 버튼에 카카오톡 채널 추가 기능 적용

Kakao.Channel.addChannel({
  channelPublicId: '_ZeUTxl'
});

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

카카오톡 채널 채팅하기

기본 정보

권한	사전 설정	카카오 로그인	사용자 동의	레퍼런스
-	플랫폼 등록	-	-	createChatButton() chat()

사용자가 서비스의 카카오톡 채널과 1:1 채팅을 시작합니다. 카카오가 제공하는 1:1 채팅 버튼 사용 여부에 따라 createChatButton()과 chat() 함수 중 하나를 선택해 사용합니다.

• createChatButton(): 카카오가 제공하는 1:1 채팅 버튼 사용
• chat(): 직접 만든 버튼과 같은 서비스 웹 페이지 구성 요소의 클릭 이벤트 핸들러에서 해당 함수 호출

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

파라미터

이름	타입	설명	필수
container	String	버튼을 추가할 위치의 Element ID	O
channelPublicId	String	카카오톡 채널 프로필 ID 채널 URL에서 https://pf.kakao.com/ 부분을 제외한 뒷자리 값 예) 채널 URL이 https://pf.kakao.com/_ZeUTxl인 경우, 카카오톡 채널의 프로필 ID는 _ZeUTxl	O

예제: createChatButton(), 카카오톡 채널 1:1 채팅 버튼 출력

Kakao.Channel.createChatButton({
  container: '#kakao-talk-channel-chat-button',
  channelPublicId: '_ZeUTxl' // 카카오톡 채널 홈 URL에 명시된 id로 설정합니다.
});

예제: chat(), 직접 만든 버튼에 1:1 채팅 연결 기능 적용

Kakao.Channel.chat({
  channelPublicId: '_ZeUTxl' // 카카오톡 채널 홈 URL에 명시된 id로 설정합니다.
});

이 함수의 호출 결과는 사용자가 성공적으로 채팅방에 진입했는지 여부를 알려주지 않습니다.

카카오톡 채널 관계 확인하기

기본 정보

권한	사전 설정	카카오 로그인	사용자 동의	레퍼런스
-	플랫폼 등록 카카오 로그인 활성화 동의항목 카카오톡 채널 연결	필요	필요: 카카오톡 채널 추가 상태 및 내역	request()

현재 로그인한 사용자와 앱에 연결된 카카오톡 채널의 친구 관계를 확인합니다.

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

url 값을 /v1/api/talk/channels로 지정해 Kakao.API.request() 함수를 호출합니다. Kakao.API.request()는 Promise를 반환합니다. 요청 성공 시 반환 내용은 REST API를 참고합니다.

파라미터

이름	타입	설명	필수
url	String	/v1/api/talk/channels 로 고정	O

예제

Kakao.API.request({
  url: '/v1/api/talk/channels',
})
  .then(function(response) {
    console.log(response);
  })
  .catch(function(error) {
    console.log(error);
  });

Legacy

카카오톡 채널의 Legacy Kakao SDK for JavaScript(이하 Legacy JavaScript SDK) 개발 가이드는 다음 링크에서 확인할 수 있습니다. 추후 Legacy JavaScript SDK에 대한 지원이 중단될 수 있으므로, 가급적 빠른 시일 내에 최신 버전 JavaScript SDK로 변경할 것을 권장합니다.

Legacy JavaScript SDK 카카오톡 채널 개발 가이드

더 보기

SDK 다운로드JavaScript SDK 레퍼런스outlink