@chi0307/transform-chatbot-message

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
}

欄位	說明	Line 限制	FB 限制	Slack 限制
text	文字訊息	5000 字元	2000 字元	3000 字元

---

圖片訊息

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

欄位	說明	Line 限制	FB 限制	Slack 限制
imageUrl	圖片網址	網址長度 1000 字元 HTTPS over TLS 1.2 or later JPEG or PNG Max file size: 10 MB	Max file size: 25 MB fetched within 10 seconds	網址長度 3000 字元
previewImageUrl	預覽圖片網址	網址長度 1000 字元 HTTPS over TLS 1.2 or later JPEG or PNG Max file size: 1 MB	不適用	不適用

---

影片訊息

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

欄位	說明	Line 限制	FB 限制	Slack 限制
videoUrl	影片網址	網址長度 1000 字元 HTTPS over TLS 1.2 or later mp4 Max file size: 200 MB	Max file size: 25 MB fetched within 75 seconds	網址長度 3000 字元
previewImageUrl	影片縮圖網址	網址長度 1000 字元 HTTPS over TLS 1.2 or later JPEG or PNG Max file size: 1 MB	不適用	不適用

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

---

聲音訊息

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

欄位	說明	Line 限制	FB 限制	Slack 限制
audioUrl	聲音網址	網址長度 1000 字元 HTTPS over TLS 1.2 or later m4a Max file size: 200 MB	Max file size: 25 MB fetched within 10 seconds	網址長度 3000 字元
duration	聲音長度	聲音檔案長度 (milliseconds)	不適用	不適用

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

---

按鈕訊息

可以使用 flex 結構

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

欄位	說明	Line 限制	FB 限制	Slack 限制
altText	預覽文字訊息	400 字元	不適用	不適用
title	訊息標題 (Optional)	40 字元 (Optional)	不適用	150 字元 (Optional)
text	訊息內文	160 字元	640 字元	3000 字元
buttons	按鈕事件陣列	最多 4 個	最多 3 個	最多 5 個

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

---

輪播訊息

可以使用 flex 結構

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

欄位	說明	Line 限制	FB 限制	Slack 限制
altText	預覽文字訊息	400 字元	不適用	不適用
columns	輪播陣列	最多 10 個	最多 10 個	無上限
column.title	單一區塊標題	40 字元 (Optional)	80 字元	150 字元
column.text	單一區塊內文	120 字元 (no image or title) 60 字元 (message with an image or title)	80 字元 (Optional)	3000 字元
column.imageUrl	單一區塊圖片 (Optional)	網址長度 1000 字元 HTTPS over TLS 1.2 or later JPEG or PNG Aspect ratio: 1:1.51 Max width: 1024px Max file size: 10 MB (Optional)	(Optional)	(Optional)
column.buttons	按鈕事件陣列	最多 3 個	最多 3 個	最多 5 個

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

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

---

按鈕事件

回覆訊息 (PostBack)

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

欄位	說明
title	按鈕文字與使用者顯示回傳文字
data	回覆內容，需使用 webhook 接收並處理

---

打開網頁 (Url)

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

欄位	說明
title	按鈕文字
url	點擊後開啟網頁

---

打電話 (Phone)

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

欄位	說明	範例
title	按鈕文字
url	點擊後打電話 電話格式必須是 +<COUNTRY_CODE><PHONE_NUMBER>	[phone]