Kakao Talk Sharing: Flutter

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

Before you begin

Project Setting

To use the Kakao Talk Sharing API on the native app service, you must set the Custom URL Scheme. See how to set up a project by device environment below.

• Android
  • Custom URL Scheme Setup > Android
• iOS
  • Custom URL Scheme Setup > iOS

Planning

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

APIs by conditions

According to the desired message type, user environments, the methods to use are different. Here are the methods to call by message type and configuration method:

Configure a message

When you configure a Kakao Talk message through the Kakao Talk Sharing or Kakao Talk Messaging APIs, use one of the classes defined in DefaultTemplate according to a message type by referring to Message template components. Then, create an object for the desired message type among five types, and define the message content for the template object.

Here are the code snippets showing how to configure a message for each message type.

final FeedTemplate defaultFeed = FeedTemplate(
  content: Content(
    title: 'Strawberry Cheese Cake',
    description: '#Cake #Strawberry #Sampyeong-dong #Cafe #Vibe #BlindDate',
    imageUrl: Uri.parse(
        'https://mud-kage.kakao.com/dn/Q2iNx/btqgeRgV54P/VLdBs9cvyn8BJXB3o7N8UK/kakaolink40_original.png'),
    link: Link(
        webUrl: Uri.parse('https://developers.kakao.com'),
        mobileWebUrl: Uri.parse('https://developers.kakao.com')),
  ),
  itemContent: ItemContent(
    profileText: 'Kakao',
    profileImageUrl: Uri.parse(
        'https://mud-kage.kakao.com/dn/Q2iNx/btqgeRgV54P/VLdBs9cvyn8BJXB3o7N8UK/kakaolink40_original.png'),
    titleImageUrl: Uri.parse(
        'https://mud-kage.kakao.com/dn/Q2iNx/btqgeRgV54P/VLdBs9cvyn8BJXB3o7N8UK/kakaolink40_original.png'),
    titleImageText: 'Cheese cake',
    titleImageCategory: 'cake',
    items: [
      ItemInfo(item: 'cake1', itemOp: '1000 won'),
      ItemInfo(item: 'cake2', itemOp: '2000 won'),
      ItemInfo(item: 'cake3', itemOp: '3000 won'),
      ItemInfo(item: 'cake4', itemOp: '4000 won'),
      ItemInfo(item: 'cake5', itemOp: '5000 won')
    ],
    sum: 'total',
    sumOp: '15000 won',
  ),
  social: Social(likeCount: 286, commentCount: 45, sharedCount: 845),
  buttons: [
    Button(
      title: 'View on Web',
      link: Link(
        webUrl: Uri.parse('https: //developers.kakao.com'),
        mobileWebUrl: Uri.parse('https: //developers.kakao.com'),
      ),
    ),
    Button(
      title: 'View on App',
      link: Link(
        androidExecutionParams: {'key1': 'value1', 'key2': 'value2'},
        iosExecutionParams: {'key1': 'value1', 'key2': 'value2'},
      ),
    ),
  ],
);

