本頁面由 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。
`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`	字串	回覆類型：「說明」
`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`	字串	回覆類型：「按鈕」
`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`	字串	回應類型：「手風琴」
`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`	字串	回覆類型：「晶片」
`options`	array<object>	選項物件陣列
`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`