Component Types

Component Types

All types are also documented with TypeScript comments for easy reference while coding.

/**
 * Object containing link information for navigating when clicking on content or buttons within a message.
 *
 * @param webUrl Web link URL used in PC version of KakaoTalk.
 * @param mobileWebUrl Web link URL used in mobile KakaoTalk.
 * @param androidExecutionParams Parameters added to the app link URL for Android KakaoTalk.
 * @param iosExecutionParams Parameters added to the app link URL for iOS KakaoTalk.
 */
export interface KakaoTemplateLink {
  webUrl?: string;
  mobileWebUrl?: string;
  iosExecutionParams?: Readonly<{ [key: string]: string }>;
  androidExecutionParams?: Readonly<{ [key: string]: string }>;
}

/**
 * Object containing content information for a message.
 *
 * @param title Title of the content.
 * @param imageUrl URL of the content's image.
 * @param link Link information for navigating when the content is clicked.
 * @param imageWidth Width of the content's image (unit: pixels).
 * @param imageHeight Height of the content's image (unit: pixels).
 */
export interface KakaoTemplateContent {
  title: string;
  imageUrl: string;
  link: KakaoTemplateLink;
  description?: string;
  imageWidth?: number;
  imageHeight?: number;
}

/**
 * Object containing information about item list type content.
 *
 * @param item Item name. Display up to 6 characters.
 * @param itemOp Item price. Allowed characters: numbers, currency symbols, commas(,), periods(.), including decimal amounts with up to 2 decimal places recommended.
 */
export interface KakaoTemplateItemInfo {
  item: string;
  itemOp: string;
}

/**
 * Object containing information about item list type content.
 *
 * @param profileText Text to be displayed in the header or profile area. If [profileImageUrl] is not present, only a bold title is displayed in the header. Display up to 16 characters.
 * @param profileImageUrl Image displayed in the profile area. Displayed as a small circular profile picture.
 * @param titleImageText Title of the image item. Display up to 2 lines, maximum 24 characters.
 * @param titleImageUrl Image of the image item. Images not in a 1:1 ratio of 108*108 for iOS and 98*98 for Android are cropped using the center crop method.
 * @param titleImageCategory Category information displayed in gray below the title of the image item. Display up to one line, maximum 14 characters.
 * @param items Information on each text item. Arrays of JSON including [ItemInfo.item] and [ItemInfo.itemOp] corresponding to item names and prices, supporting up to 5 items.
 * @param sum Summary information for the item area, such as order amount or payment amount. Display up to 6 characters below the text item area.
 * @param sumOp Price sum information of the item area. Display up to 11 characters in bold below the text item area.
 */
export interface KakaoTemplateItemContent {
  profileText?: string;
  profileImageUrl?: string;
  titleImageText?: string;
  titleImageUrl?: string;
  titleImageCategory?: string;
  items?: Array<KakaoTemplateItemInfo>;
  sum?: string;
  sumOp?: string;
}

/**
 * Object used to represent social information such as likes, comments, and shares.
 * @param likeCount Number of likes on the content.
 * @param commentCount Number of comments on the content.
 * @param sharedCount Number of shares of the content.
 * @param viewCount Number of views of the content.
 * @param subscriberCount Number of subscribers to the content.
 */
export interface KakaoTemplateSocial {
  likeCount?: Int32;
  commentCount?: Int32;
  sharedCount?: Int32;
  viewCount?: Int32;
  subscriberCount?: Int32;
}

/**
 * Object used to represent price information.
 *
 * @param regularPrice Regular price.
 * @param discountPrice Discounted price.
 * @param discountRate Discount rate.
 * @param fixedDiscountPrice Fixed discount price.
 * @param productName Product name.
 * @param currencyUnit Price unit.
 * @param currencyUnitPosition Price unit position (0: unit displayed after the price, 1: unit displayed before the price).
 */
export interface KakaoTemplateCommerce {
  regularPrice: Int32;
  discountPrice?: Int32;
  fixedDiscountPrice?: Int32;
  discountRate?: Int32;
  productName?: string;
  currencyUnit?: string;
  currencyUnitPosition?: Int32;
}

/**
 * Object representing a button added at the bottom of a message.
 *
 * @param title Button title.
 * @param link Link information for navigating when the button is clicked.
 */
export interface KakaoTemplateButton {
  title: string;
  link: KakaoTemplateLink;
}