WebChat V2のメッセージフォーマット

text:

{
  "web_chat_v2": {
    "texts": [
      "text1",
      "text2",
      ...
    ],
    "message_type": 0,  // テキスト形式を示す
    "type": "message"
  },
  "platform": "web_chat_v2"
}

card

{
  "web_chat_v2": {
    "type": "message",
    "cards": [
      {
        "subtitle": "subtitle",
        "src": "image url",
        "buttons": [
          {
            "btn_text": "aaa",
            "post_back": "aaa"  // メッセージを送信
          },
          {
            "btn_text": "bbb",
            "open_url": "https://r.obotai.com/J9XIArSc"  // リンクを開く
          },
          ...
        ],
        "title": "title"
      }
    ],
    "message_type": 1  // カード形式を示す
  },
  "platform": "web_chat_v2"
}

quick_replies

{
  "web_chat_v2": {
    "message_type": 2,  // クイックリプライ形式を示す
    "quick_replies": [
      {
        "title": "title",
        "replies": [
          "reply1",
          "reply2",
          "reply3",
          "reply4"
        ]
      }
    ],
    "type": "message"
  },
  "platform": "web_chat_v2"
}

image

{
  "platform": "web_chat_v2",
  "web_chat_v2": {
    "type": "message",
    "message_type": 3,  // 画像形式を示す
    "image": "image url"
  }
}

Custom Payload

構造

{
  "platform": "web_chat_v2",
  "web_chat_v2": {
    "type": "message",
    "attachment_layout": "list",
    "attachments": [<Child>, <Child>, ...]
  }
}

Child (Container, Text, Button, Image, Form)


Container:
{
  "elementType": "container",  // required
  "className": "",  // optional
  "children": []  // required
}

Text:
{
  "elementType": "text",  // required
  "className": "",  // optional
  "text": ""  // required
}

Button:
{
  "elementType": "button",  // required
  "className": "",  // optional
  "btnText": "", // required
   // actionは以下三つから選択
  "action": {
    "name": "sendMessage",
    "data": ""
  },
  "action": {
    "name": "sendEvent",
    "data": {
      "name": "eventName",
      "data": {}
    }
  },
  "action": {
    "name": "openUrl",
    "data": {
      "url": ""
    }
  }
}

Image:
{
  "elementType": "image",  // required
  "className": "",  // optional
  "src": "",
  "alt": ""
}

Form:
{
  "elementType": "form",  // required
  "className": "",  // optional
  "formName": "",  // required
  "title": "",  // required
  "submitText": "",  // optional
  "contents": [<Content>, <Content>, ...],  // required
}

Form Content (Input, Radio, CheckBox, Select, Textarea)

// ↑上記の Child も利用可能

Input:
{
  "elementType": "input",  // required
  "inputType": "",  // required
  "keyName": "",  // required
  "placeholder",  // optional
}

Radio:
{
  "elementType": "radio",  // required
  "keyName": "",  // required,
  "options": [  // required
    { "text": "", "value": "" },
    ...
  ]
}

checkbox:
{
  "elementType": "checkbox",  // required
  "keyName": "",  // required,
  "options": [  // required
    { "text": "", "value": "" },
    ...
  ]
}

select: 
{
  "elementType": "select",  // required
  "keyName": "",  // required,
  "options": [  // required
    { "text": "", "value": "" },
    ...
  ]
}

textarea:
{
  "elementType": "textarea",  // required
  "keyName": "",  // required
  "placeholder": ""
}

フォームの作成及び変換ルール

  1. formNameとkeyNameは英数字とアンダースコア(_)とハイフン(-)の組み合わせにしてください

  2. 利用者がフォーム送信をすると、イベント名が {formName} になっているイベントが送信されます。CMSで予め対応するインテントを作ることで、当イベントを受け取ることができます。Webhookを用いてフォームデータを扱うことも可能です。

  3. 同時に送信されるイベントデータは、{ "{keyName}": {value}, ... } の形のJSONデータになります。