페이지 이동경로

Docs>
Message>
Kakao Talk Sharing: JavaScript

Message

Kakao Talk Sharing: JavaScript

This document describes how to integrate the Kakao Talk Sharing APIs into your service with the Kakao SDK for JavaScript ("JavaScript SDK").

You can test the features described in this document in [Tools] > [JS SDK demo] menu.

Before you begin

Install SDK

Import the JavaScript SDK into your web page and initialize it by referring to Getting Started > JavaScript.

Choose an API to use

According to your service's purpose and requirements, you need to decide which API to use first by considering their characteristics and difference.

1. Select a type of Messaging API

There are two types of messaging APIs: Kakao Talk Sharing API and Kakao Talk Messaging API. You need to understand the differences between the two messaging APIs completely by referring to Concepts, and decide which API to use to implement the function to send a message.

2. Select a message type and configuration method

Decide which message template to use by referring to Message template > Types.

You can configure a message according to the default template in JSON format or create a custom template in person for your service. Refer to Message configuration method for more details.

3. Select an implementation method

When you implement the Kakao Talk Sharing API with the JavaScript SDK, you can use two methods to call the API.

Using Kakao Talk Sharing button: You can use the Kakao Talk Sharing button provided by the JavaScript SDK by adding an event handler to the button. This is intended to request to send a Kakao Talk Sharing message when a user clicks the Kakao Talk Sharing button.
Using custom sharing button: You can dynamically implement a feature to send a Kakao Talk Sharing message to the button you have created on your own. This is intended to request to send a message when a user clicks the share button that your service creates on the service web page internally without using the Kakao Talk Sharing button.

APIs by conditions

According to the desired message type, the required components of the message and the function to call are different. Refer to Message template components and samples.

Message type	Configuration method	Implementation Method	Function
Feed, List, Location, Commerce, Text, Calendar	Default template	Send a message through Kakao Talk Sharing button	createDefaultButton()
Feed, List, Location, Commerce, Text, Calendar	Default template	Send a message through your own button	sendDefault()
Feed, List, Commerce	Custom template	Send a message through Kakao Talk Sharing button	createCustomButton()
Feed, List, Commerce	Custom template	Send a message through your own button	createScrapButton()
Scrape	Default template	Send a message through Kakao Talk Sharing button	createScrapButton()
Scrape	Default template	Send a message through your own button	sendScrap()
Scrape	Custom template	Send a message through Kakao Talk Sharing button	createScrapButton()
Scrape	Custom template	Send a message through your own button	sendScrap()

Set Custom URL Scheme

Messages sent through Kakao Talk Sharing include a link to open the specified web page or app. The buttons in the message launch the app through a Custom URL Scheme consisting of a URL scheme and parameters. If the app has not been installed on a user's device, the user is redirected to an Open market to download the app.

Set a URL scheme in "kakao${YOUR_NATIVE_APP_KEY}://kakaolink" format in advance to run an app by referring to the following guides:

You can also pass parameters additionally when running the app as needed by using androidExecutionParams for Android SDK and iosExecutionParams for iOS SDK. If you have defined the parameters, the following schemes are invoked when a user clicks the button in the Kakao Talk Sharing message to launch the app.

kakao${YOUR_NATIVE_APP_KEY}://kakaolink?${androidExecutionParams}
kakao${YOUR_NATIVE_APP_KEY}://kakaolink?${iosExecutionParams}

Send message with default template

This API enables you to configure a message in JSON format according to the default template type to use and share it through Kakao Talk.

Using Kakao Talk Sharing button

Basic information

Permission	Prerequisite	Kakao Login	User consent
-	Register platforms	-	-

Add the Kakao.Share.createDefaultButton() function to the position where you want to display the Kakao Talk Sharing button in your web page source code. When a user clicks the button, the request to send a message is invoked.

Parameter

