一部のサービスと機能は名前を変更中です。生成ハンドブックとフロー機能も、単一の統合コンソールに移行されます。詳しくは、こちらをご覧ください。

Dialogflow CX Messenger のフルフィルメント

カスタムカードのフルフィルメントを作成するときに、テキストレスポンスとカスタムペイロードを作成できます。テキストレスポンスは書式なしテキストと Markdown エージェントレスポンスに使用され、カスタムペイロードはリッチレスポンスに使用されます。すべてのレスポンスタイプのカスタムペイロード形式には、次のような基本的な構造があります。

{
  "richContent": [
    [
      {
        "type": "type-id",
        ...
      },
      {
        "type": "type-id",
        ...
      }
    ],
    [
      {
        "type": "type-id",
        ...
      },
      {
        "type": "type-id",
        ...
      }
    ]
  ]
}

richContent 値では、1 つの外部配列と複数の内部配列を使用できます。内部配列内のレスポンスは、1 つのビジュアルカードにバインドされます。外部配列に複数の内部配列が含まれている場合、複数のカードが表示されます（内部配列ごとに 1 つのカードが表示されます）。

残りのサブセクションでは、カスタムペイロード用に構成できるレスポンスタイプについて説明します。

テキスト返信

Dialogflow Messenger のテキストのスクリーンショット

テキストレスポンスは書式なしテキストとマークダウンをサポートします。以下に Markdown の例を示します。

*Italic*
**Bold**
# Title
[Link text](Link URL)
![](Image URL)

注: Markdown で画像を有効にするには、それに応じて url-allowlist 属性を指定する必要があります。

テーブル:

Header 1 | Header 2
-------- | --------
Cell 1   | Cell 2

情報レスポンスタイプ

Dialogflow Messenger の情報タイプのスクリーンショット

情報レスポンスタイプは、ユーザーがクリックまたはタップすることができるシンプルなタイトルカードです。

次の表に、フィールドの意味を示します。

名前	型	説明
`type`	`string`	レスポンスタイプ: "info"
`title`	`string`	カードタイトル
`subtitle`	`string`	カードのサブタイトル
`image`	`object`	画像
`image.rawUrl`	`string`	画像の公開 URL
`anchor`	`object`	要素のクリック時にフォローするアンカー
`anchor.href`	`string`	アンカーの URL
`anchor.target`	`string`	アンカーのターゲット。デフォルトは `_blank` です

次に例を示します。

{
  "richContent": [
    [
      {
        "type": "info",
        "title": "Info item title",
        "subtitle": "Info item subtitle",
        "image": {
          "rawUrl": "https://example.com/images/logo.png"
        },
        "anchor": {
          "href": "https://example.com"
        }
      }
    ]
  ]
}

説明レスポンスタイプ

Dialogflow Messenger の説明タイプのスクリーンショット

説明レスポンスタイプは複数行のテキストを含む情報カードです。

次の表に、フィールドの意味を示します。

名前	型	説明
`type`	`string`	レスポンスタイプ: "description"
`title`	`string`	カードタイトル
`text`	`array<string>`	各文字列が新しい行に表示される文字列配列

次に例を示します。

{
  "richContent": [
    [
      {
        "type": "description",
        "title": "Description title",
        "text": [
          "This is text line 1.",
          "This is text line 2."
        ]
      }
    ]
  ]
}

画像レスポンスタイプ

Dialogflow Messenger の画像タイプのスクリーンショット

画像レスポンスタイプは、ユーザーがクリックまたはタップできる画像カードです。レスポンスタイプは、画像のソースをアンカーリンクとして、短い説明テキストとアイコンとともに追加できる参照チップをサポートしています。

次の表に、フィールドの意味を示します。

名前	型	説明
`type`	`string`	レスポンスタイプ: "image"
`rawUrl`	`string`	画像の公開 URL
`accessibilityText`	`string`	画像の代替テキスト
`reference.text`	`string`	参照チップに表示するテキスト
`reference.anchor.href`	`string`	参照チップの URL
`reference.anchor.target`	`string`	参照チップ内のアンカーのターゲット。デフォルトは `_blank`
`reference.image.rawUrl`	`string`	参照チップに表示される画像

次に例を示します。

{
  "richContent": [
    [
      {
        "type": "image",
        "rawUrl": "https://example.com/images/logo.png",
        "accessibilityText": "Example logo",
        "reference": {
          "text": "Logo",
          "anchor": {
            "href": "https://example.com/images/logo.png"
          },
          "image": {
            "rawUrl": "https://example.com/images/logo_small.png"
          }
        }
      }
    ]
  ]
}

