Dialogflow CX Messenger

この統合により、ウェブサイトに埋め込むことができるエージェント用のカスタマイズ可能なチャット ダイアログが提供されます。

Dialogflow Messenger のスクリーンショット

設定

この統合では、認証済みまたは未認証のエンドユーザー エージェント クエリアクセスを許可できます。

未認証の設定

Dialogflow CX Messenger エージェントへの未認証アクセスを設定するには:

  1. Dialogflow CX コンソールに移動する。
  2. ご自身の Google Cloud プロジェクトを選択します。
  3. エージェントを選択します。
  4. [Manage] タブを選択します。
  5. 左側のサイドバー メニューで [Integrations] をクリックします。
  6. Dialogflow CX Messenger で [接続] をクリックします。
  7. 構成ダイアログが開きます。
  8. このエージェントに対して以前に統合が設定されている場合、埋め込み可能な HTML コードが表示されます。認証と非認証のどちらを行うかに関係なく、ダイアログの下部にある [無効にする...] ボタンをクリックして、設定を次の手順で再構成します。
  9. 環境を選択します。
  10. [未認証の API] を選択します。
  11. スタイルを選択します。
  12. 必要に応じて、ドメイン アクセスを制限します。
  13. [未認証の API を有効化する] をクリックします。
  14. ダイアログに、ウェブサイトに埋め込むことができる埋め込み可能な HTML コードが表示されます。そのコードをコピーします。
  15. [完了] をクリックします。

認証済みの設定

Dialogflow CX Messenger エージェントへの認証済みアクセスを設定するには:

  1. Dialogflow CX コンソールに移動する。
  2. ご自身の Google Cloud プロジェクトを選択します。
  3. エージェントを選択します。
  4. [Manage] タブを選択します。
  5. 左側のサイドバー メニューで [Integrations] をクリックします。
  6. Dialogflow CX Messenger で [接続] をクリックします。
  7. 構成ダイアログが開きます。
  8. このエージェントに対して以前に統合が設定されている場合、埋め込み可能な HTML コードが表示されます。認証と非認証のどちらを行うかに関係なく、ダイアログの下部にある [無効にする...] ボタンをクリックして、設定を次の手順で再構成します。
  9. 環境を選択します。
  10. [Authorized API] を選択します。
  11. スタイルを選択します。
  12. 必要に応じて、ドメイン アクセスを制限します。
  13. [認証済み API を有効にする] をクリックします。
  14. ダイアログに、ウェブサイトに埋め込むことができる埋め込み可能な HTML コードが表示されます。そのコードをコピーします。
  15. [完了] をクリックします。
  16. OAuth クライアントを設定します。
    1. 組織のOAuth 同意画面を作成します。 必要なスコープとして ./auth/cloud-platform を追加します。
    2. OAuth クライアント ID を作成します。[承認済みの JavaScript オリジン] で、エージェントのホストとクエリを許可する HTTP オリジンを指定します。 たとえば、https://your-company.com です。
    3. エージェントに対してクエリを実行する権限をエンドユーザーに付与します。 エンドユーザーまたはグループのそれぞれをプリンシパルとして追加します。その際、Dialogflow API クライアント ロールとService Usage ユーザーロールを設定します。

埋め込み

上記でコピーした埋め込みコードをウェブサイトのウェブページに貼り付けます。<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 CX Messenger を使用してエージェントをローカルでテストするには:

  • 上記のように、Dialogflow CX Messenger の要素をページに埋め込みます。
  • そのページのローカル HTTP サーバーを特定のポートで起動します。
  • http://localhost:port_numberでそのページにアクセスします。