페이지 이동경로

문서>
카카오톡 공유>
카카오톡 공유: JavaScript

카카오톡 공유

카카오톡 공유: JavaScript

이 문서는 JavaScript SDK(Kakao SDK for JavaScript)를 사용한 카카오톡 공유 API 구현 방법을 안내합니다.

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

시작하기 전에

구현 방식 선택

JavaScript SDK의 Kakao.Share 모듈을 사용해 카카오톡 공유 기능을 구현할 수 있습니다. 아래 내용을 참고하여 보낼 메시지의 종류와 사용할 함수를 선택합니다.

카카오톡 공유 모듈명 변경

JavaScript SDK 1.43.0 버전부터 카카오톡 공유 모듈명이 변경되었습니다. 자세한 안내는 공지를 참고합니다.

1. 메시지 발송 기능 선택하기

카카오디벨로퍼스의 메시지 발송 기능은 카카오톡 공유와 카카오톡 메시지 두 가지입니다. 메시지 발송 기능 안내를 참고해 사용할 기능을 선택합니다. 카카오톡 공유를 사용하려는 경우, Step 2 이후의 내용을 확인합니다.

2. 메시지 종류 및 구성 방법 선택하기

메시지 템플릿을 참고하여 어떤 메시지 템플릿을 사용할지 결정합니다.

보낼 메시지는 기본 템플릿을 바탕으로 객체 형태로 구성하거나, 서비스에 맞게 직접 구성한 사용자 정의 템플릿을 사용하여 구성할 수 있습니다. 자세한 정보는 사용 방법에서 확인할 수 있습니다.

기본으로 제공하는 템플릿 형식을 사용할 경우, 원하는 기본 템플릿에 따라 메시지 템플릿 객체로 메시지 내용을 구성해 data로 전달합니다. 메시지 템플릿 구성 요소을 참고합니다.

사용자 정의 템플릿을 사용할 경우, 메시지에 사용자 인자를 적용할 수 있습니다.

3. 호출 방법 선택하기

JavaScript SDK의 카카오톡 공유 API는 두 가지 방법으로 호출할 수 있습니다. 공유하기 버튼을 JavaScript SDK로 추가할지, 직접 추가한 버튼에 메시지 보내기 요청만 연결할지에 따라 다른 API를 사용합니다. 메시지 보내기 요청 시 보내질 메시지 내용을 전달한다는 점은 같습니다.

구현 방식	설명
공유하기 버튼 사용하기	카카오톡 공유하기 버튼에 이벤트 핸들러를 추가하여, 사용자가 공유하기 버튼을 눌렀을 때 메시지 보내기 요청
직접 만든 버튼 사용하기	JavaScript SDK로 카카오톡 공유하기 버튼을 추가하는 기능은 사용하지 않고, 서비스 웹페이지에서 자체 출력한 공유하기 버튼 클릭 시 메시지 보내기 요청

구현 방식을 선택했다면 전송하려는 메시지 템플릿의 종류에 맞는 함수를 호출합니다. 아래 표를 참고합니다.

구현 방식	메시지 종류	사용 방법	함수
공유하기 버튼을 추가하고 메시지 보내기	피드, 리스트, 위치, 커머스, 텍스트	기본 템플릿	createDefaultButton()
	피드, 리스트, 커머스	사용자 정의 템플릿	createCustomButton()
	스크랩	기본 템플릿	createScrapButton()
	스크랩	사용자 정의 템플릿	createScrapButton()
직접 만든 버튼으로 메시지 보내기	피드, 리스트, 위치, 커머스, 텍스트	기본 템플릿	sendDefault()
	피드, 리스트, 커머스	사용자 정의 템플릿	sendCustom()
	스크랩	기본 템플릿	sendScrap()
	스크랩	사용자 정의 템플릿	sendScrap()

커스텀 URL 스킴 설정