次の CSS 変数を指定できます。

プロパティ	入力ポリシー	デフォルト値	説明
`df-messenger-image-border-radius`	省略可	8px	画像の枠線の半径

動画レスポンスタイプ

Dialogflow Messenger の動画タイプのスクリーンショット

動画レスポンスタイプは、Messenger 内で直接再生される URL からの直接動画、または動画へのリンクのいずれかである動画要素をレンダリングします。

名前	型	説明
`type`	`string`	レスポンスタイプ: "video"
`title`	`string`	動画のタイトル（省略可）
`source`	`object`	動画のソース
`source.type`	`string`	動画ソースのタイプ（`link` または `raw`）
`source.anchor`	`object`	要素のクリック時にフォローするアンカー
`source.embeddedPlayer`	`string`	`link` タイプの動画は、プレーヤーのウェブページへのリンクではなく、埋め込むことができます。既知のプレーヤーセットに対してのみ実装され、`youtube` がサポートされます。
`source.thumbnail`	`object`	`anchor` に表示するサムネイル
`source.thumbnail.rawUrl`	`string`	サムネイルの URL
`source.rawUrl`	`string`	`raw` タイプの動画の URL

次に例を示します。

{
  "richContent": [
    [
      {
        "type": "video",
        "source": {
          "type": "link",
          "anchor": {
            "href": "https://www.youtube.com/watch?v=cNfINi5CNbY"
          }
        }
      }
    ]
  ]
}

次の CSS 変数を指定できます。

プロパティ	入力ポリシー	デフォルト値	説明
`df-messenger-video-width`	省略可	自動	動画の幅（`max-width\: 100%` によって制限）
`df-messenger-video-height`	省略可	自動	動画の高さ
`df-messenger-video-embed-width`	省略可	560px	埋め込み動画の幅（`max-width\: 100%` によって制限）
`df-messenger-video-embed-height`	省略可	315px	埋め込み動画の高さ
`df-messenger-video-border`	省略可	1px solid #e0e0e0	動画の枠線
`df-messenger-video-border-radius`	省略可	8px	動画の枠線の半径

ボタンレスポンスタイプ

ボタンレスポンスタイプは、ユーザーがクリックまたはタップできるアイコン付きの小さなボタンです。

次の表に、フィールドの意味を示します。

名前	型	説明
`type`	`string`	レスポンスタイプ: "button"
`icon`	`object`	ボタンのアイコン
`icon.type`	`string`	マテリアルアイコンライブラリのアイコン。デフォルトのアイコンは矢印
`icon.color`	`string`	色の 16 進数
`image`	`object`	ボタンの画像が `icon` よりも優先されます
`image.rawUrl`	`string`	画像の公開 URL
`mode`	`string`	省略可:「blocking」に設定すると、ユーザーがボタンをクリックするまでユーザー入力は無効になります
`text`	`string`	ボタンのテキスト
`anchor`	`object`	要素のクリック時にフォローするアンカー
`anchor.href`	`string`	アンカーの URL
`anchor.target`	`string`	アンカーのターゲット。デフォルトは `_blank` です
`event`	`object`	ボタンをクリックしたときにトリガーされる Dialogflow イベント。

次に例を示します。

{
  "richContent": [
    [
      {
        "type": "button",
        "icon": {
          "type": "chevron_right",
          "color": "#FF9800"
        },
        "mode": "blocking",
        "text": "Button text",
        "anchor": {
          "href": "https://example.com"
        },
        "event": {
          "event": ""
        }
      }
    ]
  ]
}

次の CSS 変数を指定できます。

プロパティ	入力ポリシー	デフォルト値	説明
`df-messenger-button-border`	省略可	なし	ボタンの枠線
`df-messenger-button-border-radius`	省略可	8px	ボタンの枠線の半径
`df-messenger-button-font-color`	省略可	#1f1f1f	ボタンのテキストの色
`df-messenger-button-font-family`	省略可	「Google Sans」、「Helvetica Neue」、Sans Serif	ボタンのフォントファミリー
`df-messenger-button-font-size`	省略可	14px	ボタンのフォントサイズ
`df-messenger-button-padding`	省略可	12px	ボタンのパディング
`df-messenger-button-icon-spacing`	省略可	12px	ボタンのアイコンとテキストの間のスペース
`df-messenger-button-icon-font-size`	省略可	24px	ボタンのアイコンのサイズ
`df-messenger-button-image-size`	省略可	24px	ボタン画像のサイズ
`df-messenger-button-image-offset`	省略可	0	ボタン画像のオフセット。負の値でパディングをオフセットできます
`df-messenger-button-text-align`	省略可	center	ボタンのテキストの配置
`df-messenger-button-text-wrap`	省略可	normal	`nowrap` を使用して複数行ボタンを禁止する

