カスタムカードのフルフィルメントを作成するときに、テキスト レスポンスとカスタム ペイロードを作成できます。 テキスト レスポンスは書式なしテキストと 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)Tables:
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 |
省略可 | 中央 | ボタンのテキスト配置 |
df-messenger-button-text-wrap |
省略可 | 正常 | 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 |
省略可 | 正常 | チップのフォントの太さ |
df-messenger-chips-font-weight-hover |
省略可 | 正常 | カーソルを合わせるときのチップのフォントの太さ |
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> |
Citation オブジェクトの配列 |
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 |
省略可 | 正常 | 引用のフォントの太さ |
df-messenger-citations-font-weight-hover |
省略可 | 正常 | カーソルを合わせるときの引用のフォントの太さ |
df-messenger-citations-icon-spacing |
省略可 | 4px | 引用内のアイコンとテキストの間のスペース |
df-messenger-citations-box-shadow |
省略可 | なし | 引用のボックス シャドウ |
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- 画像要素（画像の表示に使用。url-allowlistHTML のカスタマイズもご覧ください）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 |
省略可 | separate | テーブルの 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 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) | カスタムカードのボックス シャドウ |