Basic

Classic/VPC環境で利用できます。

チャットボット返答のレスポンスコンポーネントのうち、Basicコンポーネントについて説明します。

Basicコンポーネントは、次の3つの基本コンポーネントで構成されます。

Text
Image
Button (ButtonコンポーネントはQuick Buttonsコンポーネントを含みます)

上記のコンポーネントはそれぞれの特徴に合わせてチャットボットのレスポンスをチャットボットビルダで設定することができ、チャットボットビルダで設定したレスポンス結果を JSON形式で返します。

Textコンポーネント

Textコンポーネントは、タイトル(Title)、サブタイトル(Sub Title)、説明(Description)、URLで構成されます。

Textコンポーネントのレスポンスボディ

Textコンポーネントのレスポンスボディは次の通りです。

フィールド	タイプ	必須の有無	説明
`type`	String	-	コンポーネントのタイプ Textコンポーネントの場合、3つの基本コンポーネントのうち`text`のみ使用可能
`title`	String	-	コンポーネントのタイトル太字の短文テキスト(Short bold text)
`subTitle`	String	-	下位コンポーネントのタイトルグレーの短文テキスト(Short gray text)
`data`	Object	-	テキスト(Text)コンポーネントの構成情報
`data.description`	String	-	コンポーネントの詳細説明長文のテキスト
`data.url`	String	-	コンポーネントのハイパーリンク URL <例> `ncloud.com`
`data.urlAlias`	String	-	コンポーネントハイパーリンク URLのエイリアスハイパーリンクが表示されるテキスト <例> `NAVERクラウド`
`data.action`	Action	-	コンポーネントアクション(Action)情報各アクションの詳細内容が異なるので、詳細はActionコンポーネントを参照

Textコンポーネントのレスポンス例

Textコンポーネントのレスポンスのサンプルコードは次の通りです。

{ 
    "type": "text", 
    "title": "optional, short bold text", 
    "subTitle": "optional, short gray text",
    "data" : 
        {
            "description" : "optional, a long text content",
            "url" : "optional, a hyperlink at the bottom of description",
            "urlAlias" :"optional, hyperlink show this alias",
            "action": {Action Data} 
        }
}

Imageコンポーネント

Imageコンポーネントは、画像とともにタイトル(Title)、サブタイトル(Sub Title)、説明(Description)、URLで構成されます。

Imageコンポーネントのレスポンスボディ

Imageコンポーネントのレスポンスボディは次の通りです。

フィールド	タイプ	必須の有無	説明
`type`	String	-	コンポーネントのタイプ Imageコンポーネントの場合、3つの基本コンポーネントのうち`image`のみ使用可能
`title`	String	-	コンポーネントのタイトル太字の短文テキスト(Short bold text)
`subTitle`	String	-	下位コンポーネントのタイトルグレーの短文テキスト(Short gray text)
`data`	Object	-	画像(Image)コンポーネントの構成情報
`data.imageUrl`	String	-	画像の URL `https`形式の URLが必要
`data.alt`	String	-	画像説明のツールチップ画像にマウスオーバーすると表示される短いヒント
`data.imagePosition`	String	-	画像の位置 `top`(デフォルト) \| `bottom` \| `left` \| `right` `top`: 一番上 `bottom`: 一番下 `left`: 一番左 `right`: 一番右
`data.description`	String	-	画像の詳細説明
`data.url`	String	-	画像のハイパーリンク URL `description`の下に位置 <例> `ncloud.com`
`data.urlAlias`	String	-	画像ハイパーリンク URLのエイリアスハイパーリンクが表示されるテキスト <例> `NAVERクラウド`
`data.action`	Action	-	コンポーネントアクション(Action)情報各アクションの詳細内容が異なるので、詳細はActionコンポーネントを参照

Imageコンポーネントのレスポンス例

Imageコンポーネントのレスポンスのサンプルコードは次の通りです。

{
    "type": "image",
    "title": "optional, short bold text",
    "subTitle": "optional, short gray text",
    "data" : 
    {
        "imageUrl" : "https://ssl.pstatic.net/CloudFunctions.png",
        "alt" : "optional, short hint show when hover on image",
        "imagePosition" : "top",
        "description" : "optional, details info of image",
        "url" : "optional, a hyperlink at the bottom of description",
        "urlAlias" : "optional, hyperlink show this alias",
        "action": {Action Data}
    }
}

Buttonコンポーネント