リストレスポンスタイプ

Dialogflow Messenger のリストタイプのスクリーンショット

リストレスポンスタイプは、ユーザーが複数の選択肢から選択できるカードです。

レスポンスには、list と divider のレスポンスタイプの配列が含まれます。次の表に、list タイプを示します。

名前	型	説明
`type`	`string`	レスポンスタイプ: "list"
`title`	`string`	オプションのタイトル
`subtitle`	`string`	オプションのサブタイトル
`event`	`object`	オプションをクリックしたときにトリガーされる Dialogflow イベント。
`anchor`	`object`	要素のクリック時にフォローするアンカー
`anchor.href`	`string`	アンカーの URL
`anchor.target`	`string`	アンカーのターゲット。デフォルトは `_blank` です
`image`	`object`	画像
`image.rawUrl`	`string`	画像の公開 URL

次の表に、divider タイプを示します。

名前	型	説明
`type`	`string`	レスポンスタイプ: "divider"

次に例を示します。

{
  "richContent": [
    [
      {
        "type": "list",
        "title": "List item 1 title",
        "subtitle": "List item 1 subtitle",
        "event": {
          "event": ""
        }
      },
      {
        "type": "list",
        "title": "List item 2 title",
        "subtitle": "List item 2 subtitle",
        "event": {
          "event": ""
        }
      }
    ]
  ]
}

次の CSS 変数を指定できます。

プロパティ	入力ポリシー	デフォルト値	説明
`df-messenger-list-padding`	省略可	16px	リスト要素のパディング
`df-messenger-list-inset`	省略可	0	要素間の境界の展開を制御する、リスト要素の追加の水平「インセット」（パディングに加えて）
`df-messenger-list-spacing`	省略可	10px	リスト要素間の垂直スペース
`df-messenger-list-border-bottom`	省略可	1px solid #e0e0e0	リスト要素間の枠線

アコーディオンレスポンスタイプ

Dialogflow Messenger のアコーディオンタイプのスクリーンショット

アコーディオンレスポンスタイプは、ユーザーがクリックまたはタップして展開 / 表示できる小さなカードです。

次の表に、フィールドの意味を示します。

名前	型	説明
`type`	`string`	レスポンスタイプ: "accordion"
`title`	`string`	アコーディオンのタイトル
`subtitle`	`string`	アコーディオンのサブタイトル
`image`	`object`	画像
`image.rawUrl`	`string`	画像の公開 URL
`text`	`string`	アコーディオンのテキスト

次に例を示します。

{
  "richContent": [
    [
      {
        "type": "accordion",
        "title": "Accordion title",
        "subtitle": "Accordion subtitle",
        "image": {
          "rawUrl": "https://example.com/images/logo.png"
        },
        "text": "Accordion text"
      }
    ]
  ]
}

候補ワードレスポンスタイプ

Dialogflow Messenger チップタイプのスクリーンショット

候補ワードレスポンスタイプは、クリック可能な候補ワードのリストをエンドユーザーに提供します。

次の表に、フィールドの意味を示します。

名前	型	説明
`type`	`string`	レスポンスタイプ: "chips"
`options`	`array<object>`	オプションのオブジェクト配列
`options[].mode`	`string`	省略可:「blocking」に設定すると、ユーザーがチップをクリックするまでユーザー入力は無効になります
`options[].text`	`string`	オプションのテキスト
`options[].image`	`object`	省略可: オプションの画像
`options[].image.rawUrl`	`string`	オプションの画像の公開 URL
`options[].anchor`	`object`	省略可: 要素のクリック時にフォローするアンカー
`options[].anchor.href`	`string`	アンカーの URL
`options[].anchor.target`	`string`	アンカーのターゲット。デフォルトは `_blank` です

次に例を示します。

{
  "richContent": [
    [
      {
        "type": "chips",
        "options": [
          {
            "mode": "blocking",
            "text": "Chip 1",
            "image": {
              "rawUrl": "https://example.com/images/logo.png"
            },
            "anchor": {
              "href": "https://example.com"
            }
          },
          {
            "text": "Chip 2",
            "image": {
              "rawUrl": "https://example.com/images/logo.png"
            },
            "anchor": {
              "href": "https://example.com"
            }
          }
        ]
      }
    ]
  ]
}

次の CSS 変数を指定できます。