Name	Type	Description	Required
container	`String`	ID of the element where the [Share] button is added.	O
-	DefaultFeedSettings DefaultListSettings DefaultLocationSettings DefaultCommerceSettings DefaultTextSettings DefaultCalendarSettings	Object of the message template to be sent.	O
serverCallbackArgs	`Object`	Used when you want to get a callback from Kakao to your service server when a message is successfully sent. Because the Kakao Talk Sharing API does not inform the result of message delivery, it is recommended to implement Kakao Talk Sharing success callback.	X

Sample

Feed

List

Location

Commerce

Text

Calendar

Kakao.Share.createDefaultButton({
  container: '#kakaotalk-sharing-btn',
  objectType: 'feed',
  content: {
    title: 'Dessert pictures',
    description: 'Americano, bread, cake',
    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: 'http://k.kakaocdn.net/dn/Q2iNx/btqgeRgV54P/VLdBs9cvyn8BJXB3o7N8UK/kakaolink40_original.png',
    titleImageUrl: 'http://k.kakaocdn.net/dn/Q2iNx/btqgeRgV54P/VLdBs9cvyn8BJXB3o7N8UK/kakaolink40_original.png',
    titleImageText: 'Cheese cake',
    titleImageCategory: 'cake',
    items: [
      {
        item: 'cake1',
        itemOp: '1000 won',
      },
      {
        item: 'cake2',
        itemOp: '2000 won',
      },
      {
        item: 'cake3',
        itemOp: '3000 won',
      }
    ],
    sum: 'Total',
    sumOp: '3000 won',
  },
  social: {
    likeCount: 10,
    commentCount: 20,
    sharedCount: 30,
  },
  buttons: [
    {
      title: 'View on Web',
      link: {
        mobileWebUrl: 'https://developers.kakao.com',
        webUrl: 'https://developers.kakao.com',
      },
    },
    {
      title: 'View on App',
      link: {
        mobileWebUrl: 'https://developers.kakao.com',
        webUrl: 'https://developers.kakao.com',
      },
    },
  ],
});

Kakao.Share.createDefaultButton({
  container: '#kakaotalk-sharing-btn',
  objectType: 'list',
  headerTitle: 'WEEKLY MAGAZINE',
  headerLink: {
    mobileWebUrl: 'https://developers.kakao.com',
    webUrl: 'https://developers.kakao.com',
  },
  contents: [
    {
      title: 'My hobby, Table tennis',
      description: 'Sports',
      imageUrl:
        'http://k.kakaocdn.net/dn/bDPMIb/btqgeoTRQvd/49BuF1gNo6UXkdbKecx600/kakaolink40_original.png',
      link: {
        mobileWebUrl: 'https://developers.kakao.com',
        webUrl: 'https://developers.kakao.com',
      },
    },
    {
      title: 'Story about coffee with cream',
      description: 'Food',
      imageUrl:
        'http://k.kakaocdn.net/dn/QPeNt/btqgeSfSsCR/0QJIRuWTtkg4cYc57n8H80/kakaolink40_original.png',
      link: {
        mobileWebUrl: 'https://developers.kakao.com',
        webUrl: 'https://developers.kakao.com',
      },
    },
    {
      title: 'Inspiring pictures',
      description: 'Photo',
      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: 'View on Web',
      link: {
        mobileWebUrl: 'https://developers.kakao.com',
        webUrl: 'https://developers.kakao.com',
      },
    },
    {
      title: 'View on App',
      link: {
        mobileWebUrl: 'https://developers.kakao.com',
        webUrl: 'https://developers.kakao.com',
      },
    },
  ],
});

Kakao.Share.createDefaultButton({
  container: '#kakaotalk-sharing-btn',
  objectType: 'location',
  address: '166, Pangyoyeok-ro, Bundang-gu, Seongnam-si, Gyeonggi-do',
  addressTitle: 'Kakao Pangyo Office Cafe Talk',
  content: {
    title: 'New menu release❤️ Cherry Blossom Latte',
    description: 'Cherry blossom latte 1+1 for this week',
    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: 'View on Web',
      link: {
        mobileWebUrl: 'https://developers.kakao.com',
        webUrl: 'https://developers.kakao.com',
      },
    },
  ],
});