카카오톡 메시지는 지정된 웹 페이지 또는 앱을 실행하는 링크를 포함합니다. 메시지 속 버튼들은 URI 스킴(URI Schemes)과 파라미터로 구성된 커스텀 URL 스킴(Custom URL Scheme)으로 앱을 실행합니다. 앱이 설치되어 있지 않다면, 사용자가 다운로드할 수 있도록 오픈마켓으로 이동합니다.

커스텀 URL 스킴은 kakao${YOUR_NATIVE_APP_KEY}://kakaolink 형식입니다. 서비스의 네이티브 앱이 있을 경우, 아래의 각 플랫폼 설정 안내를 참고하여 해당 스킴으로 앱을 실행할 수 있도록 준비합니다.

Android
iOS

참고: 앱 실행 시 추가 정보 전달

네이티브 앱의 경우, 커스텀 URL 스킴으로 앱 실행 시 서비스의 필요에 따라 추가 정보를 전달할 수 있습니다. Android, iOS, Flutter SDK의 androidExecutionParams, iosExecutionParams 파라미터로 앱 실행 시 전달할 키와 값을 설정할 수 있습니다. 해당 파라미터 사용 시, 카카오톡 공유 메시지에서 앱을 실행하는 버튼을 클릭하면 아래와 같은 스킴이 호출됩니다.

kakao${YOUR_NATIVE_APP_KEY}://kakaolink?${androidExecutionParams}
kakao${YOUR_NATIVE_APP_KEY}://kakaolink?${iosExecutionParams}
// 예시
kakao${YOUR_NATIVE_APP_KEY}://kakaolink?key1=value1&key2=value2&key3=value3

기본 템플릿으로 메시지 보내기

기본 정보

레퍼런스	앱 설정
`Kakao.Share.createDefaultButton()` `Kakao.Share.sendDefault()`	설치 초기화

권한	사전 설정	카카오 로그인	동의항목
-	플랫폼 등록	-	-

사용하려는 기본 템플릿에 따라 메시지를 JSON 형식으로 구성하여 카카오톡 메시지를 보내는 기능입니다.

요청

웹 페이지 소스 코드 중 카카오톡 공유하기 버튼을 띄우려는 위치에서 아래 함수 중 하나를 호출합니다. 구현 방식 선택을 참고합니다.

Kakao.Share.createDefaultButton(): 공유하기 버튼 사용
Kakao.Share.sendDefault(): 직접 만든 버튼 사용

예제

공유하기 버튼 사용

피드

리스트

위치

커머스

텍스트

캘린더

Kakao.Share.createDefaultButton({
  container: '#kakaotalk-share-btn',
  objectType: 'feed',
  content: {
    title: '오늘의 디저트',
    description: '아메리카노, 빵, 케익',
    imageUrl:
      'https://mud-kage.kakao.com/dn/NTmhS/btqfEUdFAUf/FjKzkZsnoeE4o19klTOVI1/openlink_640x640s.jpg',
    link: {
      mobileWebUrl: 'https://developers.kakao.com',
      webUrl: 'https://developers.kakao.com',
    },
  },
  itemContent: {
    profileText: 'Kakao',
    profileImageUrl: 'https://mud-kage.kakao.com/dn/Q2iNx/btqgeRgV54P/VLdBs9cvyn8BJXB3o7N8UK/kakaolink40_original.png',
    titleImageUrl: 'https://mud-kage.kakao.com/dn/Q2iNx/btqgeRgV54P/VLdBs9cvyn8BJXB3o7N8UK/kakaolink40_original.png',
    titleImageText: 'Cheese cake',
    titleImageCategory: 'Cake',
    items: [
      {
        item: 'Cake1',
        itemOp: '1000원',
      },
      {
        item: 'Cake2',
        itemOp: '2000원',
      },
      {
        item: 'Cake3',
        itemOp: '3000원',
      },
      {
        item: 'Cake4',
        itemOp: '4000원',
      },
      {
        item: 'Cake5',
        itemOp: '5000원',
      },
    ],
    sum: 'Total',
    sumOp: '15000원',
  },
  social: {
    likeCount: 10,
    commentCount: 20,
    sharedCount: 30,
  },
  buttons: [
    {
      title: '웹으로 이동',
      link: {
        mobileWebUrl: 'https://developers.kakao.com',
        webUrl: 'https://developers.kakao.com',
      },
    },
    {
      title: '앱으로 이동',
      link: {
        mobileWebUrl: 'https://developers.kakao.com',
        webUrl: 'https://developers.kakao.com',
      },
    },
  ],
});

