페이지 이동경로
  • Docs>
  • Message>
  • Kakao Link: JavaScript

Message

Kakao Link: JavaScript

This document describes how to integrate Kakao Link APIs into your service with the Kakao SDK for JavaScript (hereinafter JavaScript SDK).

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

IMPORTANT

To use the JavaScript SDK, you must register the Web platform in advance. Go to [My Application] > [Platform] and register your site domains.

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.

Step 1. Select a type of Messaging API

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

Step 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.

Step 3. Select an implementation method

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

  • Using the Kakao Link Share button: You can use the Kakao Link Share button provided by the JavaScript SDK by adding an event handler to the button. This is intended to request to send a Kakao Link message when a user clicks the Kakao Link Share button.
  • Using your own button: You can dynamically implement a feature to send a Kakao Link 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 Link Share button.

APIs by conditions

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

Message type Configuration method Implementation Method API to call
Feed, List, Location, Commerce, Text Default template Send a message through Kakao Link Share button createDefaultButton()
Feed, List, Location, Commerce, Text Default template Send a message through your own button sendDefault()
Feed, List, Commerce Custom template Send a message through Kakao Link Share button createCustomButton()
Feed, List, Commerce Custom template Send a message through your own button createScrapButton()
Scrap Default template Send a message through Kakao Link Share button createScrapButton()
Scrap Default template Send a message through your own button sendScrap()
Scrap Custom template Send a message through Kakao Link Share button createScrapButton()
Scrap Custom template Send a message through your own button sendScrap()

Set Custom URL Schemes

Messages sent through Kakao Link 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 Link 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 Link Share button

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

Request
Kakao.Link.createDefaultButton(PARAMETER);
Sample
Feed
List
Location
Commerce
Text
Kakao.Link.createDefaultButton({
  container: '#CONTAINER_ID',
  objectType: 'feed',
  content: {
    title: 'Dessert pictures',
    description: 'Americano, bread, cake',
    imageUrl:
      'http://mud-kage.kakao.co.kr/dn/NTmhS/btqfEUdFAUf/FjKzkZsnoeE4o19klTOVI1/openlink_640x640s.jpg',
    link: {
      mobileWebUrl: 'https://developers.kakao.com',
      androidExecutionParams: 'test',
    },
  },
  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',
      },
    },
    {
      title: 'View on App',
      link: {
        mobileWebUrl: 'https://developers.kakao.com',
      },
    },
  ]
});
Kakao.Link.createDefaultButton({
  container: '#create-kakao-link-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.Link.createDefaultButton({
  container: '#create-kakao-link-btn',
  objectType: 'location',
  address: '235, 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.Link.createDefaultButton({
  container: '#create-kakao-link-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.Link.createDefaultButton({
  container: '#create-kakao-link-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 Kakao Link, 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',
  },
});

Using your own button

Unlike the Kakao.Link.createDefaultButton function, the Kakao.Link.sendDefault function does not add a Kakao Link Share button but only requests to send a message. This function is invoked when a user clicks a share button that the service creates on its own.

Request
Kakao.Link.sendDefault(PARAMETER);
Sample
Feed
List
Location
Commerce
Text
Kakao.Link.sendDefault({
  objectType: 'feed',
  content: {
    title: 'Dessert pictures',
    description: 'Americano, bread, cake',
    imageUrl:
      'http://mud-kage.kakao.co.kr/dn/NTmhS/btqfEUdFAUf/FjKzkZsnoeE4o19klTOVI1/openlink_640x640s.jpg',
    link: {
      mobileWebUrl: 'https://developers.kakao.com',
      androidExecutionParams: 'test',
    },
    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',
      },
    },
    {
      title: 'View on App',
      link: {
        mobileWebUrl: 'https://developers.kakao.com',
      },
    },
  ]
});
Kakao.Link.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.Link.sendDefault({
  objectType: 'location',
  address: '235, 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.Link.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.Link.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 Kakao Link, 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',
  },
});

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 Link Share button

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