Kakao.Share.createDefaultButton({
  container: '#kakaotalk-sharing-btn',
  objectType: 'commerce',
  content: {
    title:
        'Here is the story of Kakao Mini. You can make your daily life more enjoyable and more convenient with Kakao Mini. Call Hey Ryan anytime, anywhere.',
    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: 'Kakao Mini',
    regularPrice: 100000,
    discountRate: 10,
    discountPrice: 90000,
  },
  buttons: [
    {
      title: 'Purchase',
      link: {
        mobileWebUrl: 'https://developers.kakao.com',
        webUrl: 'https://developers.kakao.com',
      },
    },
    {
      title: 'Share',
      link: {
        mobileWebUrl: 'https://developers.kakao.com',
        webUrl: 'https://developers.kakao.com',
      },
    },
  ],
});

Kakao.Share.createDefaultButton({
  container: '#kakaotalk-sharing-btn',
  objectType: 'text',
  text:
    'The Text template provided as a default template can contain text up to 200 characters. The Text template has a text area and a default button. You can also add an additional button. If you use the Kakao Talk Sharing, you can send a message with a more extended form of templates, such as sending multiple images and profile information.',
  link: {
    mobileWebUrl: 'https://developers.kakao.com',
    webUrl: 'https://developers.kakao.com',
  },
});

Kakao.Share.createDefaultButton({
  container: '#kakaotalk-sharing-btn',
  objectType: 'calendar',
  idType: 'event',
  id: '${YOUR_EVENT_ID}',
  content: {
    title:
      'Fashion show for S/S collection',
    description:
      'Join this upcoming event! To add this event to your calendar, click [일정 등록 하기].',
    imageUrl:
      'https://mud-kage.kakao.com/dn/RY8ZN/btqgOGzITp3/uCM1x2xu7GNfr7NS9QvEs0/kakaolink40_original.png',
    link: {
      mobileWebUrl: 'https://developers.kakao.com',
      webUrl: 'https://developers.kakao.com',
    },
  },
  buttons: [
    {
      title: 'View event',
      link: {
        mobileWebUrl: 'https://developers.kakao.com',
        webUrl: 'https://developers.kakao.com',
      },
    },
  ],
});

Using custom sharing button

Basic information

Permission	Prerequisite	Kakao Login	User consent
-	Register platforms	-	-

To use the customized sharing button for your service, call the Kakao.Share.sendDefault() function. Unlike Kakao.Share.createDefaultButton(), Kakao.Share.sendDefault() does not add a Kakao Talk Sharing button but only requests to send a message. This function is invoked when a user clicks the custom sharing button.

Parameter

Name	Type	Description	Required
-	DefaultFeedSettings DefaultListSettings DefaultLocationSettings DefaultCommerceSettings DefaultTextSettings DefaultCalendarSettings	Object of the message template to be sent.	O
serverCallbackArgs	`Object`	Used when you want to get a callback from Kakao to your service server when a message is successfully sent. Because the Kakao Talk Sharing API does not inform the result of message delivery, it is recommended to implement Kakao Talk Sharing success callback.	X

Sample

Feed

List

Location

Commerce

Text

Calendar

