페이지 이동경로
  • 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

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 How to use 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

Basic information
Reference App setting
Kakao.Share.createDefaultButton()
Kakao.Share.sendDefault()		 Install
Initialize
Permission Prerequisite Kakao Login User consent
- Register platforms - -

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.

Request

Call one of the following functions. Refer to APIs by conditions.

  • Kakao.Share.createDefaultButton() : Sends a message through Kakao Talk Sharing button.
  • Kakao.Share.sendDefault() : Sends a message through your own button.

Sample

Using Kakao Talk Sharing button
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
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

Basic information
Reference App setting
Kakao.Share.createCustomButton()
Kakao.Share.sendCustom		 Install
Initialize
Permission Prerequisite Kakao Login User consent
- Register platforms
Message Template		 - -

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

Request

Call one of the following functions. Refer to APIs by conditions.

  • Kakao.Share.createCustomButton() : Sends a message through Kakao Talk Sharing button.
  • Kakao.Share.sendCustom : Sends a message through your own button.

Sample

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

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

Basic information
Reference App setting
Kakao.Share.createScrapButton()
Kakao.Share.sendScrap		 Install
Initialize
Permission Prerequisite Kakao Login User consent
- Register platforms - -

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

Request

Call one of the following functions. Refer to APIs by conditions.

  • Kakao.Share.createScrapButton() : Sends a message through Kakao Talk Sharing button.
  • Kakao.Share.sendScrap : Sends a message through your own button.

Sample

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

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

Send scrape message with custom template

Basic information
Reference App setting
Kakao.Share.createScrapButton()
Kakao.Share.sendScrap()		 Install
Initialize
Permission Prerequisite Kakao Login User consent
- Register platforms
Message 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.

Request

Call one of the following functions. Refer to APIs by conditions.

  • Kakao.Share.createScrapButton() : Sends a message through Kakao Talk Sharing button.
  • Kakao.Share.sendScrap() : Sends a message through your own button.

Sample

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

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:

  1. Set the callback URL and request method by referring to Prerequisites > Set Kakao Talk Sharing success callback.
  2. Build a server to receive a Kakao Talk Sharing success callback.
  3. Set a custom parameter to pass additional information when requesting the Kakao Talk Sharing API.
  4. 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. You cannot use the system reserved words CHAT_TYPE, HASH_CHAT_ID and TEMPLATE_ID as keys for the serverCallbackArgs. The key is included in the notification with the value defined in the specification of Kakao Talk Sharing success callback.

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

Basic information
Reference App setting
Kakao.Share.uploadImage()
Kakao.Share.scrapImage()
Kakao.Share.deleteImage()		 Install
Initialize
Permission Prerequisite Kakao Login User consent
- Register platforms - -

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.

Sample

Upload image
Scrape image
Delete image
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);
  });

See more

Message> Kakao Talk Sharing: JavaScript