此页面由 Cloud Translation API 翻译。

Dialogflow Messenger

这项集成为您的代理提供了可自定义的聊天对话框可嵌入到您的网站中

Dialogflow Messenger 屏幕截图

设置

此集成可以允许经过身份验证或未经身份验证最终用户代理查询访问权限。

未经身份验证的设置

如需设置对 Dialogflow Messenger 代理的未经身份验证的访问权限，请执行以下操作：

转到 Dialogflow CX 控制台。
选择您的 Google Cloud 项目。
选择您的代理。
选择管理标签页。
点击左侧边栏菜单中的集成。
点击 Dialogflow Messenger 上的连接。
此时将打开一个配置对话框。
如果之前已为此代理设置了集成，您会看到可嵌入的 HTML 代码。无论您是想对已进行身份验证的点击对话框底部的停用...按钮，以便您在下一步中重新配置这些设置。
选择环境。
选择未通过身份验证的 API。
选择一种风格。
（可选）限制网域访问权限。
点击启用未经身份验证的 API。
该对话框将显示可嵌入的 HTML 代码可嵌入到您网站上的内容复制此代码。
点击完成。

基于身份验证的设置

如需设置对 Dialogflow Messenger 代理的经过身份验证的访问权限，请执行以下操作：

转到 Dialogflow CX 控制台。
选择您的 Google Cloud 项目。
选择您的代理。
选择管理标签页。
点击左侧边栏菜单中的集成。
点击 Dialogflow Messenger 上的连接。
此时将打开一个配置对话框。
如果之前已为此代理设置了集成，您会看到可嵌入的 HTML 代码。无论您是想对已进行身份验证的点击对话框底部的停用...按钮，以便您在下一步中重新配置这些设置。
选择环境。
选择已获授权的 API。
选择一种风格。
（可选）限制网域访问权限。
点击启用已获授权的 API。
该对话框将显示可嵌入的 HTML 代码可嵌入到您网站上的内容复制此代码。
点击完成。
设置 OAuth 客户端： <ph type="x-smartling-placeholder">
1. 创建 OAuth 权限请求页面。将 ./auth/cloud-platform 添加为必需范围。
2. 创建 OAuth 2.0 客户端 ID。在已获授权的 JavaScript 来源下，指定允许托管和查询代理的 HTTP 源站。例如 https://your-company.com。
3. 为最终用户提供查询代理的权限。添加每个最终用户或群组 Dialogflow API 客户端 和 Service Usage Consumer 角色。

嵌入

将您之前复制的嵌入代码粘贴到您网站上的网页中。<script> 和 <df-messenger> HTML 元素应该在网页的 <body> 元素中。

如果您使用的是经过身份验证的集成，为 <df-messenger> 设置 oauth-client-id 属性附加到 OAuth 客户端 ID。

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

为了支持自适应布局并将以下代码添加到 <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>

履行情况

有很多履单响应类型可用于代理响应。

回答反馈

如果启用了回答反馈功能，默认情况下，聊天对话框会添加“我喜欢”图标和不喜欢添加到用户界面在对话过程中，最终用户可以点击这些按钮，提供有关代理响应的反馈。如果用户选择“不喜欢”，他们可以选择提供获得负面反馈的原因。

自定义反馈组件

要指定自定义反馈元素，必须在网站上定义新的自定义元素。要提交反馈，该元素必须发出 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 Messenger 测试您的代理，请执行以下操作：

按上述说明将 Dialogflow Messenger 元素嵌入页面中。
使用特定端口启动该页面的本地 HTTP 服务器。
通过 http://localhost:port_number 访问该页面。