Kakao.Share.createDefaultButton({
  container: '#kakaotalk-share-btn',
  objectType: 'list',
  headerTitle: 'WEEKLY MAGAZINE',
  headerLink: {
    mobileWebUrl: 'https://developers.kakao.com',
    webUrl: 'https://developers.kakao.com',
  },
  contents: [
    {
      title: '취미의 특징, 탁구',
      description: '스포츠',
      imageUrl:
        'http://k.kakaocdn.net/dn/bDPMIb/btqgeoTRQvd/49BuF1gNo6UXkdbKecx600/kakaolink40_original.png',
      link: {
        mobileWebUrl: 'https://developers.kakao.com',
        webUrl: 'https://developers.kakao.com',
      },
    },
    {
      title: '크림으로 이해하는 커피이야기',
      description: '음식',
      imageUrl:
        'http://k.kakaocdn.net/dn/QPeNt/btqgeSfSsCR/0QJIRuWTtkg4cYc57n8H80/kakaolink40_original.png',
      link: {
        mobileWebUrl: 'https://developers.kakao.com',
        webUrl: 'https://developers.kakao.com',
      },
    },
    {
      title: '감성이 가득한 분위기',
      description: '사진',
      imageUrl:
        'http://k.kakaocdn.net/dn/c7MBX4/btqgeRgWhBy/ZMLnndJFAqyUAnqu4sQHS0/kakaolink40_original.png',
      link: {
        mobileWebUrl: 'https://developers.kakao.com',
        webUrl: 'https://developers.kakao.com',
      },
    },
  ],
  buttons: [
    {
      title: '웹으로 보기',
      link: {
        mobileWebUrl: 'https://developers.kakao.com',
        webUrl: 'https://developers.kakao.com',
      },
    },
    {
      title: '앱으로 보기',
      link: {
        mobileWebUrl: 'https://developers.kakao.com',
        webUrl: 'https://developers.kakao.com',
      },
    },
  ],
});

Kakao.Share.createDefaultButton({
  container: '#kakaotalk-share-btn',
  objectType: 'location',
  address: '경기 성남시 분당구 판교역로 166 3층',
  addressTitle: '카카오 판교오피스 카페톡',
  content: {
    title: '신메뉴 출시♥︎ 체리블라썸라떼',
    description: '이번 주는 체리블라썸라떼 1+1',
    imageUrl:
      'http://k.kakaocdn.net/dn/bSbH9w/btqgegaEDfW/vD9KKV0hEintg6bZT4v4WK/kakaolink40_original.png',
    link: {
      mobileWebUrl: 'https://developers.kakao.com',
      webUrl: 'https://developers.kakao.com',
    },
  },
  social: {
    likeCount: 286,
    commentCount: 45,
    sharedCount: 845,
  },
  buttons: [
    {
      title: '웹으로 보기',
      link: {
        mobileWebUrl: 'https://developers.kakao.com',
        webUrl: 'https://developers.kakao.com',
      },
    },
  ],
});