プロパティ	入力ポリシー	デフォルト値	説明
`df-messenger-chips-spacing`	省略可	10px	前のメッセージまでのチップの上のスペース
`df-messenger-chips-border-color`	省略可	#e0e0e0	チップの枠線の色
`df-messenger-chips-border-color-hover`	省略可	#e0e0e0	カーソルを合わせるときのチップの枠線の色
`df-messenger-chips-border-radius`	省略可	999px	チップの枠線の半径
`df-messenger-chips-background`	省略可	白	チップの背景
`df-messenger-chips-background-hover`	省略可	rgba(68, 71, 70, 0.08)	カーソルを合わせるときのチップの背景
`df-messenger-chips-padding`	省略可	6px 16px	チップのパディング
`df-messenger-chips-font-color`	省略可	黒	チップのテキストの色
`df-messenger-chips-font-family`	省略可	「Google Sans」、「Helvetica Neue」、Sans Serif	チップのフォントファミリー
`df-messenger-chips-font-size`	省略可	14px	チップのテキストサイズ
`df-messenger-chips-font-weight`	省略可	normal	チップのフォントの太さ
`df-messenger-chips-font-weight-hover`	省略可	normal	カーソルを合わせるときのチップのフォントの太さ
`df-messenger-chips-box-shadow`	省略可	0 2px 2px 0 rgba(0, 0, 0, 0.24)	チップのボックスシャドウ
`df-messenger-chips-content-align`	省略可	flex-start	チップ内のコンテンツ（画像など）の垂直方向の配置
`df-messenger-chips-text-wrap`	省略可	nowrap	`normal` を使用して複数行チップを許可する

引用レスポンスのタイプ

Dialogflow Messenger の引用タイプのスクリーンショット

引用レスポンスのタイプは、クリック可能な引用リンクのリストをエンドユーザーに提供します。

次の表に、フィールドの意味を示します。

名前	型	説明
`type`	`string`	レスポンスタイプ: "match_citations"
`citations`	`array<object>`	引用オブジェクトの配列
`citations[].title`	`string`	引用のタイトル
`citations[].subtitle`	`string`	引用のサブタイトル（現在は無視）
`citations[].anchor`	`object`	要素のクリック時にフォローするアンカー
`citations[].anchor.href`	`string`	アンカーの URL
`citations[].anchor.target`	`string`	アンカーのターゲット。デフォルトは `_blank` です

次に例を示します。

{
  "richContent": [
    [
      {
        "type": "match_citations",
        "citations": [
          {
            "title": "Source 1",
            "subtitle": "",
            "anchor": {
              "href": "https://example.com/1"
            }
          },
          {
            "title": "Source 2",
            "subtitle": "",
            "anchor": {
              "href": "https://example.com/2"
            }
          }
        ]
      }
    ]
  ]
}

次の CSS 変数を指定できます。

プロパティ	入力ポリシー	デフォルト値	説明
`df-messenger-citations-spacing`	省略可	10px	前のメッセージまでの引用の上のスペース
`df-messenger-citations-message-display`	省略可	ブロック	引用の上のメモの表示を定義します。使用できる値は `block` または `none` です。
`df-messenger-citations-message-font-color`	省略可	#041e49	引用の上のメモのテキストの色
`df-messenger-citations-message-font-size`	省略可	12px	引用の上のメモのテキストの色
`df-messenger-citations-flex-direction`	省略可	行	引用の柔軟性のある方向のプロパティ。`row`（改行を含む水平方向）または `column`（垂直）を使用することをおすすめします
`df-messenger-citations-border-color`	省略可	#1a73e8	引用の枠線の色
`df-messeenger-citations-border-color-hover`	省略可	#1a73e8	カーソルを合わせるときの引用の枠線の色
`df-messenger-citations-border-radius`	省略可	4px	引用の枠線の半径
`df-messenger-citations-padding`	省略可	8px	引用のパディング
`df-messenger-citations-background`	省略可	白	引用の背景
`df-messenger-citations-background-hover`	省略可	rgba(68, 71, 70, 0.08)	カーソルを合わせるときの引用の背景
`df-messenger-citations-font-color`	省略可	#1a73e8	引用のテキストの色
`df-messenger-citations-font-family`	省略可	「Google Sans」、「Helvetica Neue」、Sans Serif	引用のフォントファミリー
`df-messenger-citations-font-size`	省略可	11px	引用のテキストサイズ
`df-messenger-citations-icon-font-size`	省略可	14px	引用のアイコンのテキストサイズ
`df-messenger-citations-font-weight`	省略可	normal	引用のフォントの太さ
`df-messenger-citations-font-weight-hover`	省略可	normal	カーソルを合わせるときの引用のフォントの太さ
`df-messenger-citations-icon-spacing`	省略可	4px	引用内のアイコンとテキストの間のスペース
`df-messenger-citations-box-shadow`	省略可	なし	引用のボックスシャドウ

