Tutorial

Share Kakao Talk messages with JavaScript SDK

This document explains, step by step, how to implement a Kakao Talk Share button on a webpage and share a message configured with a custom template.

Kakao Talk Share allows users to select a Kakao Talk friend or chatroom and share content from your service. You can use it without Kakao Login or an access token, and you do not need to obtain separate usage permission.

Overview

Category	Details
What you will learn	A webpage that shares a message configured with a custom template through Kakao Talk
Prerequisites	Log in with Kakao Developers account

1. Set up app

To use Kakao Talk Share, complete the app settings required to run the JavaScript SDK and open links in the message.

1-1. Create app

To use the Kakao APIs, you need a Kakao Developers app. See Create Kakao Developers app and create an app to use.

1-2. Set JavaScript key and domain

Select the app you created on the app management page.
Go to [App] > [Platform Key] > [JavaScript key].
Select the [A] copy icon to the right of the JavaScript key value you want to use. You use the copied key in Implement Kakao Talk Share.
Select the [B] JavaScript key, and register http://localhost:4000 as the [C] JavaScript SDK domain.
- Important: When applying this feature to a real service, register the domain of the service webpage.

1-3. Register web domain

To use web links in Kakao Talk Share messages, register a web domain.

On the app management page, go to [App] > [Product Link].
Register the website domain to open from the message under Web domain. Register https://developers.kakao.com to use the example template in this tutorial.
If necessary, select a Default web domain.

2. Set up project

Create a project folder and an HTML file using a code editor or terminal.

Using a code editor

In Finder (macOS) or File Explorer (Windows), create a kakao-share folder in the desired location.
Open the kakao-share folder in a code editor.
Create an index.html file in the folder.
Copy the complete code provided in Step 4 into index.html and save the file.

Using a terminal

Run the commands for your operating system.

mkdir kakao-share
cd kakao-share
touch index.html

3. Configure custom template

Configure the message to share through Kakao Talk as a custom template in the Message Template Tool.

See Send a custom message to yourself and create a Feed A template.
Set [Purpose] to Kakao Talk Share API.
Configure the image, title, description, and button.
See Send a custom message to yourself > 3. Configure message components and configure the message template.
Enter Recommended for ${NAME} in the header to add a user argument. You can pass a desired value to the user argument when sharing the message in the next step. For details, see User arguments.
Save the template and check the template ID.
- Note: You can find the template ID in area [B] or [C] on the Message Template Settings screen.

4. Implement Kakao Talk Share

Copy and paste the complete code below into index.html. This code installs and initializes the JavaScript SDK and implements a Kakao Talk Share button.

The code below uses JavaScript SDK 2.8.2. To use the latest version, select the [</>] button in Download JavaScript SDK, and copy and use the latest script code.

index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Kakao Talk Share</title>
    // Install JavaScript SDK
    <script src="https://t1.kakaocdn.net/kakao_js_sdk/2.8.2/kakao.min.js" integrity="sha384-zt/G7/KfaRQ9dT/QIkS0ujMtzouJqzuSJcXVQu50x0rl/+mD1dc70AeOejVbMD9E" crossorigin="anonymous"></script>
  </head>
  <body>
    <h1>Test Kakao Talk Share</h1>
    <button type="button" onclick="shareMessage()">Share via Kakao Talk</button>

    <script>
      // Function to initialize JavaScript SDK
      Kakao.init("${JAVASCRIPT_KEY}")
Replace with the JavaScript key copied in Step 1-2

      function shareMessage() {
        // Function to display the share target selection screen
        Kakao.Share.sendCustom({
          // Message template ID
          templateId: 12345,
Replace with the template ID checked in Step 3
          // User arguments
          templateArgs: {
            NAME: "John Doe",
Replace with the value to display in the message
          },
        })
      }
    </script>
  </body>
</html>

5. Run and test

5-1. Run local server

Run a local server in the folder containing index.html.

cd kakao-share
python3 -m http.server 4000

Keep the terminal running, and open http://localhost:4000 in a web browser.

If you registered an actual domain as the JavaScript SDK domain in 1-2. Set JavaScript key and domain, access the actual domain instead.

5-2. Share message

Log in with a Kakao Account linked to Kakao Talk

To test Kakao Talk Share, log in with a Kakao Account linked to Kakao Talk. You can check the logged-in account in Kakao Talk under [More] > [Settings] > [Kakao Account]. If you log in with a Kakao Account that is not linked to Kakao Talk, a 4012 error occurs. For details, see Kakao Talk Share error code.

Select [Share via Kakao Talk].
On a device with Kakao Talk installed, check that Kakao Talk launches.
Select a friend or chatroom on the share target selection screen.
Select [Share].
Check that the custom template message appears in the selected chatroom.
Select the link in the message and check that the registered webpage opens.

When you run the example in a PC web browser, the Kakao Account login screen may appear. When Kakao Talk Share is complete, the browser returns to the previous page.

6. Optional: Apply official Kakao Talk Share button

This step explains how to apply the official Kakao Talk Share button image.

You can use Kakao.Share.createCustomButton() to connect the share function to the downloaded button. This function does not create a button on the screen. It connects a click action to the HTML element specified by container.

On the Download design resources page, select [Small] as the button size under [Kakao Talk], and select [Download].
From the downloaded compressed file, copy kakaotalk_sharing_btn_small.png to the kakao-share folder containing index.html.
Replace the <button> and <script> from Step 4 with the code below.
Replace ${JAVASCRIPT_KEY} and 12345 with the JavaScript key of your app and the custom template ID, respectively.

index.html

<button type="button" id="kakaotalk-share-btn" style="border: 0; background: transparent; padding: 0; cursor: pointer;">
  <!-- Official Kakao Talk Share button image -->
  <img src="./kakaotalk_sharing_btn_small.png" alt="Share via Kakao Talk" />
</button>

<script>
  Kakao.init("${JAVASCRIPT_KEY}")
Enter the same JavaScript key copied in Step 1-2

  Kakao.Share.createCustomButton({
    // Connect the official Kakao Talk Share button image to a click action
    container: "#kakaotalk-share-btn",
    templateId: 12345,
Same template ID checked in Step 3
    templateArgs: {
      NAME: "John Doe",
Replace with the value to display in the message
    },
  })
</script>

Use Kakao.Share.sendCustom() when your service directly requests sharing from a click event. Use Kakao.Share.createCustomButton() when the JavaScript SDK connects a click action to a specified element. For details about the differences, see Choose an implementation method.

7. Troubleshooting

Problem	What to check
`Kakao is not defined` error occurs.	Check the SDK `script` tag URL and loading order.
An unregistered domain error occurs.	Check whether the access URL is registered as a JavaScript SDK domain.
The template cannot be found.	Check `templateId`, the selected app, and whether the template is saved.
`${NAME}` appears as-is in the message.	Check whether the `NAME` value is passed in `templateArgs`.
The message link does not open.	Check Register web domain and the component link settings in the template.

For more information about the causes of errors, see Kakao Talk Share error code and FAQ.

Docs Home

Getting started

Kakao Developers

Login

Communication

Map

Navigation

Advertisement

Search

More