Dialogflow CX Messenger

這項整合可為服務專員提供可自訂的聊天對話方塊，可嵌入網站中。

Dialogflow Messenger 螢幕截圖

設定

這項整合可允許經過驗證或未經驗證的使用者代理程式查詢存取權。

未經認證的設定

如要設定未經驗證的 Dialogflow CX Messenger 服務專員存取權，請按照下列步驟操作：

前往 Dialogflow CX 主控台。
選擇 Google Cloud 專案。
選取代理程式。
選取「管理」分頁標籤。
按一下左側欄選單中的「整合」。
在 Dialogflow CX Messenger 中按一下「連結」。
設定對話方塊隨即開啟。
如果先前已為這個服務代理人設定整合，您會看到可嵌入的 HTML 程式碼。無論您是否要啟用驗證功能，請按一下對話方塊底部的「停用...」按鈕，以便在下一個步驟中重新設定。
選取環境。
選取「未驗證的 API」。
選取樣式。
視需要限制網域存取權。
按一下「啟用未經驗證的 API」。
對話方塊會顯示可嵌入網站的 HTML 程式碼。複製這組代碼。
按一下 [完成]。

已驗證的設定

如要設定 Dialogflow CX Messenger 服務專員的驗證存取權，請按照下列步驟操作：

前往 Dialogflow CX 主控台。
選擇 Google Cloud 專案。
選取代理程式。
選取「管理」分頁標籤。
按一下左側欄選單中的「整合」。
在 Dialogflow CX Messenger 中按一下「連結」。
設定對話方塊隨即開啟。
如果先前已為這個服務代理人設定整合，您會看到可嵌入的 HTML 程式碼。無論您是否要啟用驗證功能，請按一下對話方塊底部的「停用...」按鈕，以便在下一個步驟中重新設定。
選取環境。
選取「Authorized API」。
選取樣式。
視需要限制網域存取權。
按一下「啟用已授權的 API」。
對話方塊會顯示可嵌入網站的 HTML 程式碼。複製這組代碼。
按一下 [完成]。
設定 OAuth 用戶端：
1. 為貴機構建立 OAuth 同意畫面。將 https://www.googleapis.com/auth/cloud-platform 新增為必要範圍。
2. 建立 OAuth 2.0 用戶端 ID。在「已授權的 JavaScript 來源」下方，指定可代管及查詢代理程式的 HTTP 來源。例如：https://your-company.com。
3. 授予使用者查詢服務機器人的權限。使用 Dialogflow API Client 和 Service Usage Consumer 角色，將每位使用者或群組設為主要使用者。

嵌入

將上方複製的嵌入程式碼貼到網站的網頁中。<script> 和 <df-messenger> HTML 元素應位於網頁的 <body> 元素中。

如果您使用經過驗證的整合服務，請將 <df-messenger> 的 oauth-client-id 屬性設為 OAuth 用戶端 ID。如果您想使用使用者的身分進行工具驗證，請為 access-token-name 屬性設定任意名稱。然後使用值為 $session.params.ACCESS_TOKEN_NAME 的權杖權杖進行工具驗證。

更新任何其他需要更新的屬性。

如要支援回應式版面配置，請在 <head> 元素中加入下列內容：

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

自訂

您可以套用許多HTML 自訂項目和CSS 自訂項目，影響即時通訊對話方塊的外觀和行為。

JavaScript

您可以使用許多 JavaScript 事件和 JavaScript 函式與聊天對話方塊互動。

範例

以下範例說明 HTML 自訂、CSS 自訂和 JavaScript 事件處理：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
  <meta http-equiv="Pragma" content="no-cache" />
  <meta http-equiv="Expires" content="0" />
  <title>My chat</title>
  <style>
    df-messenger {
      /*
       * Customize as required. df-messenger will fill the
       * space that is provided.
      */
      position: absolute;
      right: 0;
      top: 0;
      bottom: 0;
      width: 320px;
    }
  </style>
  <script src="https://www.gstatic.com/dialogflow-console/fast/df-messenger/prod/v1/df-messenger.js"></script>
</head>
<body>
<df-messenger
    location="global" <!-- TODO: update agent location as needed -->
    project-id="my-project-id" <!-- TODO: update project ID -->
    agent-id="my-agent-id" <!-- TODO: update agent ID -->
    language-code="en" <!-- TODO: update agent language as needed -->
>
  <df-messenger-chat
      chat-title="Agent Name" <!-- TODO: update dialog title as needed -->
  ></df-messenger-chat>
</df-messenger>

<script>
  // An example of handling events: Navigate to the first suggested URL.
  document.addEventListener('df-url-suggested', (event) => {
    if (Array.isArray(event.detail.suggestedUrls) &&
      event.detail.suggestedUrls.length) {
      window.location.href = event.detail.suggestedUrls[0];
  }
});
</script>
</body>
</html>

Fulfillment

您可以使用許多執行回應類型做為服務機器人的回應。

回覆意見

如果已啟用回覆意見，即時通訊對話方塊會預設在使用者介面中加入讚和倒讚按鈕。在對話期間，使用者可以按一下這些按鈕，針對服務專員的回應提供意見。如果使用者選取「不喜歡」，可以選擇提供負面意見的原因。

自訂意見回饋元件

如要指定自訂意見回饋元素，請在網站上定義新的自訂元素。如要提交意見回饋，元素必須發出 df-custom-submit-feedback-clicked 事件。包含的 detail 欄位必須是字串。

class CustomFeedbackElement extends HTMLElement {
  constructor() {
    super();
    // It is not strictly required but recommended to contain the custom
    // element in a shadow root.
    this.renderRoot = this.attachShadow({mode: 'open'});
  }

  // Web component Lifecycle method.
  connectedCallback() {
    const wrapper = document.createElement('div');

    // Build the component as required.
    const button = document.createElement('button');
    button.innerText = 'Submit';
    button.addEventListener('click', () => {
      this._onSubmitClick();
    });
    wrapper.appendChild(button);

    this.renderRoot.appendChild(wrapper);
  }

  // Called when Submit button is clicked.
  _onSubmitClick() {
    const event = new CustomEvent("df-custom-submit-feedback-clicked", {
      // `detail` may be any string,
      // this will be sent to the backend to be stored.
      detail: JSON.stringify({
        "usefulness": 2,
        "accuracy": 3,
      }),
      // Required to propagate up the DOM tree
      // https://developer.mozilla.org/en-US/docs/Web/API/Event/bubbles
      bubbles: true,
      // Required to propagate across ShadowDOM
      // https://developer.mozilla.org/en-US/docs/Web/API/Event/composed
      composed: true,
   });
   this.dispatchEvent(event);
  }
}

(function() {
  // Registers the element. This name must be "df-external-custom-feedback".
  customElements.define('df-external-custom-feedback', CustomFeedbackElement);
})();

偵錯

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

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