Kakao.Share.sendDefault({
  objectType: 'feed',
  content: {
    title: 'Dessert pictures',
    description: 'Americano, bread, cake',
    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: 'http://k.kakaocdn.net/dn/Q2iNx/btqgeRgV54P/VLdBs9cvyn8BJXB3o7N8UK/kakaolink40_original.png',
      titleImageUrl: 'http://k.kakaocdn.net/dn/Q2iNx/btqgeRgV54P/VLdBs9cvyn8BJXB3o7N8UK/kakaolink40_original.png',
      titleImageText: 'Cheese cake',
      titleImageCategory: 'cake',
      items: [
        {
          item: 'cake1',
          itemOp: '1000 won',
        },
        {
          item: 'cake2',
          itemOp: '2000 won',
        },
        {
          item: 'cake3',
          itemOp: '3000 won',
        }
      ],
      sum: 'Total',
      sumOp: '3000 won',
  },
  social: {
    likeCount: 10,
    commentCount: 20,
    sharedCount: 30,
  },
  buttons: [
    {
      title: 'View on Web',
      link: {
        mobileWebUrl: 'https://developers.kakao.com',
        webUrl: 'https://developers.kakao.com',
      },
    },
    {
      title: 'View on App',
      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: 'My hobby, Table tennis',
      description: 'Sports',
      imageUrl:
        'http://k.kakaocdn.net/dn/bDPMIb/btqgeoTRQvd/49BuF1gNo6UXkdbKecx600/kakaolink40_original.png',
      link: {
        mobileWebUrl: 'https://developers.kakao.com',
        webUrl: 'https://developers.kakao.com',
      },
    },
    {
      title: 'Story about coffee with cream',
      description: 'Food',
      imageUrl:
        'http://k.kakaocdn.net/dn/QPeNt/btqgeSfSsCR/0QJIRuWTtkg4cYc57n8H80/kakaolink40_original.png',
      link: {
        mobileWebUrl: 'https://developers.kakao.com',
        webUrl: 'https://developers.kakao.com',
      },
    },
    {
      title: 'Inspiring pictures',
      description: 'Photo',
      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: 'View on Web',
      link: {
        mobileWebUrl: 'https://developers.kakao.com',
        webUrl: 'https://developers.kakao.com',
      },
    },
    {
      title: 'View on App',
      link: {
        mobileWebUrl: 'https://developers.kakao.com',
        webUrl: 'https://developers.kakao.com',
      },
    },
  ],
});

Kakao.Share.sendDefault({
  objectType: 'location',
  address: '166, Pangyoyeok-ro, Bundang-gu, Seongnam-si, Gyeonggi-do',
  addressTitle: 'Kakao Pangyo Office Cafe Talk',
  content: {
    title: 'New menu release❤️ Cherry Blossom Latte',
    description: 'Cherry blossom latte 1+1 for this week',
    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: 'View on Web',
      link: {
        mobileWebUrl: 'https://developers.kakao.com',
        webUrl: 'https://developers.kakao.com',
      },
    },
  ],
});

Kakao.Share.sendDefault({
  objectType: 'commerce',
  content: {
    title:
      'Here is the story of Kakao Mini. You can make your daily life more enjoyable and more convenient with Kakao Mini. Call Hey Ryan anytime, anywhere.',
    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: 'Kakao Mini',
    regularPrice: 100000,
    discountRate: 10,
    discountPrice: 90000,
  },
  buttons: [
    {
      title: 'Purchase',
      link: {
        mobileWebUrl: 'https://developers.kakao.com',
        webUrl: 'https://developers.kakao.com',
      },
    },
    {
      title: 'Share',
      link: {
        mobileWebUrl: 'https://developers.kakao.com',
        webUrl: 'https://developers.kakao.com',
      },
    },
  ],
});

Kakao.Share.sendDefault({
  objectType: 'text',
  text:
    'The Text template provided as a default template can contain text up to 200 characters. The Text template has a text area and a default button. You can also add an additional button. If you use the Kakao Talk Sharing, you can send a message with a more extended form of templates, such as sending multiple images and profile information.',
  link: {
    mobileWebUrl: 'https://developers.kakao.com',
    webUrl: 'https://developers.kakao.com',
  },
});

Kakao.Share.sendDefault({
  objectType: 'calendar',
  idType: 'event',
  id: '${YOUR_EVENT_ID}',
  content: {
    title:
      'Fashion show for S/S collection',
    description:
      'Join this upcoming event! To add this event to your calendar, click [일정 등록 하기].',
    imageUrl:
      'https://mud-kage.kakao.com/dn/RY8ZN/btqgOGzITp3/uCM1x2xu7GNfr7NS9QvEs0/kakaolink40_original.png',
    link: {
      mobileWebUrl: 'https://developers.kakao.com',
      webUrl: 'https://developers.kakao.com',
    },
  },
  buttons: [
    {
      title: 'View event',
      link: {
        mobileWebUrl: 'https://developers.kakao.com',
        webUrl: 'https://developers.kakao.com',
      },
    },
  ],
});