final ListTemplate defaultList = ListTemplate(
  headerTitle: 'WEEKLY MAGAZINE',
  headerLink: Link(
    webUrl: Uri.parse('https://developers.kakao.com'),
    mobileWebUrl: Uri.parse('https://developers.kakao.com'),
  ),
  contents: [
    Content(
      title: 'My hobby, Table tennis',
      description: 'Sports',
      imageUrl: Uri.parse(
          'https://mud-kage.kakao.com/dn/bDPMIb/btqgeoTRQvd/49BuF1gNo6UXkdbKecx600/kakaolink40_original.png'),
      link: Link(
        webUrl: Uri.parse('https://developers.kakao.com'),
        mobileWebUrl: Uri.parse('https://developers.kakao.com'),
      ),
    ),
    Content(
      title: 'Understanding coffee with cream',
      description: 'Food',
      imageUrl: Uri.parse(
          'https://mud-kage.kakao.com/dn/QPeNt/btqgeSfSsCR/0QJIRuWTtkg4cYc57n8H80/kakaolink40_original.png'),
      link: Link(
        webUrl: Uri.parse('https://developers.kakao.com'),
        mobileWebUrl: Uri.parse('https://developers.kakao.com'),
      ),
    ),
    Content(
      title: 'Emotional atmosphere',
      description: 'Photo',
      imageUrl: Uri.parse(
          'https://mud-kage.kakao.com/dn/c7MBX4/btqgeRgWhBy/ZMLnndJFAqyUAnqu4sQHS0/kakaolink40_original.png'),
      link: Link(
        webUrl: Uri.parse('https://developers.kakao.com'),
        mobileWebUrl: Uri.parse('https://developers.kakao.com'),
      ),
    ),
  ],
  buttons: [
    Button(
      title: 'View on Web',
      link: Link(
        webUrl: Uri.parse('https://developers.kakao.com'),
        mobileWebUrl: Uri.parse('https://developers.kakao.com'),
      ),
    ),
    Button(
      title: 'View on App',
      link: Link(
        androidExecutionParams: {'key1': 'value1', 'key2': 'value2'},
        iosExecutionParams: {'key1': 'value1', 'key2': 'value2'},
      ),
    ),
  ],
);

final LocationTemplate defaultLocation = LocationTemplate(
  address: '235, Pangyoyeok-ro, Bundang-gu, Seongnam-si, Gyeonggi-do',
  content: Content(
    title: '"New menu release❤️ Cherry Blossom Latte',
    description: 'Cherry blossom latte 1+1 for this week',
    imageUrl: Uri.parse(
        'https://mud-kage.kakao.com/dn/bSbH9w/btqgegaEDfW/vD9KKV0hEintg6bZT4v4WK/kakaolink40_original.png'),
    link: Link(
      webUrl: Uri.parse('https://developers.kakao.com'),
      mobileWebUrl: Uri.parse('https://developers.kakao.com'),
    ),
  ),
  social: Social(likeCount: 286, commentCount: 45, sharedCount: 845),
);

final CommerceTemplate defaultCommerce = CommerceTemplate(
  content: Content(
    title: 'Ivory long dress (4 Color)',
    imageUrl: Uri.parse(
        'https://mud-kage.kakao.com/dn/RY8ZN/btqgOGzITp3/uCM1x2xu7GNfr7NS9QvEs0/kakaolink40_original.png'),
    link: Link(
      webUrl: Uri.parse('https://developers.kakao.com'),
      mobileWebUrl: Uri.parse('https://developers.kakao.com'),
    ),
  ),
  commerce: Commerce(
    regularPrice: 208800,
    discountPrice: 146160,
    discountRate: 30,
    productName: "Ivory long dress",
    currencyUnit: "₩",
    currencyUnitPosition: 1,
  ),
  buttons: [
    Button(
      title: 'Purchase',
      link: Link(
        webUrl: Uri.parse('https://developers.kakao.com'),
        mobileWebUrl: Uri.parse('https://developers.kakao.com'),
      ),
    ),
    Button(
      title: 'Share',
      link: Link(
        androidExecutionParams: {'key1': 'value1', 'key2': 'value2'},
        iosExecutionParams: {'key1': 'value1', 'key2': 'value2'},
      ),
    )
  ],
);

final TextTemplate defaultText = TextTemplate(
  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 Talk Sharing, you can send a message with a more extended form of templates, such as sending multiple images and profile information.',
  link: Link(
    webUrl: Uri.parse('https: //developers.kakao.com'),
    mobileWebUrl: Uri.parse('https: //developers.kakao.com'),
  ),
);