ファイルレスポンスタイプ

Dialogflow Messenger のファイルタイプのスクリーンショット

ファイルレスポンスタイプは、ダウンロード可能なリンクを含むファイル要素のリストをレンダリングします。

次の表に、フィールドの意味を示します。

名前	型	説明
`type`	`string`	レスポンスタイプ: "files"
`files`	`array<object>`	ファイルオブジェクトの配列
`files[].name`	`string`	ファイル名
`files[].image`	`object`	ファイル画像
`files[].image.rawUrl`	`string`	画像ファイルの公開 URL
`files[].anchor`	`object`	ファイルをダウンロードするためのアンカー
`files[].anchor.href`	`string`	アンカーの URL
`files[].anchor.target`	`string`	アンカーのターゲット。デフォルトは `_blank` です

次に例を示します。

{
  "richContent": [
    [
      {
        "type": "files",
        "files": [
          {
            "name": "instructions.pdf",
            "image": {
              "rawUrl":
                  "https://fonts.gstatic.com/s/i/short-term/release/googlesymbols/cloud_download/default/24px.svg"
            },
            "anchor": {
              "href": "https://example.com/instructions.pdf"
            }
          },
          {
            "name": "data.csv",
            "image": {
              "rawUrl":
                  "https://fonts.gstatic.com/s/i/short-term/release/googlesymbols/csv/default/24px.svg"
            },
            "anchor": {
              "href": "https://example.com/data.csv"
            }
          }
        ]
      }
    ]
  ]
}

次の CSS 変数を指定できます

プロパティ	入力ポリシー	デフォルト値	説明
`df-messenger-files-spacing`	省略可	10px	前のメッセージまでのファイルの上のスペース
`df-messenger-files-distance`	省略可	8px	リスト内のファイル間の距離
`df-messenger-files-flex-direction`	省略可	行	ファイルの柔軟性のある方向のプロパティ。`row`（改行を含む水平方向）または `column`（垂直）を使用することをおすすめします
`df-messenger-files-background`	省略可	白	ファイルの背景
`df-messenger-files-border`	省略可	1px solid #e0e0e0	ファイルの枠線
`df-messenger-files-border-radius`	省略可	999px	ファイルの枠線の半径
`df-messenger-files-box-shadow`	省略可	0 2px 2px 0 rgba(0, 0, 0, 0.24)	ファイルのボックスシャドウ
`df-messenger-files-padding`	省略可	6px 16px	ファイルのパディング
`df-messenger-files-font-color`	省略可	#1f1f1f	ファイルのテキストの色
`df-messenger-files-font-family`	省略可	「Google Sans」、「Helvetica Neue」、Sans Serif	ファイルのフォントファミリー
`df-messenger-files-font-size`	省略可	14px	ファイルのテキストサイズ
`df-messenger-files-font-weight`	省略可	normal	ファイルのフォントの太さ
`df-messenger-files-background-hover`	省略可	白	カーソルを合わせたときのファイルの背景
`df-messenger-files-border-hover`	省略可	1px solid #e0e0e0	カーソルを合わせたときのファイルの枠線
`df-messenger-files-font-weight-hover`	省略可	normal	カーソルを合わせるときのファイルのフォントの太さ
`df-messenger-files-image-offset`	省略可	0 0 0 -8px	左側の画像のオフセット
`df-messenger-files-image-size`	省略可	18px	左側の画像のサイズ
`df-messenger-files-text-spacing`	省略可	8px	左側の画像テキストと右側のテキストアイコンとの間の距離
`df-messenger-files-icon-offset`	省略可	0 -8px 0 0	右側のダウンロードアイコンのオフセット
`df-messenger-files-icon-size`	省略可	18px	右側のダウンロードアイコンのサイズ
`df-messenger-files-icon-font-color`	省略可	#444746	右側のダウンロードアイコンの色

HTML レスポンスタイプ

Dialogflow Messenger の HTML タイプのスクリーンショット

HTML レスポンスタイプは、エンドユーザーに HTML メッセージを提供します。

次の表に、フィールドの意味を示します。

名前	型	説明
`type`	`string`	レスポンスタイプ: "html"
`html`	`string`	メッセージのテキストコンテンツ。HTML をサポートします

サポートされている HTML タグ:

a - アンカー要素（ハイパーリンクの作成に使用）
b - 太字要素（テキストの太字表記に使用）
i - 斜体要素（テキストの斜体表記に使用）
u - 下線要素（テキストの下線表記に使用）
h1 - 見出し 1 要素（ページのメイン見出しに使用）
h2 - 見出し 2 要素（小見出しに使用）
h3 - 見出し 3 要素（サブ小見出しに使用）
p - 段落要素（テキストの段落の作成に使用）
br - 改行要素（段落内での改行の作成に使用）
table - テーブル要素（テーブルの作成に使用）
tr - テーブル行要素（テーブル内での行の作成に使用）
thead - テーブルヘッダー要素（テーブル内でのヘッダーの作成に使用）
th - テーブルのヘッダーデータまたはセル要素（テーブルのヘッダー行内でのセルの作成に使用）
tbody - テーブルの本文要素（テーブル内での本文の作成に使用）
td - テーブルデータまたはセル要素（テーブル行内でのセルの作成に使用）
ul - 箇条書き要素（箇条書きの作成に使用）
ol - 順序付きリスト要素（番号付きリストの作成に使用）
li - リストアイテム要素（リスト内でのアイテムの作成に使用）
img - 画像要素（画像の表示に使用。HTML のカスタマイズの url-allowlist もご覧ください）
div - コンテナ要素
span - インラインコンテナ要素

次に例を示します。

{
  "richContent": [
    [
      {
        "type": "html",
        "html": "<b>Bold text</b> <i>Italic text</i> <u>Underlined text</u>"
      }
    ]
  ]
}

HTML とマークダウンのスタイル設定

アンカー要素（HTML a 要素と Markdown リンク）には、次の CSS 変数を指定できます。

プロパティ	入力ポリシー	デフォルト値	説明
`df-messenger-link-decoration`	省略可	下線	リンク要素の修飾
`df-messenger-link-font-color`	省略可	#0b57d0	未訪問のリンク要素のフォント色
`df-messenger-link-visited-font-color`	省略可	#0b57d0	訪問済みリンク要素のフォント色
`df-messenger-link-hover-font-color`	省略可	#0b57d0	リンク要素にカーソルを合わせたときのフォント色
`df-messenger-link-background`	省略可	透明	リンク要素の背景
`df-messenger-link-padding`	省略可	0	リンク要素のパディング
`df-messenger-link-border`	省略可	なし	リンク要素の枠線
`df-messenger-link-border-radius`	省略可	0	リンク要素の枠線の半径

テーブル要素（HTML table 要素とマークダウンテーブル）には、次の CSS 変数を指定できます。

プロパティ	入力ポリシー	デフォルト値	説明
`df-messenger-table-font-size`	省略可	14px	テーブル要素内のテキストサイズ
`df-messenger-table-font-color`	省略可	#1f1f1f	テーブル要素内のテキストの色
`df-messenger-table-align`	省略可	左	テーブルセル内のテキストの配置
`df-messenger-table-padding`	省略可	0	テーブルセル内のパディング
`df-messenger-table-border-collapse`	省略可	個別	テーブルの border collapse モード、`separate` を使用して `border-radius` を有効にする
`df-messenger-table-border-radius`	省略可	0	テーブルの枠線の半径
`df-messenger-table-header-border-radius`	省略可	0	テーブルヘッダーの枠線の半径
`df-messenger-table-border-top`	省略可	なし	テーブル行の上の枠線
`df-messenger-table-border-top-first`	省略可	なし	最初のテーブル行の上の枠線
`df-messenger-table-border-bottom`	省略可	なし	テーブル行の下の枠線
`df-messenger-table-border-bottom-last`	省略可	なし	最後のテーブル行の下の枠線
`df-messenger-table-border-left`	省略可	なし	テーブルセルの左の枠線
`df-messenger-table-border-left-first`	省略可	なし	行内の最初のテーブルセルの左の枠線
`df-messenger-table-border-right`	省略可	なし	テーブルセルの右の枠線
`df-messenger-table-border-right-last`	省略可	なし	行内の最後のテーブルセルの右の枠線
`df-messenger-table-background`	省略可	透明	テーブル行の背景
`df-messenger-table-even-background`	省略可	透明	偶数番号のテーブル行の背景
`df-messenger-table-odd-background`	省略可	透明	奇数番号のテーブル行の背景
`df-messenger-table-header-font-size`	省略可	14px	テーブルヘッダー要素内のテキストサイズ
`df-messenger-table-header-font-weight`	省略可	太字	テーブルヘッダー要素内のフォントウェイト
`df-messenger-table-header-font-color`	省略可	#1f1f1f	テーブルヘッダー要素内のテキストの色
`df-messenger-table-header-align`	省略可	左	テーブルヘッダーセル内のテキストの配置
`df-messenger-table-header-padding`	省略可	0	テーブルヘッダーセル内のパディング
`df-messenger-table-header-border-top`	省略可	なし	テーブルヘッダー行の上の枠線
`df-messenger-table-header-border-bottom`	省略可	なし	テーブルヘッダー行の下の枠線
`df-messenger-table-header-border-left`	省略可	なし	テーブルヘッダー行内のセルの左の枠線
`df-messenger-table-header-border-left-first`	省略可	なし	テーブルヘッダー行内の最初のセルの左の枠線
`df-messenger-table-header-border-right`	省略可	なし	テーブルヘッダー行内のセルの右の枠線
`df-messenger-table-header-border-right-last`	省略可	なし	テーブルヘッダー行の最後のセルの右の枠線
`df-messenger-table-header-background`	省略可	透明	テーブルヘッダー行の背景

