Google 會運用 AI 技術將內容翻譯成你偏好的語言，但可能會出錯。

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 圖示。這個欄位必須是公開網址。圖示大小應為 36px x 36px。
`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 的 Rich Response 訊息。自訂酬載回應的格式定義於豐富回應訊息一節。

例如：

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();

複合式回應訊息

建立豐富的回覆訊息時，您可以從意圖的「Default」(預設) 回覆分頁建立「Text Responses」(文字回覆) 和「Custom Payloads」(自訂酬載)。文字回覆用於基本代理回覆，自訂酬載則用於豐富回覆。所有回覆類型的自訂酬載格式都具有下列基本結構：

{
  "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`	字串	回應類型：「按鈕」
`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`	字串	回應類型：「分隔線」

例如：

{
  "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`	array<object>	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 的個別 RTF 訊息元素可用於建構符合需求的自訂資訊卡。以下是使用上述部分元素的範例：

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`