Kakao.Share.createDefaultButton({
  container: '#kakaotalk-share-btn',
  objectType: 'commerce',
  content: {
    title: '언제 어디든, 더 쉽고 편하게 당신의 일상을 더 즐겁게, 헤이 라이언의 이야기를 들려드릴게요.',
    imageUrl:
      'http://k.kakaocdn.net/dn/dScJiJ/btqB3cwK1Hi/pv5qHVwetz5RZfPZR3C5K1/kakaolink40_original.png',
    link: {
      mobileWebUrl: 'https://developers.kakao.com',
      webUrl: 'https://developers.kakao.com',
    },
  },
  commerce: {
    productName: '카카오미니',
    regularPrice: 100000,
    discountRate: 10,
    discountPrice: 90000,
  },
  buttons: [
    {
      title: '구매하기',
      link: {
        mobileWebUrl: 'https://developers.kakao.com',
        webUrl: 'https://developers.kakao.com',
      },
    },
    {
      title: '공유하기',
      link: {
        mobileWebUrl: 'https://developers.kakao.com',
        webUrl: 'https://developers.kakao.com',
      },
    },
  ],
});

Kakao.Share.createDefaultButton({
  container: '#kakaotalk-share-btn',
  objectType: 'text',
  text:
    '기본 템플릿으로 제공하는 텍스트 템플릿은 텍스트를 최대 200자까지 표시할 수 있습니다. 텍스트 템플릿은 텍스트 영역과 하나의 기본 버튼을 가집니다. 임의의 버튼을 설정할 수도 있습니다. 여러 장의 이미지, 프로필 정보 등 보다 확장된 형태의 카카오톡 공유는 다른 템플릿을 이용해 보낼 수 있습니다.',
  link: {
    mobileWebUrl: 'https://developers.kakao.com',
    webUrl: 'https://developers.kakao.com',
  },
});

Kakao.Share.createDefaultButton({
  container: '#kakaotalk-share-btn',
  objectType: 'calendar',
  idType: 'event',
  id: '${YOUR_EVENT_ID}',
  content: {
    title: '1월 신작 평론 모임',
    description: '따끈한 신작 감상평을 나누는 월간 모임에 초대합니다.',
    imageUrl:
      'http://k.kakaocdn.net/dn/dFUqwp/bl3SUTqb2VV/VFSqyPpKUzZVVMcmotN9A0/kakaolink40_original.png',
    link: {
      webUrl: 'https://developers.kakao.com',
      mobileWebUrl: 'https://developers.kakao.com',
    },
  },
  buttons: [
    {
      title: '모임 주제 보기',
      link: {
        webUrl: 'https://developers.kakao.com',
        mobileWebUrl: 'https://developers.kakao.com',
      },
    },
  ],
});

직접 만든 버튼 사용

피드

리스트

위치

커머스

텍스트

캘린더

Kakao.Share.sendDefault({
  objectType: 'feed',
  content: {
    title: '오늘의 디저트',
    description: '아메리카노, 빵, 케익',
    imageUrl:
      'https://mud-kage.kakao.com/dn/NTmhS/btqfEUdFAUf/FjKzkZsnoeE4o19klTOVI1/openlink_640x640s.jpg',
    link: {
      mobileWebUrl: 'https://developers.kakao.com',
      webUrl: 'https://developers.kakao.com',
    },
  },
  itemContent: {
    profileText: 'Kakao',
    profileImageUrl: 'https://mud-kage.kakao.com/dn/Q2iNx/btqgeRgV54P/VLdBs9cvyn8BJXB3o7N8UK/kakaolink40_original.png',
    titleImageUrl: 'https://mud-kage.kakao.com/dn/Q2iNx/btqgeRgV54P/VLdBs9cvyn8BJXB3o7N8UK/kakaolink40_original.png',
    titleImageText: 'Cheese cake',
    titleImageCategory: 'Cake',
    items: [
      {
        item: 'Cake1',
        itemOp: '1000원',
      },
      {
        item: 'Cake2',
        itemOp: '2000원',
      },
      {
        item: 'Cake3',
        itemOp: '3000원',
      },
      {
        item: 'Cake4',
        itemOp: '4000원',
      },
      {
        item: 'Cake5',
        itemOp: '5000원',
      },
    ],
    sum: '총 결제금액',
    sumOp: '15000원',
  },
  social: {
    likeCount: 10,
    commentCount: 20,
    sharedCount: 30,
  },
  buttons: [
    {
      title: '웹으로 이동',
      link: {
        mobileWebUrl: 'https://developers.kakao.com',
        webUrl: 'https://developers.kakao.com',
      },
    },
    {
      title: '앱으로 이동',
      link: {
        mobileWebUrl: 'https://developers.kakao.com',
        webUrl: 'https://developers.kakao.com',
      },
    },
  ],
});