Send message with custom template

This API enables you to customize a template in [Tools] > [Message Template Builder] and send a message through Kakao Talk.

Using Kakao Talk Sharing button

Basic information

Permission	Prerequisite	Kakao Login	User consent
-	Register platforms Message Template	-	-

Add the Kakao.Share.createCustomButton() function to the position where you want to display the Kakao Talk Sharing button in your web page source code. When a user clicks the button, the request to send a message is invoked.

Parameter

Name	Type	Description	Required
container	`String`	ID of the element where the [Share] button is added.	O
templateId	`Number`	Template ID of the custom template registered in [Tools] > [Message Template Builder]. Refer to Message template builder.	O
templateArgs	`Object`	If the specified template contains a user argument, use this parameter to pass key-value pairs. You cannot overwrite the scrape result.	X
serverCallbackArgs	`Object`	Used when you want to get a callback from Kakao to your service server when a message is successfully sent. Because the Kakao Talk Sharing API does not inform the result of message delivery, it is recommended to implement Kakao Talk Sharing success callback.	X

* callback: Deprecated

Sample

Kakao.Share.createCustomButton({
  container: '#kakaotalk-sharing-btn',
  templateId: ${YOUR_TEMPLATE_ID},
  templateArgs: {
    title: 'This is the title area.',
    description: 'This is the description area.',
  },
});

Using custom sharing button

Basic information

Permission	Prerequisite	Kakao Login	User consent
-	Register platforms Message Template	-	-

To use the customized sharing button for your service, call the Kakao.Share.sendCustom() function. Unlike the Kakao.Share.createCustomButton() function, the Kakao.Share.sendCustom() function does not add a Kakao Talk Sharing button but only requests to send a message. This function is invoked when a user clicks the custom sharing button.

Parameter

Name	Type	Description	Required
templateId	`Number`	Template ID of the custom template registered in [Tools] > [Message Template Builder]. Refer to Message template builder.	O
templateArgs	`Object`	If the specified template contains a user argument, use this parameter to pass key-value pairs. You cannot overwrite the scrape result.	X
serverCallbackArgs	`Object`	Used when you want to get a callback from Kakao to your service server when a message is successfully sent. Because the Kakao Talk Sharing API does not inform the result of message delivery, it is recommended to implement Kakao Talk Sharing success callback.	X

* callback: Deprecated

Sample

Kakao.Share.sendCustom({
  templateId: ${YOUR_TEMPLATE_ID},
  templateArgs: {
    title: 'This is the title area.',
    description: 'This is the description area.',
  },
});

Send scrape message with default template

This API scrapes a web page, configures a message based on the scraped web page information, and then sends it through Kakao Talk.

Using Kakao Talk Sharing button

Basic information

Permission	Prerequisite	Kakao Login	User consent
-	Register platforms	-	-

Add the Kakao.Share.createScrapButton() function to the position where you want to display the Kakao Talk Sharing button in your web page source code. When a user clicks the button, the request to send a message is invoked.

Parameter

Name	Type	Description	Required
container	`String`	ID of the element where the [Share] button is added.	O
requestUrl	`String`	Web page URL to be scraped. The link is created based on the web page metadata. Its domain must match the domain registered on the Kakao Developers.	O
templateArgs	`Object`	If the specified template contains a user argument, use this parameter to pass key-value pairs. You cannot overwrite the scrape result.	X
serverCallbackArgs	`Object`	Used when you want to get a callback from Kakao to your service server when a message is successfully sent. Because the Kakao Talk Sharing API does not inform the result of message delivery, it is recommended to implement Kakao Talk Sharing success callback.	X

* callback: Deprecated

Sample

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

Using custom sharing button

Basic information

Permission	Prerequisite	Kakao Login	User consent
-	Register platforms	-	-