カスタムテンプレートレスポンスタイプ

Dialogflow Messenger カスタムテンプレートタイプのスクリーンショット

カスタムテンプレートレスポンスタイプは、お客様のウェブサイトで定義されたカスタム要素をレンダリングします。要素はカード内に配置されず、常に単独で表示されます。

次の表に、フィールドの意味を示します。

名前	型	説明
`type`	`string`	レスポンスタイプ: "custom_template"
`name`	`string`	カスタム要素の名前
`payload`	`Object`	カスタム要素に渡すペイロード

次に例を示します。

{
  "richContent": [
    [
      {
        "type": "custom_template",
        "name": "custom-element-example",
        "payload": {
          "text": "Hello World"
        }
      }
    ]
  ]
}

ウェブサイトでは、レスポンスの name フィールドに記載されている名前と完全に一致する名前でカスタム要素を登録する必要があります。payload フィールドは、構築後（ただし、connectedCallback の前）に dfPayload としてカスタム要素に渡されます。このフィールドには任意の JSON を含めることができます。また、dfResponseId が要素に渡されます。

この例のレスポンスを使用したカスタム要素の実装例を次に示します。

class CustomElementExample extends HTMLElement {
  constructor() {
    super();
    // The `dfPayload` field will be provided before `connectedCallback` is
    // being called.
    this.dfPayload = null;
    // The `dfResponseId` field will be provided before `connectedCallback` is
    // being called.
    this.dfResponseId = null;
    // It is not strictly required but recommended to contain the custom
    // element in a shadow root.
    // https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot
    this.renderRoot = this.attachShadow({mode: 'open'});
  }

  /** Web component Lifecycle method. */
  connectedCallback() {
    const div = document.createElement('div');

    // The `.text` must match the payload's structure in `richContent.payload`.
    div.innerText = this.dfPayload.text;

    this.renderRoot.appendChild(div);
  }
}

(function() {
  // Registers the element. This name must match the name in
  // `richContent.payload`.
  customElements.define('custom-element-example', CustomElementExample);
})();

レスポンスタイプの組み合わせ

Dialogflow Messenger のカスタムカードのスクリーンショット

Dialogflow CX Messenger のリッチメッセージ要素を使用すると、要件に合わせてカスタムカードを作成できます。

フルフィルメントセクションに記載されている要素の一部を使用した例を次に示します。

{
  "richContent": [
    [
      {
        "type": "image",
        "rawUrl": "https://example.com/images/logo.png",
        "accessibilityText": "Dialogflow across platforms"
      },
      {
        "type": "info",
        "title": "Dialogflow",
        "subtitle": "Build natural and rich conversational experiences",
        "anchor": {
          "href": "https://cloud.google.com/dialogflow/docs"
        }
      },
      {
        "type": "chips",
        "options": [
          {
            "text": "Case Studies",
            "anchor": {
              "href": "https://cloud.google.com/dialogflow/case-studies"
            }
          },
          {
            "text": "Docs",
            "anchor": {
              "href": "https://cloud.google.com/dialogflow/docs"
            }
          }
        ]
      }
    ]
  ]
}

次の CSS 変数を指定できます。