Request
Kakao.Link.createCustomButton(PARAMETER);
Sample
Kakao.Link.createCustomButton({
  container: '#kakao-link-btn',
  templateId: {YOUR_TEMPLATE_ID},
  templateArgs: {
    'title': 'This is the title area.',
    'description': 'This is the description area.'
  }
});

Using your own button

Unlike the Kakao.Link.createCustomButton function, the Kakao.Link.sendCustom function does not add a Kakao Link Share button but only requests to send a message. This function is invoked when a user clicks a share button that the service creates on its own.

Request
Kakao.Link.sendCustom(PARAMETER);
Sample
Kakao.Link.sendCustom({
  templateId: {YOUR_TEMPLATE_ID},
  templateArgs: {
    'title': 'This is the title area.',
    'description': 'This is the description area.'
  }
});

Send scrap message with default template

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

Using Kakao Link Share button

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

Request
Kakao.Link.createScrapButton(PARAMETER);
Sample
Kakao.Link.createScrapButton({
  container: '#kakao-link-btn',
  requestUrl: 'https://developers.kakao.com'
});

Using your own button

Unlike the Kakao.Link.createScrapButton function, the Kakao.Link.sendScrap function does not add a Kakao Link Share button but only requests to send a message. This function is invoked when a user clicks a share button that the service creates on its own.

Request
Kakao.Link.sendScrap(PARAMETER);
Sample
Kakao.Link.sendScrap({
  requestUrl: 'https://developers.kakao.com'
});

Send scrap message with custom template

This API scraps 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 scrap message.

Using Kakao Link Share button

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

Request
Kakao.Link.createScrapButton(PARAMETER);
Sample
Kakao.Link.createScrapButton({
  container: '#kakao-link-btn',
  requestUrl: 'https://developers.kakao.com',
  templateId: {YOUR_TEMPLATE_ID}
});

Using your own button

Unlike the Kakao.Link.createScrapButton function, the Kakao.Link.sendScrap function does not add a Kakao Link Share button but only requests to send a message. This function is invoked when a user clicks a share button that the service creates on its own.

Request
Kakao.Link.sendScrap(PARAMETER);
Sample
Kakao.Link.sendScrap({
  requestUrl: 'https://developers.kakao.com',
  templateId: {YOUR_TEMPLATE_ID}
});

Set Kakao Link success callback

The Kakao Link success callback is a function to send a callback request to the URL specified on Kakao Developers when a Kakao Link message is successfully sent to friends or a chatroom selected by a user. This function is only available for Kakao Link 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 Link success callback.
  2. Build a server to receive a Kakao Link success callback.
  3. Set a custom parameter to pass additional information when requesting the Kakao Link API.
  4. Implement a process to handle the callback delivered to your service server's callback URL.

To use the Kakao Link callback function, you must specify a custom parameter. Otherwise, Kakao Link success callback is not delivered even though Kakao Link callback is set in [My Application]. When your service server receives a Kakao Link 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 Link API, pass keys and values through serverCallbackArgs. Here is a code snippet showing how to set the custom parameter for the Kakao Link success callback.

// The Kakao Link success callback is sent to the specified callback URL when a Kakao Link message is successfully sent.
Kakao.Link.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: { // Set custom parameter.
    key: 'value'
  }
});

If the Kakao Link message has successfully been delivered, Kakao sends a success callback including the specified parameters to the Kakao Link callback URL of your service server. For more information on the callback request, refer to Reference Information > Kakao Link 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 of the web page to the Kakao Link server or scrap it. You can only upload an image with a file size of 2 MB or less. The images uploaded to the Kakao Link server are stored for up to 20 days and automatically deleted after the period.

You can only upload an image with a file size of 2 MB or less.

Upload image
var files = document.getElementById('file').files;

Kakao.Link.uploadImage({
  file: files
}).then(function(res){
  document.getElementById('uploadUrl').value = res.infos.original.url;
});
Scrap image
var url = document.getElementById('url').value;

Kakao.Link.scrapImage({
  imageUrl: url
}).then(function(res){
  document.getElementById('scrapUrl').value = res.infos.original.url;
});
Delete image
var url = document.getElementById('url').value;

Kakao.Link.deleteImage({
  imageUrl: url
});

See more