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.

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.

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.

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.

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.

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

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

Shares messages through Kakao Talk using predefined default templates.

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.
4. Configure share target selection screen type (optional): When calling createDefaultButton() or sendDefault(), pass the pickerSettings.type and pickerSettings.limit parameters to configure the share target selection screen mode. (Permission required)

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',
      },
    },
  ],
})

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

Shares messages through Kakao Talk using custom templates configured in [Tools] > [Message Template].

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 a message, add user arguments to the custom template, then pass key-value pairs to the templateArgs parameter. For detailed usage and precautions, see Directly inputting user arguments.
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
4. Configure share target selection screen type (optional): When calling createCustomButton() or sendCustom(), pass the pickerSettings.type and pickerSettings.limit parameters to configure the share target selection screen mode. (Permission required)

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

Shares messages through Kakao Talk by configuring a scrap message with information from a specified web page.

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] > [Product Link] > [Web domain] 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.
4. Pass user arguments (optional): To include variable information in a message, add user arguments to the custom template, then pass key-value pairs to the templateArgs parameter. For detailed usage and precautions, see Directly inputting user arguments.
5. Configure share target selection screen type (optional): When calling createScrapButton() or sendScrap(), pass the pickerSettings.type and pickerSettings.limit parameters to configure the share target selection screen mode. (Permission required)

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

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

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.

Uploads image files to the Kakao server or scrapes image URLs.

To add an image to a Kakao Talk message, you must use the URL issued after uploading the image file to the Kakao server. If you are using a custom template, you can also upload the image through the Message Template Tool.

• Image file size: up to 5 MB.
• Image storage period: stored on the Kakao server for up to 100 days, then automatically deleted.

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

• Message Template Tool