プロパティ	入力ポリシー	デフォルト値	説明
`df-messenger-card-background`	省略可	白	カスタムカードの背景
`df-messenger-card-padding`	省略可	16px	カスタムカード内の要素のパディング
`df-messenger-card-border`	省略可	1px solid #e0e0e0	カスタムカードの枠線
`df-messenger-card-border-radius`	省略可	8px	カスタムカードの枠線の半径
`df-messenger-card-border-top-left-radius`	省略可	8px	カスタムカードの左上の枠線の半径
`df-messenger-card-border-top-right-radius`	省略可	8px	カスタムカードの左上の枠線の半径
`df-messenger-card-border-bottom-left-radius`	省略可	8px	カスタムカードの左下の枠線の半径
`df-messenger-card-border-bottom-right-radius`	省略可	8px	カードの右下の枠線の半径
`df-messenger-card-stack-border-top-left-radius`	省略可	8px	連続するカスタムカードの左上の枠線の半径が、左上の半径をオーバーライドします
`df-messenger-card-stack-border-top-right-radius`	省略可	8px	連続するカスタムカードの右上の枠線の半径は、右上の半径をオーバーライドします
`df-messenger-card-stack-border-bottom-left-radius`	省略可	8px	連続するカスタムカードの左下の枠線の半径は、左下の半径をオーバーライドします
`df-messenger-card-stack-border-bottom-right-radius`	省略可	8px	連続するカスタムカードの右下の枠線の半径は右下の半径をオーバーライドします
`df-messenger-card-box-shadow`	省略可	0 2px 2px 0 rgba(0, 0, 0, 0.24)	カスタムカードのボックスシャドウ

ハンドブックツールのリッチコンテンツ

ハンドブックツールを使用して、リッチコンテンツを Dialogflow CX Messenger に送信できます。

ステップ 1: エージェントに addRichContent ツールを作成する

次のデータを使用して、addRichContent と呼ばれる関数ツールを作成します。

ツールの入力:

properties: {}
type: object

ツールの出力:

properties:
  status:
    type: string
  reason:
    type: string
type: object

ステップ 2: エージェントにこのツールの使用方法を伝える

手順と例で、エージェントにツールの使用方法を伝えます。

たとえば、次のようなものを手順に追加します。

-  Greet  the  user
-  Ask  the  user  what  their  favorite  color  is.
   At  the  same  time  run  ${TOOL:  addRichContent}  to  display  buttons
   for  blue,  red,  yellow,  and  green.
-  Thank  the  user

たとえば、次のような例を作成します。

例のスクリーンショット

なお、リッチコンテンツの構文は、フローベースの仮想エージェントでカスタムペイロードを返す場合に使用する構文と同じです。

ステップ 3: JavaScript を定義する

df-messenger をホストするページのコードで、df-messenger にリッチコンテンツをレンダリングするよう指示する関数を定義した JavaScript コードを作成します。また、その関数を df-messenger に登録する必要があります。これにより、仮想エージェントが必要なときに関数を実行できるようにします。

変数 dfMessenger が宣言され、df-messenger のインスタンスを指していることを確認します。

以下に、この目的に使用できるサンプルコードを示します。

const dfMessenger = document.querySelector('df-messenger');

function  addRichContent(customPayload)  {
  dfMessenger.renderCustomCard(customPayload.richContent);

  // add error handling

  return  Promise.resolve({  status:  "OK",  reason:  null  });
}

// substitute your own tool id

const  toolId  =  'projects/PROJECT_ID/locations/LOCATION/agents/AGENT_ID/tools/TOOL_ID'
dfMessenger.registerClientSideFunction(toolId,  addRichContent.name,  addRichContent);

Dialogflow CX Messenger のフルフィルメント

テキスト返信

情報レスポンス タイプ

説明レスポンス タイプ

画像レスポンス タイプ

動画レスポンス タイプ

ボタン レスポンス タイプ

リスト レスポンス タイプ

アコーディオン レスポンス タイプ

候補ワード レスポンス タイプ

引用レスポンスのタイプ

ファイル レスポンス タイプ

HTML レスポンス タイプ

HTML とマークダウンのスタイル設定

カスタム テンプレート レスポンス タイプ

レスポンス タイプの組み合わせ

ハンドブック ツールのリッチ コンテンツ

ステップ 1: エージェントに addRichContent ツールを作成する

ステップ 2: エージェントにこのツールの使用方法を伝える

ステップ 3: JavaScript を定義する

情報レスポンスタイプ

説明レスポンスタイプ

画像レスポンスタイプ

動画レスポンスタイプ

ボタンレスポンスタイプ

リストレスポンスタイプ

アコーディオンレスポンスタイプ

候補ワードレスポンスタイプ

ファイルレスポンスタイプ

HTML レスポンスタイプ

カスタムテンプレートレスポンスタイプ

レスポンスタイプの組み合わせ

ハンドブックツールのリッチコンテンツ