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

카카오톡 채널

JavaScript

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

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

카카오톡 채널 버튼 만들기

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

카카오톡 채널 추가하기

기본 정보

사전 설정 레퍼런스
플랫폼 등록 createAddChannelButton()
addChannelUrl()

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

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

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

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

카카오톡 채널 채팅하기

기본 정보

사전 설정 레퍼런스
플랫폼 등록 createChatButton()
chat()

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

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

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

Parameter
Name Type Description Required
container String 버튼을 추가할 위치의 Element ID O
channelPublicId String 카카오톡 채널 프로필 ID
채널 URL에서 https://pf.kakao.com/ 부분을 제외한 뒷자리 값
예) 채널 URL이 https://pf.kakao.com/_ZeUTxl인 경우, 카카오톡 채널의 프로필 ID는 _ZeUTxl
O
Sample: createChatButton(), 카카오톡 채널 1:1 채팅 버튼 출력
Kakao.Channel.createChatButton({
  container: '#kakao-talk-channel-chat-button',
  channelPublicId: '_ZeUTxl' // 카카오톡 채널 홈 URL에 명시된 id로 설정합니다.
});
Sample: 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를 참고합니다.

Parameter
Name Type Description Required
url String /v1/api/talk/channels 로 고정 O
Sample
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로 변경할 것을 권장합니다.

더보기