final CalendarTemplate defaultCalendar = CalendarTemplate(
  idType: IdType.event,
  id: '${YOUR_EVENT_ID}',
  content: Content(
    title: 'Fashion show for S/S collection',
    description: 'Join this upcoming event! To add this event to your calendar, click [일정 등록 하기].',
    imageUrl: Uri.parse(
        'https://mud-kage.kakao.com/dn/RY8ZN/btqgOGzITp3/uCM1x2xu7GNfr7NS9QvEs0/kakaolink40_original.png'),
    link: Link(
      webUrl: Uri.parse('https://developers.kakao.com'),
      mobileWebUrl: Uri.parse('https://developers.kakao.com'),
    ),
  ),
  buttons: [
    Button(
      title: 'Purchase',
      link: Link(
        webUrl: Uri.parse('https://developers.kakao.com'),
        mobileWebUrl: Uri.parse('https://developers.kakao.com'),
      ),
    )
  ],
);

As an example, here are the steps to configure and send a Feed message.

Send message with default template

Basic information

You can configure a Kakao Talk message in your source code using a default template, and then share the message with others. The default templates are defined in the DefaultTemplate class.

Request

To share the configured message through Kakao Talk, call the shareDefault() method.

For a device where Kakao Talk Sharing is not available, share the message via the web by calling the makeDefaultUrl() and launchBrowserTab methods. For more details, refer to Decide implementation method.

Calling shareDefault() launches the Kakao Talk application and shows the list of user's Kakao Talk friends or chatrooms. When a user selects friends or a chatroom to send the message to, the messages are sent to the selected targets.

shareDefault() returns SharingResult. Because the Kakao Talk Sharing API does not inform the result of message delivery, implement the Kakao Talk Sharing success callback function.

Sample

// Check if Kakao Talk is installed.
bool result = await ShareClient.instance.isKakaoTalkSharingAvailable();
if (result) {
  print('Kakao Talk Sharing is available.');
} else {
  print('If Kakao Talk is not installed, we recommend Kakao Talk Sharing via web.');
}

// Send a Feed message.
try {
  Uri uri = await ShareClient.instance.shareDefault(template: defaultFeed);
  await ShareClient.instance.launchKakaoTalk(uri);
  print('Succeeded in Kakao Talk Sharing.');
} catch (error) {
  print('Kakao Talk Sharing failed. $error');
}

Send message with custom template

Basic information

You can customize a template for Kakao Talk messages in [Tools] > [Message Template Builder], and then share the message with the customized template with others. To see how to configure a custom template, refer to Message template builder.

Request

To share the configured message through Kakao Talk, call the shareCustom() method.

For a device where Kakao Talk Sharing is not available, share the message via the web by calling the makeCustomUrl() and launchBrowserTab methods. For more details, refer to Decide implementation method.

Calling shareCustom() launches the Kakao Talk application and shows the list of user's Kakao Talk friends or chatrooms. When a user selects friends or a chatroom to send the message to, the messages are sent to the selected targets.

shareCustom() returns SharingResult. Because the Kakao Talk Sharing API does not inform the result of message delivery, implement the Kakao Talk Sharing success callback function.

Sample

// Sending Kakao Talk Sharing message using custom template.
//  * Refer to the guide: https://developers.kakao.com/docs/latest/en/message/message-templatee/message-template

//  Template ID
int templateId = templateIds['customMemo']!;

// Check if Kakao Talk is installed.
bool result = await ShareClient.instance.isKakaoTalkSharingAvailable();

// If Kakao Talk is installed, the Kakao Talk Sharing message is sent through Kakao Talk.
if (result) {
  try {
    Uri uri = await ShareClient.instance.shareCustom(templateId: templateId, templateArgs: {'key1': 'value1'});
    await ShareClient.instance.launchKakaoTalk(uri);
    print('Succeeded in Kakao Talk Sharing.');
  } catch (error) {
    print('Kakao Talk Sharing failed. $error');
  }
} else {
  // If Kakao Talk is not installed, we recommend sending the Kakao Talk Sharing message via web.

  int templateId = templateIds['customMemo']!;
  try {
    Uri shareUrl = await WebSharerClient.instance.makeCustomUrl(
        templateId: templateId, templateArgs: {'key1': 'value1'});    
    await launchBrowserTab(shareUrl, popupOpen: true);
  } catch (error) {
    print('Kakao Talk Sharing failed. $error');
  }
}

