カスタムカードのフルフィルメントを作成するときに、テキスト レスポンスとカスタム ペイロードを作成できます。 テキスト レスポンスは書式なしテキストと Markdown エージェント レスポンスに使用され、カスタム ペイロードはリッチ レスポンスに使用されます。 すべてのレスポンス タイプのカスタム ペイロード形式には、次のような基本的な構造があります。
{
"richContent": [
[
{
"type": "type-id",
...
},
{
"type": "type-id",
...
}
],
[
{
"type": "type-id",
...
},
{
"type": "type-id",
...
}
]
]
}
richContent 値では、1 つの外部配列と複数の内部配列を使用できます。内部配列内のレスポンスは、1 つのビジュアル カードにバインドされます。外部配列に複数の内部配列が含まれている場合、複数のカードが表示されます（内部配列ごとに 1 つのカードが表示されます）。
残りのサブセクションでは、カスタム ペイロード用に構成できるレスポンス タイプについて説明します。
テキスト返信
テキスト レスポンスは書式なしテキストとマークダウンをサポートします。 以下に Markdown の例を示します。
*Italic***Bold**# Title[Link text](Link URL)テーブル:
Header 1 | Header 2 -------- | -------- Cell 1 | Cell 2
情報レスポンス タイプ
情報レスポンス タイプは、ユーザーがクリックまたはタップすることができるシンプルなタイトルカードです。
次の表に、フィールドの意味を示します。
| 名前 | 型 | 説明 |
|---|---|---|
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"
}
}
]
]
}
説明レスポンス タイプ
説明レスポンス タイプは複数行のテキストを含む情報カードです。
次の表に、フィールドの意味を示します。
| 名前 | 型 | 説明 |
|---|---|---|
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."
]
}
]
]
}
画像レスポンス タイプ
画像レスポンス タイプは、ユーザーがクリックまたはタップできる画像カードです。 レスポンス タイプは、画像のソースをアンカーリンクとして、短い説明テキストとアイコンとともに追加できる参照チップをサポートしています。
次の表に、フィールドの意味を示します。
| 名前 | 型 | 説明 |
|---|---|---|
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 | 画像の枠線の半径 |
動画レスポンス タイプ
動画レスポンス タイプは、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 を使用して複数行ボタンを禁止する |
リスト レスポンス タイプ
リスト レスポンス タイプは、ユーザーが複数の選択肢から選択できるカードです。
レスポンスには、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 | リスト要素間の枠線 |
アコーディオン レスポンス タイプ
アコーディオン レスポンス タイプは、ユーザーがクリックまたはタップして展開 / 表示できる小さなカードです。
次の表に、フィールドの意味を示します。
| 名前 | 型 | 説明 |
|---|---|---|
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"
}
]
]
}
候補ワード レスポンス タイプ
候補ワード レスポンス タイプは、クリック可能な候補ワードのリストをエンドユーザーに提供します。
次の表に、フィールドの意味を示します。
| 名前 | 型 | 説明 |
|---|---|---|
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 を使用して複数行チップを許可する |
引用レスポンスのタイプ
引用レスポンスのタイプは、クリック可能な引用リンクのリストをエンドユーザーに提供します。
次の表に、フィールドの意味を示します。
| 名前 | 型 | 説明 |
|---|---|---|
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 |
省略可 | なし | 引用のボックス シャドウ |
ファイル レスポンス タイプ
ファイル レスポンス タイプは、ダウンロード可能なリンクを含むファイル要素のリストをレンダリングします。
次の表に、フィールドの意味を示します。
| 名前 | 型 | 説明 |
|---|---|---|
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 レスポンス タイプ
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 |
省略可 | 透明 | テーブル ヘッダー行の背景 |
カスタム テンプレート レスポンス タイプ
カスタム テンプレート レスポンス タイプは、お客様のウェブサイトで定義されたカスタム要素をレンダリングします。要素はカード内に配置されず、常に単独で表示されます。
次の表に、フィールドの意味を示します。
| 名前 | 型 | 説明 |
|---|---|---|
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 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);