To use the customized sharing button for your service, call the Kakao.Share.sendScrap() function. Unlike the Kakao.Share.createScrapButton() function, the Kakao.Share.sendScrap() function does not add a Kakao Talk Sharing button but only requests to send a message. This function is invoked when a user clicks the custom sharing button.

Parameter

Name	Type	Description	Required
requestUrl	`String`	Web page URL to be scraped. The link is created based on the web page metadata. Its domain must match the domain registered on the Kakao Developers.	O
templateArgs	`Object`	If the specified template contains a user argument, use this parameter to pass key-value pairs. You cannot overwrite the scrape result.	X
serverCallbackArgs	`Object`	Used when you want to get a callback from Kakao to your service server when a message is successfully sent. Because the Kakao Talk Sharing API does not inform the result of message delivery, it is recommended to implement Kakao Talk Sharing success callback.	X

* callback: Deprecated

Sample

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

Send scrape message with custom template

This API scrapes a web page, configures a message based on the scraped web page information, and then sends it through Kakao Talk. You can use a custom template registered in [Tools] > [Message Template Builder] when requesting to send a scrape message.

Using Kakao Talk Sharing button

Basic information

Permission	Prerequisite	Kakao Login	User consent
-	Register platforms Message Template	-	-

Parameter

Name	Type	Description	Required
container	`String`	ID of the element where the [Share] button is added.	O
requestUrl	`String`	Web page URL to be scraped. The link is created based on the web page metadata. Its domain must match the domain registered on the Kakao Developers.	O
templateId	`Number`	Used when you want to send a scrape message with the template registered in [Tools] > [Message Template Builder]. Specify the ID of the template to apply. When you use this parameter, the scraped content is applied in the template with the specified `templateId`.	O
templateArgs	`Object`	If the specified template contains a user argument, use this parameter to pass key-value pairs. You cannot overwrite the scrape result.	X
serverCallbackArgs	`Object`	Used when you want to get a callback from Kakao to your service server when a message is successfully sent. Because the Kakao Talk Sharing API does not inform the result of message delivery, it is recommended to implement Kakao Talk Sharing success callback.	X

* callback: Deprecated

Sample

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

Using custom sharing button

Basic information

Permission	Prerequisite	Kakao Login	User consent
-	Register platforms Message Template	-	-

Parameter

Name	Type	Description	Required
requestUrl	`String`	Web page URL to be scraped. The link is created based on the web page metadata. Its domain must match the domain registered on the Kakao Developers.	O
templateId	`Number`	Used when you want to send a scrape message with the template registered in [Tools] > [Message Template Builder]. Specify the ID of the template to apply. When you use this parameter, the scraped content is applied in the template with the specified `templateId`.	O
templateArgs	`Object`	If the specified template contains a user argument, use this parameter to pass key-value pairs. You cannot overwrite the scrape result.	X
serverCallbackArgs	`Object`	Used when you want to get a callback from Kakao to your service server when a message is successfully sent. Because the Kakao Talk Sharing API does not inform the result of message delivery, it is recommended to implement Kakao Talk Sharing success callback.	X

* callback: Deprecated

Sample

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

Set Kakao Talk Sharing success callback

The Kakao Talk Sharing success callback is a function to send a callback request to the URL specified on Kakao Developers when a Kakao Talk Sharing message is successfully sent to friends or a chatroom selected by a user. This function is only available for Kakao Talk Sharing API, not for Kakao Talk Messaging API.

To use this feature, you need to:

Set the callback URL and request method by referring to Prerequisites > Set Kakao Talk Sharing success callback.
Build a server to receive a Kakao Talk Sharing success callback.
Set a custom parameter to pass additional information when requesting the Kakao Talk Sharing API.
Implement a process to handle the callback delivered to your service server's callback URL.

To use the Kakao Talk Sharing success callback function, you must specify a custom parameter through serverCallbackArgs. Otherwise, you cannot receive Kakao Talk Sharing success callbacks even though you registered a callback URL for Kakao Talk Sharing in [My Application]. When your service server receives a Kakao Talk Sharing success callback, you can figure out additional information through the predefined custom parameters, such as what content the user has shared.