Kakao.Share.sendDefault({
  objectType: 'list',
  headerTitle: 'WEEKLY MAGAZINE',
  headerLink: {
    mobileWebUrl: 'https://developers.kakao.com',
    webUrl: 'https://developers.kakao.com',
  },
  contents: [
    {
      title: '취미의 특징, 탁구',
      description: '스포츠',
      imageUrl:
        'http://k.kakaocdn.net/dn/bDPMIb/btqgeoTRQvd/49BuF1gNo6UXkdbKecx600/kakaolink40_original.png',
      link: {
        mobileWebUrl: 'https://developers.kakao.com',
        webUrl: 'https://developers.kakao.com',
      },
    },
    {
      title: '크림으로 이해하는 커피이야기',
      description: '음식',
      imageUrl:
        'http://k.kakaocdn.net/dn/QPeNt/btqgeSfSsCR/0QJIRuWTtkg4cYc57n8H80/kakaolink40_original.png',
      link: {
        mobileWebUrl: 'https://developers.kakao.com',
        webUrl: 'https://developers.kakao.com',
      },
    },
    {
      title: '감성이 가득한 분위기',
      description: '사진',
      imageUrl:
        'http://k.kakaocdn.net/dn/c7MBX4/btqgeRgWhBy/ZMLnndJFAqyUAnqu4sQHS0/kakaolink40_original.png',
      link: {
        mobileWebUrl: 'https://developers.kakao.com',
        webUrl: 'https://developers.kakao.com',
      },
    },
  ],
  buttons: [
    {
      title: '웹으로 보기',
      link: {
        mobileWebUrl: 'https://developers.kakao.com',
        webUrl: 'https://developers.kakao.com',
      },
    },
    {
      title: '앱으로 보기',
      link: {
        mobileWebUrl: 'https://developers.kakao.com',
        webUrl: 'https://developers.kakao.com',
      },
    },
  ],
});

Kakao.Share.sendDefault({
  objectType: 'location',
  address: '경기 성남시 분당구 판교역로 166 3층',
  addressTitle: '카카오 판교오피스 카페톡',
  content: {
    title: '신메뉴 출시♥︎ 체리블라썸라떼',
    description: '이번 주는 체리블라썸라떼 1+1',
    imageUrl:
      'http://k.kakaocdn.net/dn/bSbH9w/btqgegaEDfW/vD9KKV0hEintg6bZT4v4WK/kakaolink40_original.png',
    link: {
      mobileWebUrl: 'https://developers.kakao.com',
      webUrl: 'https://developers.kakao.com',
    },
  },
  social: {
    likeCount: 286,
    commentCount: 45,
    sharedCount: 845,
  },
  buttons: [
    {
      title: '웹으로 보기',
      link: {
        mobileWebUrl: 'https://developers.kakao.com',
        webUrl: 'https://developers.kakao.com',
      },
    },
  ],
});

Kakao.Share.sendDefault({
  objectType: 'commerce',
  content: {
    title: '언제 어디든, 더 쉽고 편하게 당신의 일상을 더 즐겁게, 헤이 라이언의 이야기를 들려드릴게요.',
    imageUrl:
      'http://k.kakaocdn.net/dn/dScJiJ/btqB3cwK1Hi/pv5qHVwetz5RZfPZR3C5K1/kakaolink40_original.png',
    link: {
      mobileWebUrl: 'https://developers.kakao.com',
      webUrl: 'https://developers.kakao.com',
    },
  },
  commerce: {
    productName: '카카오미니',
    regularPrice: 100000,
    discountRate: 10,
    discountPrice: 90000,
  },
  buttons: [
    {
      title: '구매하기',
      link: {
        mobileWebUrl: 'https://developers.kakao.com',
        webUrl: 'https://developers.kakao.com',
      },
    },
    {
      title: '공유하기',
      link: {
        mobileWebUrl: 'https://developers.kakao.com',
        webUrl: 'https://developers.kakao.com',
      },
    },
  ],
});

