JavaScript

This document describes how to integrate the Kakao Talk Share 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.

JS SDK demooutlink

Before you begin

Choose an implementation method

You can implement Kakao Talk Share functionality using the Kakao.Share module of the JavaScript SDK. Refer to the content below to select the type of message to send and the function to use.

1. Select message sending feature

Kakao Developers provides two types of message sending features: Kakao Talk Share and Kakao Talk Message. Select the feature to use by referring to Message sending features. If you want to use Kakao Talk Share, check the content after Step 2.

2. Select a message type and configuration method

Decide which message template to use by referring to Template types.

Refer to Configuration method comparison to decide how to configure messages. You can use default templates based on predefined templates in object form, or custom templates configured directly for your service.

3. Select an implementation method

When you implement the Kakao Talk Share API with the JavaScript SDK, you can use two methods to call the API. Different APIs are used depending on whether you add a share button using the JavaScript SDK or only connect a message sending request to a button you added directly. The point is the same that the message content to be sent is passed when requesting message sending.

Once you've chosen an implementation method, call the function that matches the type of message template you want to send. Refer to the table below.

Set Custom URL Scheme

Kakao Talk messages 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 URI 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.

The custom URL scheme is in the format kakao${YOUR_NATIVE_APP_KEY}://kakaolink. If your service has a native app, refer to the platform setup guides below to prepare to run the app with this scheme.

• Android
• iOS

Note: Passing additional information when running the app

For native apps, you can pass additional information as needed by your service when running the app with a custom URL scheme. You can set keys and values to pass when running the app using the androidExecutionParams and iosExecutionParams parameters of Android, iOS, and Flutter SDKs. When using these parameters, the following schemes are invoked when a user clicks a button in a Kakao Talk Share message to launch the app.

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

Send message with default template

Basic information

This API uses predefined default templates to share messages through Kakao Talk.

Request

1. Configure message template: Configure an object according to the desired template type. For configuration methods, refer to Default template.
2. Call the sharing function: Use one of the functions below to share a message where you want to display the Kakao Talk share button. Refer to Choose an API to use.
   • Kakao.Share.createDefaultButton(): When using a share button
   • Kakao.Share.sendDefault(): When using a custom button (button you created)
3. Pass template object: When calling createDefaultButton() or sendDefault(), pass the previously configured template object.

Sample

Using Kakao Talk Share button

Kakao.Share.createDefaultButton({
  container: '#kakaotalk-share-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: '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 won',
      },
      {
        item: 'Cake2',
        itemOp: '2000 won',
      },
      {
        item: 'Cake3',
        itemOp: '3000 won',
      },
      {
        item: 'Cake4',
        itemOp: '4000 won',
      },
      {
        item: 'Cake5',
        itemOp: '5000 won',
      }
    ],
    sum: 'Total',
    sumOp: '15000 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-share-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-share-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-share-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-share-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 Share, 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-share-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

The examples are the same as when using the share button, but use sendDefault instead of createDefaultButton.

Send message with custom template

Basic information

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

Request

1. Pass template ID: Pass the template ID confirmed in the message template tool as the templateId parameter.
2. Pass user arguments (optional): To include variable information in messages, add user arguments to the corresponding custom template, then pass keys and values as the templateArgs parameter. If you do not use this parameter even though the custom template includes user arguments, the part specified as user arguments will be exposed in the message as ${KEY} format.
3. Call the sharing function: Call one of the functions below. Refer to Choose an API to use.
   • Kakao.Share.createCustomButton(): When using a share button
   • Kakao.Share.sendCustom(): When using a custom button

Sample

Kakao.Share.createCustomButton({
  container: '#kakaotalk-share-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

Basic information

This API enables you to share a Kakao Talk message by scraping the specified web page and configuring a scrap message with the scraped information.

Request

1. Call the sharing function: Call one of the functions below. Refer to Choose an API to use.
   • Kakao.Share.createScrapButton(): When using a share button
   • Kakao.Share.sendScrap(): When using a custom button
2. Specify web page URL for scraping: When calling createScrapButton() or sendScrap(), you must pass the URL of the web page to be scraped as the requestUrl parameter. The domain of the web page to be scraped must be registered in [App] > [General] > [Platform] > [Web] on the app management page.
3. Apply custom template (optional): If you want to send a scrape message based on a message template defined by your service, you must pass the ID of the template configured in [Tools] > [Message Template] as the templateId parameter. For template configuration methods, see Custom template. To include variable information in messages, use user arguments.

Example: Using default template

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

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

Example: Using custom template

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

Set Kakao Talk Share webhook

Kakao Talk Share webhook is a function to send a webhook request to the URL specified on Kakao Developers when a Kakao Talk Share message is successfully sent to friends or a chatroom selected by a user. This function is only available for Kakao Talk Share API, not for Kakao Talk Message API. Kakao Talk Share is sent by users through Kakao Talk, so services cannot directly confirm whether the message was sent successfully. Therefore, a webhook function is provided to notify when message transmission is successful.

To use this feature, you need to:

1. Set the webhook URL and request method by referring to Prerequisites > Set Kakao Talk Share webhook.
2. Build a server to receive a Kakao Talk Share webhook.
3. Set a custom parameter to pass additional information when requesting the Kakao Talk Share API using the link callback interface provided by Kakao SDK.
4. Implement a process to handle the callback delivered to your service server's webhook URL.

When your service server receives a Kakao Talk Share webhook, you can figure out additional information through the predefined custom parameters, such as what content the user has shared. The notification sent to the service server does not include detailed message transmission information, so you need to configure parameters with additional information needed by the service, such as which message's transmission result it is and what information the user shared. Even if you set up a Kakao Talk Share webhook in the app management page, the webhook will not be delivered if there are no custom parameters.

To use the Kakao Talk Share webhook function, you must specify a custom parameter through serverCallbackArgs. Otherwise, you cannot receive Kakao Talk Share webhooks even though you registered a webhook URL for Kakao Talk Share in [App] > [Webhook] > [Kakao Talk Share webhook] on the app management page. When your service server receives a Kakao Talk Share webhook, 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 Share 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 Share webhook.

Here is a code snippet showing how to set the custom parameter for the Kakao Talk Share webhook.

// When the link is sent, a callback is sent to the URL and method set in the app's link callback.
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
  },
});

The custom parameters passed as shown above are included in the notification sent to the webhook URL of your service server in the form of request parameters. For detailed information on the Kakao Talk Share webhook request sent by Kakao, refer to Kakao Talk Share webhook.

Upload image

Basic information

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 Tool 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

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 Template Tooloutlink