Buttonコンポーネントは、画像とともにタイトル(Title)、サブタイトル(Sub Title)、説明(Description)、URLでボタン(Button)を構成します。Quick Buttonコンポーネントも Buttonコンポーネントに含まれます。

Buttonコンポーネントのレスポンスボディ

Buttonコンポーネントのレスポンスボディは次の通りです。

フィールド	タイプ	必須の有無	説明
`type`	String	-	コンポーネントのタイプ Buttonコンポーネントの場合、3つの基本コンポーネントのうち`button`のみ使用可能
`title`	String	-	コンポーネントのタイトルボタンに表示される太字の短文テキスト(Short bold text)
`subTitle`	String	-	下位コンポーネントのタイトルグレーの短文テキスト(Short gray text)
`data`	String	-	ボタン(Button)コンポーネントの構成情報
`data.type`	String	-	ボタンの種類 `basic` \| `imageButton` `basic`: 基本ボタン `imageButton`: 画像で構成されたボタン
`data.iconUrl`	String	-	ボタンアイコン URL `https`形式の URLが必要
`data.action`	Action	-	コンポーネントアクション(Action)情報各アクションの詳細内容が異なるので、詳細はActionコンポーネントを参照

Buttonコンポーネントのレスポンス例

Buttonコンポーネントのレスポンスのサンプルコードは次の通りです。

Basic Button

Basic Buttonのレスポンスのサンプルコードは次の通りです。

{
    "type": "button",
    "title": "optional, text show on button",
    "subTitle": "optional, short gray text",
    "data" : 
    {
        "type": "basic",
        "iconUrl" : "https://ssl.pstatic.net/CloudFunctions.png",
        "action": {Action Data}
    }
}

Image Button

Image Buttonのレスポンスのサンプルコードは次の通りです。

{
    "type": "button",
    "title": "optional, text show on button",
    "subTitle": "optional, short gray text",
    "data" : 
    {
        "type": "imageButton",
        "iconUrl" : "https://ssl.pstatic.net/CloudFunctions.png",
        "action": {Action Data}
    }
}

Quick Buttonsコンポーネント

Quick Buttonsコンポーネントを説明します。チャット画面下部にあるグループ固定ボタンです。buttonコンポーネントに含まれます。

Quick Buttonsのレスポンスボディ

Quick Buttonsnのレスポンスボディは次の通りです。

フィールド	タイプ	必須の有無	説明
`type`	String	-	コンポーネントのタイプ Buttonコンポーネントの場合、3つの基本コンポーネントのうち`button`のみ使用可能
`title`	String	-	コンポーネントの名前
`data`	Object	-	コンポーネントの構成情報
`data.type`	String	-	コンポーネントのタイプ `text` \| `image` \| `button` \| `template` \| `carousel` \| `flex` \| `line_sticker` \| `lineworks_sticker` \| 各コンポーネントの詳細はBasicコンポーネントの詳細情報、Compositeコンポーネントの詳細情報、Flexコンポーネントの詳細情報を参照
`data.action`	Object	-	コンポーネントのアクション(Action)情報
`data.action.type`	String	-	コンポーネントアクションのタイプ `postback` \| `utterance` \| `link` \| `phone` \| `welcome` `postback`: Postbackコンポーネントを参照 `utterance`: Utteranceコンポーネントを参照 `link`: Linkコンポーネントを参照 `phone`: Phoneコンポーネントを参照 `welcome`: Welcomeコンポーネントを参照
`data.action.data`	Object	-	コンポーネントアクション(Action)の詳細情報各アクションの詳細内容が異なるので、詳細はActionコンポーネントを参照
`data.action.data.postback`	String	-	チャットボットにポストバックしたテキスト
`data.action.data.displayText`	String	-	チャットボットに表示されるクイックボタン(Quick Button)の名前
`data.action.data.postbackFull`	String	-	クイックボタン実行のためにチャットボットにポストバックしたテキスト

Quick Buttonsのレスポンス例

Quick Buttonsnのレスポンスのサンプルコードは次の通りです。

{
"quickButtons": [
    {
      "type": "button",
      "title": "Button Name",
      "data": {
        "type": "basic",
        "action": {
          "type": "postback",
          "data": {
            "postback": "UnexpiredForm\u241e47954\u241e0",
            "displayText": "Button Name",
            "postbackFull": "_T_UnexpiredForm\u241e47954\u241e0" 
          }
        }
      }
    }
  ]
}