Kakao.Share.sendDefault({
  objectType: 'text',
  text:
    '기본 템플릿으로 제공하는 텍스트 템플릿은 텍스트를 최대 200자까지 표시할 수 있습니다. 텍스트 템플릿은 텍스트 영역과 하나의 기본 버튼을 가집니다. 임의의 버튼을 설정할 수도 있습니다. 여러 장의 이미지, 프로필 정보 등 보다 확장된 형태의 카카오톡 공유는 다른 템플릿을 이용해 보낼 수 있습니다.',
  link: {
    mobileWebUrl: 'https://developers.kakao.com',
    webUrl: 'https://developers.kakao.com',
  },
});

Kakao.Share.sendDefault({
  objectType: 'calendar',
  idType: 'event',
  id: '${YOUR_EVENT_ID}',
  content: {
    title: '1월 신작 평론 모임',
    description: '따끈한 신작 감상평을 나누는 월간 모임에 초대합니다.',
    imageUrl:
      'http://k.kakaocdn.net/dn/dFUqwp/bl3SUTqb2VV/VFSqyPpKUzZVVMcmotN9A0/kakaolink40_original.png',
    link: {
      webUrl: 'https://developers.kakao.com',
      mobileWebUrl: 'https://developers.kakao.com',
    },
  },
  buttons: [
    {
      title: '모임 주제 보기',
      link: {
        webUrl: 'https://developers.kakao.com',
        mobileWebUrl: 'https://developers.kakao.com',
      },
    },
  ],
});

사용자 정의 템플릿으로 메시지 보내기

기본 정보

레퍼런스	앱 설정
`Kakao.Share.createCustomButton()` `Kakao.Share.sendCustom`	설치 초기화

권한	사전 설정	카카오 로그인	동의항목
-	플랫폼 등록 메시지 템플릿	-	-

[도구] > [메시지 템플릿]에서 직접 구성한 사용자 정의 템플릿을 사용하여 카카오톡으로 메시지를 공유하는 기능입니다.

요청

웹 페이지 소스 코드 중 카카오톡 공유하기 버튼을 띄우려는 위치에서 아래 함수 중 하나를 호출합니다. 구현 방식 선택을 참고합니다.

Kakao.Share.createCustomButton(): 공유하기 버튼 사용
Kakao.Share.sendCustom: 직접 만든 버튼 사용

예제

공유하기 버튼 사용

직접 만든 버튼 사용

Kakao.Share.createCustomButton({
  container: '#kakaotalk-share-btn',
  templateId: ${YOUR_TEMPLATE_ID},
  templateArgs: {
    title: '제목 영역입니다.',
    description: '설명 영역입니다.',
  },
});

Kakao.Share.sendCustom({
  templateId: ${YOUR_TEMPLATE_ID},
  templateArgs: {
    title: '제목 영역입니다.',
    description: '설명 영역입니다.',
  },
});

기본 템플릿으로 스크랩 메시지 보내기

기본 정보

레퍼런스	앱 설정
`Kakao.Share.createScrapButton()` `Kakao.Share.sendScrap`	설치 초기화

권한	사전 설정	카카오 로그인	동의항목
-	플랫폼 등록	-	-

스크랩한 웹 페이지 정보를 바탕으로 메시지를 구성하여 카카오톡으로 메시지를 공유하는 기능입니다.

요청

웹 페이지 소스 코드 중 카카오톡 공유하기 버튼을 띄우려는 위치에서 아래 함수 중 하나를 호출합니다. 구현 방식 선택을 참고합니다.

