部分產品和功能正在重新命名中。我們也正在將生成式應對手冊和流程功能遷移至單一整合式控制台。請參閱詳細說明。

本頁面由 Cloud Translation API 翻譯而成。

Dialogflow CX Messenger 執行作業

建立自訂資訊卡完成時，您可以建立文字回覆和自訂酬載。文字回覆用於純文字和 Markdown 代理程式回覆，自訂酬載則用於豐富的回覆。所有回應類型的自訂酬載格式都具有下列基本結構：

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

請注意，richContent 值允許一個外部陣列和多個內部陣列。內層陣列中的回應會綁定在單一視覺資訊卡中。如果外部陣列包含多個內部陣列，系統會顯示多張資訊卡，每個內部陣列對應一張。

其餘子章節說明可為自訂酬載設定的各種回應類型。

簡訊回覆

Dialogflow CX Messenger 文字對話的螢幕截圖

文字回覆支援純文字和 Markdown。以下列舉幾個 Markdown 範例：

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

注意： 如要在 Markdown 中啟用圖片，必須相應指定 url-allowlist 屬性。

表格：

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

資訊回覆類型

Dialogflow CX Messenger 資訊類型螢幕截圖

資訊回覆類型是簡單的標題資訊卡，使用者可以點按或觸控。

下表說明這些欄位：

名稱	類型	說明
`type`	`string`	回應類型：「info」
`title`	`string`	資訊卡標題
`subtitle`	`string`	資訊卡副標題
`image`	`object`	圖片
`image.rawUrl`	`string`	圖片的公開網址
`anchor`	`object`	元素遭點選時要追蹤的錨點
`anchor.href`	`string`	錨點網址
`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 CX Messenger 說明類型螢幕截圖

說明回應類型是資訊卡，可包含多行文字。

下表說明這些欄位：

名稱	類型	說明
`type`	`string`	回覆類型：「說明」
`title`	`string`	資訊卡標題
`text`	`array<string>`	字串陣列，每個字串都會顯示在新的一行

例如：

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

圖片回覆類型

Dialogflow CX Messenger 圖片類型螢幕截圖

圖片回覆類型是使用者可點按或輕觸的圖片資訊卡。回應類型支援參照晶片，可將圖片來源新增為錨定連結，並附上簡短說明文字和圖示。

下表說明這些欄位：

名稱	類型	說明
`type`	`string`	回覆類型：「image」
`rawUrl`	`string`	圖片的公開網址
`accessibilityText`	`string`	圖片的替代文字
`reference.text`	`string`	要在參照方塊中顯示的文字
`reference.anchor.href`	`string`	參照方塊的網址
`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 CX Messenger 影片類型螢幕截圖

影片回應類型會顯示影片元素，可能是直接來自網址的影片 (直接在即時通訊服務中播放)，也可能是影片連結。

名稱	類型	說明
`type`	`string`	回應類型：「影片」
`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`	縮圖的網址
`source.rawUrl`	`string`	`raw` 類型影片的網址

例如：

