kakao-chatbot-templates v0.3.2
Install
$ yarn add kakao-chatbot-templates
Usage
SimpleText
import { SimpleText, SkillResponse, Template } from 'kakao-chatbot-templates';
const template = new Template([
new SimpleText('Hello world!')
]);
const skillResponse = new SkillResponse(template)).render();
console.log(template);
{
"version": "2.0",
"template": {
"outputs": [
{
"simpleText": {
"text": "Hello world!"
}
}
]
}
}
SimpleImage
import { SimpleImage, SkillResponse, Template } from 'kakao-chatbot-templates';
const template = new Template([
new SimpleImage('https://www.example.com/image.jpg', 'altText'),
]);
const skillResponse = new SkillResponse(template)).render();
console.log(template);
{
"version": "2.0",
"template": {
"outputs": [
{
"simpleImage": {
"imageUrl": "https://www.example.com/image.jpg",
"altText": "altText"
}
}
]
}
}
BasicCard
Precautions When creating Button and QuickReply, if you need to put data in the extra field as needed, it is recommended that you use a key other than the 'data' field name. When inserted within a data field, the field is overwritten if there is data entered in the parent component.
import { BasicCard, SimpleThumbnail, Button, WebLinkButton, QuickReply, SkillResponse, Template } from 'kakao-chatbot-templates';
const template = new Template([
new BasicCard(
{
description: '상품명 : {productName}',
thumbnail: new SimpleThumbnail('{productImageUrl}'),
buttons: [
new WebLinkButton('구매하러 가기', '{productUrl}'),
new Button({
label: '상담원 연결',
action: 'block',
messageText: '상담원 연결',
blockId: 'KakaoOpenbuilderBlockId',
}),
],
},
{
productName: '샘플 상품',
productUrl: 'https://www.example.com/image.jpg',
productImageUrl: 'https://www.example.com/image.jpg',
},
),
],
[
new QuickReply()
]);
const skillResponse = new SkillResponse(template)).render();
console.log(template);
{
"version": "2.0",
"template": {
"outputs": [
{
"basicCard": {
"description": "상품명 : 샘플 상품",
"thumbnail": {
"imageUrl": "https://www.example.com/image.jpg"
},
"buttons": [
{
"label": "구매하러 가기",
"action": "webLink",
"webLinkUrl": "https://www.example.com/image.jpg",
"extra": {
"data": {
"productName": "샘플 상품",
"productUrl": "https://www.example.com/image.jpg",
"productImageUrl": "https://www.example.com/image.jpg"
}
}
},
{
"label": "상담원 연결",
"action": "block",
"messageText": "상담원 연결",
"blockId": "KakaoOpenbuilderBlockId",
"extra": {
"data": {
"productName": "샘플 상품",
"productUrl": "https://www.example.com/image.jpg",
"productImageUrl": "https://www.example.com/image.jpg"
}
}
}
]
}
}
],
"quickReplies": [
{
"label": "처음으로",
"action": "block",
"blockId": "KakaoOpenbuilderBlockId",
"extra": {}
}
]
}
}
Carousel
import { CarouselWithData, BasicCard, SimpleThumbnail, Button, WebLinkButton, QuickReply, SkillResponse, Template } from 'kakao-chatbot-templates';
const cardFormat = new BasicCard({
description: '상품명 : {productName}',
thumbnail: new SimpleThumbnail('{productImageUrl}'),
buttons: [
new WebLinkButton('구매하러 가기', '{productUrl}'),
new Button({
label: '상담원 연결',
action: 'block',
messageText: '상담원 연결',
blockId: 'KakaoOpenbuilderBlockId',
}),
],
});
const products = [
{
productName: '샘플상품1',
productImageUrl: '샘플이미지1',
productUrl: '샘플링크1',
},
{
productName: '샘플상품2',
productImageUrl: '샘플이미지2',
productUrl: '샘플링크2',
},
];
const template = new Template([new CarouselWithData(cardFormat, products)]);
const skillResponse = new SkillResponse(template)).render();
console.log(template);
{
"version": "2.0",
"template": {
"outputs": [
{
"carousel": {
"type": "basicCard",
"items": [
{
"description": "상품명 : 샘플상품1",
"thumbnail": {
"imageUrl": "샘플이미지1"
},
"buttons": [
{
"label": "구매하러 가기",
"action": "webLink",
"webLinkUrl": "샘플링크1",
"extra": {
"data": {
"productName": "샘플상품1",
"productImageUrl": "샘플이미지1",
"productUrl": "샘플링크1"
}
}
},
{
"label": "상담원 연결",
"action": "block",
"messageText": "상담원 연결",
"blockId": "KakaoOpenbuilderBlockId",
"extra": {
"data": {
"productName": "샘플상품1",
"productImageUrl": "샘플이미지1",
"productUrl": "샘플링크1"
}
}
}
]
},
{
"description": "상품명 : 샘플상품2",
"thumbnail": {
"imageUrl": "샘플이미지2"
},
"buttons": [
{
"label": "구매하러 가기",
"action": "webLink",
"webLinkUrl": "샘플링크2",
"extra": {
"data": {
"productName": "샘플상품2",
"productImageUrl": "샘플이미지2",
"productUrl": "샘플링크2"
}
}
},
{
"label": "상담원 연결",
"action": "block",
"messageText": "상담원 연결",
"blockId": "KakaoOpenbuilderBlockId",
"extra": {
"data": {
"productName": "샘플상품2",
"productImageUrl": "샘플이미지2",
"productUrl": "샘플링크2"
}
}
}
]
}
]
}
}
]
}
}
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago