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

Dialogflow Messenger

Dialogflow Messenger 整合服務可為您的服務專員提供可嵌入網站中的自訂聊天對話方塊。聊天對話方塊是以對話方塊視窗的形式實作，可供使用者開啟和關閉。開啟後，即時通訊對話方塊會顯示在畫面右下方的內容上方。

Messenger 螢幕截圖

限制

這個整合作業僅支援預設的服務機器人語言。

設定及測試

如要設定及啟用 Dialogflow Messenger，請按照下列步驟操作：

前往 Dialogflow ES 主控台。
按一下左側欄選單中的「整合」。
按一下「Dialogflow Messenger」。
設定對話方塊隨即開啟。
選擇環境。
按一下「啟用」。
複製嵌入程式碼，貼到網站中。
按一下「立即試用」即可測試代理程式。
視窗的右下角會顯示一個帶有 Dialogflow 標誌的按鈕。按一下這個按鈕。
系統會開啟即時通訊對話方塊，供你與對方互動。
完成測試後，請關閉即時通訊對話方塊。
按一下設定對話方塊中的「關閉」。

嵌入

將上方複製的嵌入程式碼貼到網站的網頁中。<script> 和 <df-messenger> HTML 元素應位於網頁的 <body> 元素中。如要支援回應式版面配置，請在頁面中加入下列內容：

<meta name="viewport" content="width=device-width, initial-scale=1">

HTML 自訂項目

您可以自訂聊天對話方塊的顯示方式和行為。df-messenger HTML 元素的屬性如下：

屬性	輸入政策	值
`agent-id`	必填	與 Dialogflow 服務專員相關聯的 ID。這個欄位會預先填入您的服務專員 ID。
`chat-icon`	選用	用於即時通訊對話方塊開啟按鈕的圖示。預設為 Dialogflow 圖示。這個欄位必須是公開網址。圖示大小應為 36 x 36 像素。
`chat-title`	必填	顯示在即時通訊對話方塊頂端的標題。這個欄位會預先填入服務專員的名稱。
`expand`	選用	布林值屬性，可在頁面載入時開啟即時通訊對話方塊。根據預設，聊天對話方塊會在頁面載入時關閉。
`intent`	選用	在開啟即時通訊對話方塊時，用於觸發第一個意圖的事件。系統會預先填入 `WELCOME` 事件。
`language-code`	必填	第一個意圖的預設語言代碼。系統會預先填入代理人的預設語言。
`session-id`	選用	工作階段 ID。如果未提供此 ID，整合作業會為每個對話方產生專屬 ID。
`user-id`	選用	可用於追蹤使用者在不同工作階段的活動。您可以透過偵測意圖要求中的 `queryParams.payload.userId` 欄位，將值傳遞至 Dialogflow。
`wait-open`	選用	布林值屬性，可將歡迎事件延後至對話方塊實際開啟為止。

CSS 自訂設定

您可以設定 CSS 變數，自訂聊天對話方塊的樣式。

您可以提供下列 CSS 變數：

CSS 變數	受影響的房源
`df-messenger-bot-message`	代理人訊息的氣泡背景顏色。
`df-messenger-button-titlebar-color`	聊天對話方塊的浮動按鈕和標題列顏色。
`df-messenger-button-titlebar-font-color`	標題列中標題的字型顏色。
`df-messenger-chat-background-color`	即時通訊對話方塊背景的顏色。
`df-messenger-font-color`	訊息的字型顏色。
`df-messenger-input-box-color`	文字輸入框的背景顏色。
`df-messenger-input-font-color`	文字輸入框的字型顏色。
`df-messenger-input-placeholder-font-color`	文字輸入框中預留位置文字的字型顏色。
`df-messenger-minimized-chat-close-icon-color`	關閉即時通訊視圖中的關閉圖示顏色。
`df-messenger-send-icon`	文字輸入框中的傳送圖示顏色。
`df-messenger-user-message`	使用者訊息的氣泡背景顏色。

範例程式碼：

<style>
  df-messenger {
   --df-messenger-bot-message: #878fac;
   --df-messenger-button-titlebar-color: #df9b56;
   --df-messenger-chat-background-color: #fafafa;
   --df-messenger-font-color: white;
   --df-messenger-send-icon: #878fac;
   --df-messenger-user-message: #479b3d;
  }
</style>

上述設定會導致以下結果：

Messenger 螢幕截圖

JavaScript 事件

Dialogflow Messenger 會觸發各種事件，您可以為這些事件建立事件監聽器。

這些事件的事件目標是 df-messenger 元素。