{
  "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`	選用	315 像素	內嵌影片的高度
`df-messenger-video-border`	選用	1px solid #e0e0e0	影片邊框
`df-messenger-video-border-radius`	選用	8px	影片的邊框半徑

按鈕回覆類型

按鈕回覆類型是附有圖示的小按鈕，使用者可以點選或輕觸。

下表說明這些欄位：

名稱	類型	說明
`type`	`string`	回覆類型：「按鈕」
`icon`	`object`	按鈕圖示
`icon.type`	`string`	Material Design 圖示庫中的圖示。預設圖示為箭頭
`icon.color`	`string`	十六進位顏色代碼
`image`	`object`	按鈕圖片，優先於 `icon`
`image.rawUrl`	`string`	圖片的公開網址
`mode`	`string`	選用，如果設為「blocking」，使用者必須點選按鈕，才能輸入內容
`text`	`string`	按鈕文字
`anchor`	`object`	元素遭點選時要追蹤的錨點
`anchor.href`	`string`	錨點網址
`anchor.target`	`string`	錨點的目標，預設為 `_blank`
`event`	`object`	按一下按鈕時觸發的 Dialogflow CX 事件。

例如：

{
  "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` 停用多行按鈕

清單回應類型

Dialogflow CX Messenger 清單類型螢幕截圖

清單回覆類型是含有多個選項的資訊卡，使用者可以從中選取。

回應會包含 list 和 divider 回應類型陣列。下表說明 list 類型：

名稱	類型	說明
`type`	`string`	回覆類型：「list」
`title`	`string`	選項名稱
`subtitle`	`string`	選項副標題
`event`	`object`	點選選項時觸發的 Dialogflow CX 事件
`anchor`	`object`	元素遭點選時要追蹤的錨點
`anchor.href`	`string`	錨點網址
`anchor.target`	`string`	錨點的目標，預設為 `_blank`
`image`	`object`	圖片
`image.rawUrl`	`string`	圖片的公開網址

下表說明 divider 類型：

名稱	類型	說明
`type`	`string`	回應類型：「分隔線」

例如：

{
  "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 CX Messenger 手風琴式選單

風琴式回應類型是小型資訊卡，使用者可以點選或輕觸展開，顯示更多文字。

下表說明這些欄位：

名稱	類型	說明
`type`	`string`	回應類型：「手風琴」
`title`	`string`	摺疊元素標題
`subtitle`	`string`	摺疊元素副標題
`image`	`object`	圖片
`image.rawUrl`	`string`	圖片的公開網址
`text`	`string`	摺疊元素文字

例如：

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

建議方塊回覆類型

Dialogflow CX Messenger 晶片類型螢幕截圖

建議方塊回應類型會向使用者提供可點選的建議方塊清單。

下表說明這些欄位：

名稱	類型	說明
`type`	`string`	回覆類型：「晶片」
`options`	`array<object>`	選項物件陣列
`options[].mode`	`string`	選用，如果設為「blocking」，使用者輸入功能會停用，直到使用者點選動態磚為止
`options[].text`	`string`	選項文字
`options[].image`	`object`	選用選項「圖片」
`options[].image.rawUrl`	`string`	圖片的公開網址選項
`options[].anchor`	`object`	選用，點選元素時要追蹤的錨點
`options[].anchor.href`	`string`	錨點網址
`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`	選用	999 像素	方塊的邊框半徑
`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` 允許多行顯示晶片

引用功能回覆類型

Dialogflow CX Messenger 引用類型螢幕截圖

引文回應類型會提供可點選的引文連結清單給使用者。

下表說明這些欄位：

名稱	類型	說明
`type`	`string`	回應類型：「match_citations」
`citations`	`array<object>`	Citation 物件陣列
`citations[].title`	`string`	引用內容標題
`citations[].subtitle`	`string`	引文副標題 (目前會忽略)
`citations[].anchor`	`object`	元素遭點選時要追蹤的錨點
`citations[].anchor.href`	`string`	錨點網址
`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`	選用	無	引文的方塊陰影

檔案回覆類型

Dialogflow CX Messenger 檔案類型螢幕截圖

檔案回應類型會顯示檔案元素清單，其中包含可供下載的連結。

下表說明這些欄位：

名稱	類型	說明
`type`	`string`	回應類型：「files」
`files`	`array<object>`	File 物件陣列
`files[].name`	`string`	檔案名稱
`files[].image`	`object`	檔案圖片
`files[].image.rawUrl`	`string`	圖片的檔案公開網址
`files[].anchor`	`object`	Anchor 下載檔案
`files[].anchor.href`	`string`	錨點網址
`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`	選用	999 像素	檔案的邊框半徑
`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`	選用	正常	檔案的字型粗細
`df-messenger-files-background-hover`	選用	白色	滑鼠懸停時檔案的背景
`df-messenger-files-border-hover`	選用	1px solid #e0e0e0	滑鼠懸停時的檔案邊框
`df-messenger-files-font-weight-hover`	選用	正常	游標懸停在檔案上時的字型粗細
`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 CX Messenger HTML 類型螢幕截圖

HTML 回應類型會向使用者提供 HTML 訊息。

下表說明這些欄位：

名稱	類型	說明
`type`	`string`	回應類型：「html」
`html`	`string`	訊息的文字內容，支援 HTML

支援的 HTML 標記：

a - 錨點元素 (用於建立超連結)
b - 粗體元素 (用於將文字設為粗體)
i - 斜體元素 (用於將文字設為斜體)
u - 底線元素 (用於為文字加上底線)
h1 - 標題 1 元素 (用於網頁的主要標題)
h2 - 標題 2 元素 (用於子標題)
h3 - 標題 3 元素 (用於子子標題)
p - 段落元素 (用於建立文字段落)
br - 換行元素 (用於在段落中建立換行符號)
table - Table 元素 (用於建立表格)
tr - 表格列元素 (用於在表格中建立資料列)
thead - 表格標題元素 (用於在表格中建立標題)
th - 資料表標題資料或儲存格元素 (用於在資料表標題列中建立儲存格)
tbody - 表格內文元素 (用於在表格中建立內文)
td - 資料表資料或儲存格元素 (用於在資料表列中建立儲存格)
ul - 未排序清單元素 (用於建立項目符號清單)
ol - 已排序清單元素 (用於建立編號清單)
li - 清單項目元素 (用於在清單中建立項目)
img - 圖片元素 (用於顯示圖片，另請參閱 url-allowlist HTML 自訂)
div - 容器元素
span - 內嵌容器元素

例如：

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

設定 HTML 和 Markdown 的樣式

如果是錨點元素 (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 元素和 Markdown 表格)，可以提供下列 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-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 CX Messenger 自訂範本類型螢幕截圖

自訂範本回應類型會顯示客戶網站上定義的自訂元素。這個元素不會放在資訊卡內，而是獨立存在。

下表說明這些欄位：

名稱	類型	說明
`type`	`string`	回應類型：「custom_template」
`name`	`string`	自訂元素的名稱
`payload`	`Object`	要傳遞至自訂元素的酬載

例如：

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

在網站上，自訂元素必須以回應 name 欄位中的確切名稱註冊。建構後 (但在 connectedCallback 之前)，payload 欄位會以 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 自訂訊息卡片螢幕截圖

Dialogflow CX Messenger 的個別豐富訊息元素可用於建構自訂資訊卡，滿足您的需求。

以下範例使用執行要求部分列出的一些元素：

{
  "richContent": [
    [
      {
        "type": "image",
        "rawUrl": "https://example.com/images/logo.png",
        "accessibilityText": "Dialogflow CX across platforms"
      },
      {
        "type": "info",
        "title": "Dialogflow CX",
        "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 的網頁程式碼中，您需要建立 JavaScript 程式碼，定義函式來告知 df-messenger 算繪多媒體內容。您也需要向 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 和 Markdown 的樣式

自訂範本回覆類型

結合回覆類型

教戰手冊工具提供的多媒體內容

步驟 1：在代理程式中建立 addRichContent 工具

步驟 2：告知代理人如何使用這項工具

步驟 3：定義 JavaScript

Dialogflow CX Messenger 執行作業