Send scrape message with default template

Basic information

You can scrape a web page with a default template, and then share the scraped message with others.

Request

To share the scraped message through Kakao Talk, call the shareScrap() method.

For a device where Kakao Talk Sharing is not available, share the message via the web by calling the makeScrapUrl() and launchBrowserTab methods. For more details, refer to Decide implementation method.

Calling shareScrap() launches the Kakao Talk application and shows the list of user's Kakao Talk friends or chatrooms. When a user selects friends or a chatroom to send the message to, the messages are sent to the selected targets.

shareScrap() returns SharingResult. Because the Kakao Talk Sharing API does not inform the result of message delivery, implement the Kakao Talk Sharing success callback function.

Sample

// Sending Kakao Talk Sharing message using default template.

// Check if Kakao Talk is installed.
bool result = await ShareClient.instance.isKakaoTalkSharingAvailable();

// If Kakao Talk is installed, the Kakao Talk Sharing message is sent through Kakao Talk.
if (result) {
  // Web page URL to be shared.
  // * CAUTION: The domain of the URL to be shared must be registered in [My Appliction] > [Platform] > [Web] in Kakao Developers.
  String url = "https://developers.kakao.com";

  try {
    Uri uri = await ShareClient.instance.shareScrap(url: url);
    await ShareClient.instance.launchKakaoTalk(uri);
    print('Succeeded in Kakao Talk Sharing.');
  } catch (error) {
      print('Kakao Talk Sharing failed. $error');
  }
} else {
  // If Kakao Talk is not installed, we recommend sending the Kakao Talk Sharing message via web.
  String url = "https://developers.kakao.com";

  try {
    Uri shareUrl = await WebSharerClient.instance.makeScrapUrl(url: url);
    await launchBrowserTab(shareUrl, popupOpen: true);
  } catch (error) {
    print('Kakao Talk Sharing failed. $error');
  }
}

Send scrape message with custom template

Basic information

You can scrape a web page and then share the scraped message with a custom template congfigured in [Tools] > [Message Template Builder]. To see how to configure a custom template, refer to Message template builder.

Request

To share the scraped message through Kakao Talk, call the shareScrap() method.

For a device where Kakao Talk Sharing is not available, share the message via the web by calling the makeScrapUrl() and launchBrowserTab methods. For more details, refer to Decide implementation method.

Calling shareScrap() launches the Kakao Talk application and shows the list of user's Kakao Talk friends or chatrooms. When a user selects friends or a chatroom to send the message to, the messages are sent to the selected targets.

shareScrap() returns SharingResult. Because the Kakao Talk Sharing API does not inform the result of message delivery, implement the Kakao Talk Sharing success callback function.

Sample

// Sending Kakao Talk Sharing message using custom template.

// Check if Kakao Talk is installed.
bool result = await ShareClient.instance.isKakaoTalkSharingAvailable();

// Web page URL to be shared.
// * CAUTION: The domain of the URL to be shared must be registered in [My Appliction] > [Platform] > [Web] in Kakao Developers.
String url = "https://developers.kakao.com";
//  Template ID
int templateId = templateIds['customMemo']!;

// If Kakao Talk is installed, the Kakao Talk Sharing message is sent through Kakao Talk.
if (result) {
  try {
    Uri uri = await ShareClient.instance.shareScrap(url: url, templateId: templateId, templateArgs: {'key1': 'value1'});
    await ShareClient.instance.launchKakaoTalk(uri);
    print('Succeeded in Kakao Talk Sharing.');
  } catch (error) {
      print('Kakao Talk Sharing failed. $error');
  }  
} else {

  // If Kakao Talk is not installed, we recommend sending the Kakao Talk Sharing message via web.
  try {
    Uri shareUrl = await WebSharerClient.instance.makeScrapUrl(url: url, templateId: templateId, templateArgs: {'key1': 'value1'});
    await launchBrowserTab(shareUrl, popupOpen: true);
  } catch (error) {
    print('Kakao Talk Sharing failed. $error');
  }
}

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 serverCallbackArgs 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, declare serverCallbackArgs, and pass keys and values as a Map. 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 parameters for Kakao Talk Sharing success callback.