如要為 df-messenger 元素新增事件監聽器，請新增下列 JavaScript 程式碼，其中 event-type 是下列事件名稱之一：

const dfMessenger = document.querySelector('df-messenger');
dfMessenger.addEventListener('event-type', function (event) {
  // Handle event
  ...
});

支援下列事件類型：

`df-accordion-clicked`

使用者點選摺疊式元素時，就會觸發這項事件。事件結構如下所示：

element: {
  title: string,
  subtitle: string,
  image: {
    src: {rawUrl: string}
  },
  text: string
}

`df-button-clicked`

使用者按下按鈕元素時，就會觸發此事件。事件結構如下所示：

element: {
  icon: {
    type: string,
    color: string
  },
  text: string,
  link: string,
  event: EventInput,
  payload: {}
}

`df-chip-clicked`

使用者選取建議方塊時，就會觸發這項事件。事件結構如下所示：

query: string // Text of the suggestion chip that was selected.

`df-info-card-clicked`

當使用者點選標題列中的資訊項目時，就會觸發這項事件。事件結構如下所示：

element: {
  title: string,
  image: {
    src: {rawUrl: string}
  },
  actionLink: string
}

`df-list-element-clicked`

當使用者點選清單中的項目時，就會觸發這項事件。事件結構如下所示：

element: {
  title: string,
  subtitle: string,
  image: {
    src: {rawUrl}
  },
  event: {
    name: string,
    parameters: {},
    languageCode: string
  },
  payload: {}
}

`df-messenger-error`

當 Dialogflow API 傳送錯誤狀態碼時，就會觸發這個事件。事件結構如下所示：

error: {
  "error": {
    "code": <error_code>,
    "message": <error_message>,
    "status": <error_status>
  }
}

`df-messenger-loaded`

當 df-messenger 元素已完全載入並初始化時，系統會觸發此事件。

`df-request-sent`

向 Dialogflow API 提出要求時，就會發生這項事件。您可以使用這個事件和 df-response-received 監控要求延遲時間。事件結構如下所示：

requestBody: {
  "queryParams": {
    object(QueryParameters)
  },
  "queryInput": {
    object(QueryInput)
  },
  "inputAudio": string
}

`df-response-received`

收到 Dialogflow API 回應時，就會觸發這項事件。事件結構如下所示：

response: detectIntentResponse

`df-user-input-entered`

當使用者輸入查詢時，就會發生這項事件。事件結構如下所示：

input: string // Text entered by user

JavaScript 函式

df-messenger 元素提供可呼叫的函式，可影響其行為。

`renderCustomText`

此函式會顯示簡單的文字訊息，就像是從 Dialogflow 傳送的簡單文字回應一樣。

例如：

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

`renderCustomCard`

這個函式會算繪自訂資訊卡，就像是從 Dialogflow 傳送的豐富回應訊息一樣。自訂酬載回應的格式會在「豐富回應訊息」部分定義。

例如：

const dfMessenger = document.querySelector('df-messenger');
const payload = [
  {
    "type": "info",
    "title": "Info item title",
    "subtitle": "Info item subtitle",
    "image": {
      "src": {
        "rawUrl": "https://example.com/images/logo.png"
      }
    },
    "actionLink": "https://example.com"
  }];
dfMessenger.renderCustomCard(payload);

`showMinChat`

這個函式會顯示最精簡的訊息清單。

例如：

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

複合式回應訊息

建立豐富回應訊息時，您可以透過意圖的「預設」回應分頁建立文字回覆和自訂酬載。文字回應用於基本服務專員回應，而自訂酬載則用於複合式回應。所有回應類型的自訂酬載格式具有下列基本結構：

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

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

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

資訊回應類型

資訊回應類型是使用者可點選或輕觸的簡單標題卡。

Messenger 螢幕截圖

下表說明這些欄位：

名稱	類型	說明
`type`	字串	回應類型：「info」
`title`	字串	資訊卡標題
`subtitle`	字串	資訊卡副標題
`image`	物件	圖片
`image.src`	物件	圖片來源
`image.src.rawUrl`	字串	圖片的公開網址
`actionLink`	字串	點選資訊卡時要前往的網址

例如：

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

說明回應類型

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

Messenger 螢幕截圖

下表說明這些欄位：

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

例如：

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

圖片回應類型

圖片回應類型是使用者可點選或輕觸的圖片資訊卡。

Messenger 螢幕截圖

下表說明這些欄位：

名稱	類型	說明
`type`	字串	回應類型：「image」
`rawUrl`	字串	圖片的公開網址
`accessibilityText`	字串	圖片替代文字