To pass additional information when requesting the Kakao Talk Sharing API, pass keys and values through serverCallbackArgs. Here is a code snippet showing how to set the custom parameter for the Kakao Talk Sharing success callback.

// The Kakao Talk Sharing success callback is sent to the specified callback URL when a Kakao Talk Sharing message is successfully sent.
Kakao.Share.sendDefault({
  objectType: 'text',
  text: 'Start developing the Kakao platform services with the JavaScript SDK sample.',
  link: {
    mobileWebUrl: 'https://developers.kakao.com',
    webUrl: 'https://developers.kakao.com',
  },
  serverCallbackArgs: {
    key: 'value', // Set custom parameter
  },
});

If the Kakao Talk Sharing message is successfully sent, Kakao sends a Kakao Talk Sharing success callback including the specified parameters to the callback URL of your service server. For more information on the callback request, refer to Reference Information > Kakao Talk Sharing success callback.

Upload image

You can attach images to the Kakao Talk message when configuring a message template in the form of a URL or upload images in the Message Template Builder in advance. To attach the image file stored on your device to a message, you must upload the image file to the server first to obtain its URL value.

If it is difficult to obtain the image file URL, you can either upload an image file to the Kakao server or scrape it. You can only upload an image with a file size of 5 MB or less. The images uploaded to the Kakao server are stored for up to 100 days and automatically deleted after the period.

Uploading image

Basic information

Permission	Prerequisite	Kakao Login	User consent
-	Register platforms	-	-

Call the uploadImage() function with the file parameter.

uploadImage() returns Promise. If the promise is fulfilled, ImageInfos is returned.

Parameter

Name	Type	Description	Required
file	`FileList`	URL of the image to be uploaded.	O

Sample

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);
  });

ImageInfos

Name	Type	Description	Required
original	`Object`	The original image information.	O

original

Name	Type	Description	Required
url	`String`	URL of the uploaded image.	O
content_type	`String`	Format of the uploaded image.	O
length	`Number`	File size of the uploaded image in bytes.	O
width	`Number`	Width of the uploaded image in pixels.	O
height	`Number`	Height of the uploaded image in pixels.	O

Scraping image

Basic information

Permission	Prerequisite	Kakao Login	User consent
-	Register platforms	-	-

Call the scrapImage() function with the imageUrl parameter.

scrapImage() returns Promise. If the promise is fulfilled, ImageInfos is returned.

Parameter

Name	Type	Description	Required
imageUrl	`String`	URL of the image to be scraped.	O

Sample

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);
  });

Deleting image

Basic information

Permission	Prerequisite	Kakao Login	User consent
-	Register platforms	-	-

You can also delete the image uploaded in the Kakao Talk Sharing server by calling deleteImage().

Parameter

Name	Type	Description	Required
imageUrl	`String`	URL of the image to be deleted.	O

Sample

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

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

menu

Getting started

Login

Communication

Map/Local

Navigation

Search

Artificial Intelligence(AI)

Advertisement

More

Message

Kakao Talk Sharing: JavaScript

Before you begin

Install SDK

Choose an API to use

APIs by conditions

Set Custom URL Scheme

Send message with default template

Using Kakao Talk Sharing button

Basic information

Parameter

Sample

Using custom sharing button

Basic information

Parameter

Sample

Send message with custom template

Using Kakao Talk Sharing button

Basic information

Parameter

Sample

Using custom sharing button

Basic information

Parameter

Sample

Send scrape message with default template

Using Kakao Talk Sharing button

Basic information

Parameter

Sample

Using custom sharing button

Basic information

Parameter

Sample

Send scrape message with custom template

Using Kakao Talk Sharing button

Basic information

Parameter

Sample

Using custom sharing button

Basic information

Parameter

Sample

Set Kakao Talk Sharing success callback

Upload image

Uploading image

Basic information

Parameter

Sample

ImageInfos

original

Scraping image

Basic information

Parameter

Sample

Deleting image

Basic information

Parameter

Sample

See more