Kakao.Share.createScrapButton(): 공유하기 버튼 사용
Kakao.Share.sendScrap: 직접 만든 버튼 사용

예제

공유하기 버튼 사용

직접 만든 버튼 사용

Kakao.Share.createScrapButton({
  container: '#kakaotalk-share-btn',
  requestUrl: 'https://developers.kakao.com',
});

Kakao.Share.sendScrap({
  requestUrl: 'https://developers.kakao.com',
});

사용자 정의 템플릿으로 스크랩 메시지 보내기

기본 정보

레퍼런스	앱 설정
`Kakao.Share.createScrapButton()` `Kakao.Share.sendScrap()`	설치 초기화

권한	사전 설정	카카오 로그인	동의항목
-	플랫폼 등록 메시지 템플릿	-	-

스크랩한 웹 페이지 정보를 바탕으로 메시지를 구성하여 카카오톡으로 메시지를 공유하는 기능입니다. [도구] > [메시지 템플릿]에서 구성한 사용자 정의 템플릿을 사용하여 메시지를 구성합니다.

요청

웹 페이지 소스 코드 중 카카오톡 공유하기 버튼을 띄우려는 위치에서 아래 함수 중 하나를 호출합니다. 구현 방식 선택을 참고합니다.

Kakao.Share.createScrapButton(): 공유하기 버튼 사용
Kakao.Share.sendScrap(): 직접 만든 버튼 사용

예제

공유하기 버튼 사용

직접 만든 버튼 사용

Kakao.Share.createScrapButton({
  container: '#kakaotalk-share-btn',
  requestUrl: 'https://developers.kakao.com',
  templateId: ${YOUR_TEMPLATE_ID},
});

Kakao.Share.sendScrap({
  requestUrl: 'https://developers.kakao.com',
  templateId: ${YOUR_TEMPLATE_ID},
});

웹훅 사용자 정의 파라미터 설정하기

카카오톡 공유 웹훅은 사용자가 선택한 친구나 채팅방으로 카카오톡 공유 메시지가 성공적으로 전달된 경우, 카카오디벨로퍼스에 설정된 웹훅 URL로 메시지가 성공적으로 전달되었음을 알려주는 기능입니다. 카카오톡 공유 메시지 전송 시에만 사용할 수 있고, 카카오톡 메시지 전송에는 지원되지 않습니다. 카카오톡 공유는 사용자가 카카오톡에서 메시지를 전송하므로 서비스에서 전송 성공 여부를 직접 확인할 수 없기 때문에 메시지 전송 성공 시 알림을 받는 웹훅 기능을 제공합니다.

이 기능을 사용하려면 아래를 수행해야 합니다.

카카오톡 공유 웹훅 설정을 참고하여 웹훅 URL과 메서드 설정
카카오톡 공유 웹훅을 받을 서버 구현
카카오톡 공유 API 호출 시 Kakao SDK에서 제공하는 링크 콜백 인터페이스(interface)를 이용해 사용자 정의(Custom) 파라미터 전달
서비스 서버의 웹훅 URL로 전달되는 알림에 대한 처리 구현

서비스 서버에서 카카오톡 공유 웹훅을 받을 때, 미리 설정해둔 사용자 정의(Custom) 파라미터로 사용자가 공유한 콘텐츠가 무엇인지 등 추가 정보를 알 수 있습니다. 서비스 서버로 보내지는 알림은 자세한 메시지 전송 관련 정보를 포함하고 있지 않으므로 어떤 메시지의 전송 결과인지, 사용자가 무슨 정보를 공유했는지 등 서비스에서 필요한 추가 정보로 파라미터를 구성합니다. [내 애플리케이션]에서 카카오톡 공유 웹훅을 설정하였더라도 사용자 정의 파라미터가 없을 경우에는 카카오톡 공유 웹훅이 전달되지 않습니다.

