@chi0307/transform-chatbot-message v1.2.1

FB、Line、Slack 共用 chatbot 模板

透過共用模板，會將以下 json 轉成 FB、Line、Slack 各自的訊息格式。

使用方式

const {
  transformToLineMessage,
  transformToLineMessages,
  transformToFacebookMessage,
  transformToFacebookMessages,
  transformToSlackMessages,
} = require('@chi0307/transform-chatbot-message');

let message = {
  type: 'text',
  text: 'Hello World!!',
};

// Facebook 訊息結構
let facebookMessage = transformToFacebookMessage(message);
let FacebookPushMessage = {
  recipient: {
    id: FB_SENDER_PSID,
  },
  message: facebookMessage,
};

// Line 訊息結構
let lineMessage = transformToLineMessage(message);
let LinePushMessage = {
  to: LINE_USER_ID,
  messages: [lineMessage],
};

// Line 訊息使用 flex
let lineMessage = transformToLineMessage(message, { flex: true });
let LinePushMessage = {
  to: LINE_USER_ID,
  messages: [lineMessage],
};

// Slack 訊息結構
let slackMessages = transformToSlackMessages([message]);
let slackPushMessage = {
  token: SLACK_TOKEN,
  channel: CHANNEL_ID,
  blocks: slackMessages,
};

Example

https://github.com/chi0307/transform-chatbot-message/tree/master/example

GUI

可搭配網頁產生 json

https://chi0307.github.io/side/chatbot-json-toolbox

文字訊息

{
  "type": "text",
  "text": String
}

圖片訊息

{
  "type": "image",
  "imageUrl": String,
  "previewImageUrl": String
}

影片訊息

{
  "type": "video",
  "videoUrl": String,
  "previewImageUrl": String
}

Slack 會用網址方式呈現影片訊息

聲音訊息

{
  "type": "audio",
  "audioUrl": String,
  "duration": Number
}

Slack 會用網址方式呈現聲音訊息

按鈕訊息

可以使用 flex 結構

{
  "type": "button",
  "altText": String,
  "title"?: String,
  "text": String,
  "buttons": Array<Action>
}

Slack 會分解成不同的結構組合成按鈕訊息

輪播訊息

可以使用 flex 結構

{
  "type": "carousel",
  "altText": String,
  "columns": Array<{
    "title": String,
    "text": String,
    "imageUrl"?: String,
    "buttons": Array<Action>,
  }>
}

如果 column.title 、 column.text 只填寫其中一個的時候，會自動填補到 Line text 與 FB title

Slack 會分解成不同的結構組合成輪播訊息

按鈕事件

回覆訊息 (PostBack)

{
  "type": "postback",
  "title": String,
  "data": String
}

打開網頁 (Url)

{
  "type": "url",
  "title": String,
  "url": String
}

打電話 (Phone)

{
  "type": "phone",
  "title": String,
  "number": String
}