int templateId = templateIds['customMemo']!;
Map<String, String> serverCallbackArgs = ["userId": "abcd", "productId": "1234"]

// Checking if Kakao Talk is installed.
bool result = await ShareClient.instance.isKakaoTalkSharingAvailable();
// If Kakao Talk is installed, the Kakao Talk Sharing message is sent through Kakao Talk.
if (result) {
  try {
    Uri uri = await ShareClient.instance.shareCustom(templateId: templateId, serverCallbackArgs: serverCallbackArgs);
    await ShareClient.instance.launchKakaoTalk(uri);
    print('Succeeded in Kakao Talk Sharing.');
  } catch (error) {
    print('Kakao Talk Sharing failed. $error');
} else {

  // If Kakao Talk is not installed, we recommend sending the Kakao Talk Sharing message via web.
  try {
    Uri shareUrl = await WebSharerClient.instance.makeCustomUrl(templateId: templateId, serverCallbackArgs: serverCallbackArgs);
    await launchBrowserTab(shareUrl, popupOpen: true);
  } catch (error) {
    print('Kakao Talk Sharing failed. $error');
  }
}

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

You can attach images to a Kakao Talk message by passing an image URL when configuring a message template or uploading images in the Message template builder in advance.

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.

To upload an image on the Android or iOS platforms, call the uploadImage() method defined in the ShareClient class. To upload an image on a web platform, call the uploadImage() method defined in the WebSharerClient class.

You can only upload an image with a file size of 5 MB or less by passing image or byteData.

To use an image by scraping an image uploaded on the web page, call the scrapImage() method defined in the ShareClient class.

When the request is successful, the information of the uploaded image is returned through the ImageUploadResult class.

Sample

Upload image

// Uploading image

// Image file to be uploaded. In this sample, the image file added as a project resource is used.
ByteData byteData = await rootBundle.load('assets/images/cat1.png');

// In this sample, the project resource is saved as an image file by using path_provider.
File tempFile =
  File('${(await getTemporaryDirectory()).path}/cat1.png');
File file = await tempFile.writeAsBytes(byteData.buffer
  .asUint8List(byteData.offsetInBytes, byteData.lengthInBytes));

try {
  // Uploading an image to the Kakao image server
  ImageUploadResult imageUploadResult =
    await ShareClient.instance.uploadImage(image: file);
  print('Succeeded in uploading an image. \n${imageUploadResult.infos.original}');
} catch (error) {
  print('Failed to upload an image. $error');
}

// Uploading image

// In this code snippet, file_picker is used to load images.
var filePickerResult = await FilePicker.platform.pickFiles();

if (filePickerResult != null) {
  var byteData = filePickerResult.files.first.bytes;

  try {
    //  Uploading an image to the Kakao image server
    ImageUploadResult imageUploadResult =
        await WebSharerClient.instance.uploadImage(byteData: byteData);
    print('Succeeded in uploading an image. \n${imageUploadResult.infos.original}');
  } catch (eror) {
    print('Failed to upload an image. $error');
  }
}

Scrape image

// Scraping an image

// URL of the original image.
String url =
  'http://k.kakaocdn.net/dn/Q2iNx/btqgeRgV54P/VLdBs9cvyn8BJXB3o7N8UK/kakaolink40_original.png';

try {
  // Uploading an image to the Kakao image server
  ImageUploadResult imageUploadResult =
    await ShareClient.instance.scrapImage(imageUrl: url);
  print('Succeeded in scraping an image.\n${imageUploadResult.infos.original}');
} catch (error) {
  print('Failed to scrape an image. $error');
}

See more

Message Template Builderoutlink