카카오톡 공유로 메시지를 전송하는 시점에 serverCallbackArgs 파라미터로 사용자 정의 파라미터를 전달해야 하며, 키에는 시스템 예약어인 CHAT_TYPE, HASH_CHAT_ID, TEMPLATE_ID를 사용할 수 없습니다. 해당 키는 카카오톡 공유 웹훅의 명세에 정의된 값으로 알림에 포함됩니다.

아래 예제를 참고합니다.

// 링크가 전송되면 앱의 링크 콜백이 설정된 URL 및 메소드로 콜백이 전송됩니다.
Kakao.Share.sendDefault({
  objectType: 'text',
  text: '간단한 JavaScript SDK 샘플과 함께 카카오 플랫폼 서비스 개발을 시작해 보세요.',
  link: {
    mobileWebUrl: 'https://developers.kakao.com',
    webUrl: 'https://developers.kakao.com',
  },
  serverCallbackArgs: {
    key: 'value', // 사용자 정의 파라미터 설정
  },
});

위와 같이 전달된 사용자 정의 파라미터는 서비스 서버의 웹훅 URL에 보내지는 알림에 요청 파라미터 형태로 포함됩니다. 카카오가 보내는 카카오톡 공유 웹훅 요청 전문은 카카오톡 공유 웹훅을 확인합니다.

이미지 업로드하기

기본 정보

레퍼런스	앱 설정
`Kakao.Share.uploadImage()` `Kakao.Share.scrapImage()` `Kakao.Share.deleteImage()`	설치 초기화

권한	사전 설정	카카오 로그인	동의항목
-	플랫폼 등록	-	-

카카오톡 공유 메시지에 넣을 이미지는 URL 형태로 메시지 템플릿 구성 시에 첨부하거나, 메시지 템플릿 도구에서 미리 업로드할 수 있습니다. 기기에 저장된 이미지 파일은 서버에 업로드하고 이미지 파일 URL 값을 구해야 메시지 전송에 사용할 수 있습니다.

이미지 파일 URL을 구하기 어려운 경우, 웹 페이지 속 이미지 파일을 카카오 서버로 업로드하거나 스크랩해두는 기능을 이용할 수 있습니다. 파일 용량 5MB 이하 이미지만 업로드할 수 있습니다. 카카오 서버에 업로드된 이미지는 최대 100일간 보관되고, 기간이 지나면 자동으로 삭제됩니다.

예제

업로드

삭제

var files = document.getElementById('input-file').files;

Kakao.Share.uploadImage({
  file: files,
})
  .then(function(response) {
    console.log(response.infos.original.url);
  })
  .catch(function(error) {
    console.log(error);
  });

var url = document.getElementById('input-url').value;

Kakao.Share.scrapImage({
  imageUrl: url,
})
  .then(function(response) {
    console.log(response.infos.original.url);
  })
  .catch(function(error) {
    console.log(error);
  });

var url = document.getElementById('input-url').value;

Kakao.Share.deleteImage({
  imageUrl: url,
})
  .then(function(response) {
    console.log(response);
  })
  .catch(function(error) {
    console.log(error);
  });

kakao developers

menu

시작하기

로그인

커뮤니케이션

카카오맵

내비게이션

광고

검색

더 보기

카카오톡 공유

카카오톡 공유: JavaScript

시작하기 전에

구현 방식 선택

커스텀 URL 스킴 설정

참고: 앱 실행 시 추가 정보 전달

기본 템플릿으로 메시지 보내기

기본 정보

요청

예제

공유하기 버튼 사용

직접 만든 버튼 사용

사용자 정의 템플릿으로 메시지 보내기

기본 정보

요청

예제

기본 템플릿으로 스크랩 메시지 보내기

기본 정보

요청

예제

사용자 정의 템플릿으로 스크랩 메시지 보내기

기본 정보

요청

예제

웹훅 사용자 정의 파라미터 설정하기

이미지 업로드하기

기본 정보

예제

더 보기