例如：

{
  "richContent": [
    [
      {
        "type": "image",
        "rawUrl": "https://example.com/images/logo.png",
        "accessibilityText": "Example logo"
      }
    ]
  ]
}

按鈕回應類型

按鈕回應類型是使用者可點選或輕觸的圖示小按鈕。

下表說明這些欄位：

名稱	類型	說明
`type`	字串	回應類型：「button」
`icon`	物件	按鈕圖示
`icon.type`	字串	Material Design 圖示庫中的圖示。預設圖示為箭頭
`icon.color`	字串	顏色十六進位代碼
`text`	字串	按鈕文字
`link`	字串	點按按鈕時要前往的網址
`event`	物件	按下按鈕時觸發的 Dialogflow 事件，請參閱 EventInput REST 參考資料

例如：

{
  "richContent": [
    [
      {
        "type": "button",
        "icon": {
          "type": "chevron_right",
          "color": "#FF9800"
        },
        "text": "Button text",
        "link": "https://example.com",
        "event": {
          "name": "",
          "languageCode": "",
          "parameters": {}
        }
      }
    ]
  ]
}

清單回應類型

清單回應類型是卡片，使用者可從中選取多個選項。

Messenger 螢幕截圖

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

名稱	類型	說明
`type`	字串	回應類型：「list」
`title`	字串	選項名稱
`subtitle`	字串	選項副標題
`event`	物件	點選選項時觸發的 Dialogflow 事件，請參閱 EventInput REST 參考資料

下表說明 divider 類型：

名稱	類型	說明
`type`	字串	回覆類型：「divider」

例如：

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

摺頁回應類型

摺疊式回應類型是小型資訊卡，使用者只要點選或輕觸即可展開，查看更多文字。

Messenger 螢幕截圖

下表說明這些欄位：

名稱	類型	說明
`type`	字串	回應類型：「accordion」
`title`	字串	摺頁標題
`subtitle`	字串	摺疊式副標題
`image`	物件	圖片
`image.src`	物件	圖片來源
`image.src.rawUrl`	字串	圖片的公開網址
`text`	字串	摺頁文字

例如：

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

建議方塊回應類型

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

Messenger 螢幕截圖

下表說明這些欄位：

名稱	類型	說明
`type`	字串	回應類型：「chips」
`options`	陣列<物件>	Option 物件陣列
`options[].text`	字串	選項文字
`options[].image`	物件	選項圖片
`options[].image.src`	物件	選項圖片來源
`options[].image.src.rawUrl`	字串	圖片的公開網址選項
`options[].link`	字串	選項連結

例如：

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

結合回應類型

您可以使用 Dialogflow Messenger 的個別多媒體訊息元素，建構符合需求的自訂資訊卡。以下是使用上述部分元素的範例：

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",
        "actionLink": "https://cloud.google.com/dialogflow/docs"
      },
      {
        "type": "chips",
        "options": [
          {
            "text": "Case Studies",
            "link": "https://cloud.google.com/dialogflow/case-studies"
          },
          {
            "text": "Docs",
            "link": "https://cloud.google.com/dialogflow/docs"
          }
        ]
      }
    ]
  ]
}

偵錯

如要在本機使用 Dialogflow Messenger 測試服務專員，請按照下列步驟操作：

按照上述方式在頁面中嵌入 Dialogflow Messenger 元素。
為該網頁啟動本機 HTTP 伺服器，並使用特定通訊埠。
前往 http://localhost:port_number 存取該頁面。

Dialogflow Messenger 透過集合功能整理內容 你可以依據偏好儲存及分類內容。

限制

設定及測試

嵌入

HTML 自訂項目

CSS 自訂設定

JavaScript 事件

df-accordion-clicked

df-button-clicked

df-chip-clicked

df-info-card-clicked

df-list-element-clicked

df-messenger-error

df-messenger-loaded

df-request-sent

df-response-received

df-user-input-entered

JavaScript 函式

renderCustomText

renderCustomCard

showMinChat

複合式回應訊息

資訊回應類型

說明回應類型

圖片回應類型

按鈕回應類型

清單回應類型

摺頁回應類型

建議方塊回應類型

結合回應類型

偵錯

Dialogflow Messenger

`df-accordion-clicked`

`df-button-clicked`

`df-chip-clicked`

`df-info-card-clicked`

`df-list-element-clicked`

`df-messenger-error`

`df-messenger-loaded`

`df-request-sent`

`df-response-received`

`df-user-input-entered`

`renderCustomText`

`renderCustomCard`

`showMinChat`