Dialogflow CX Messenger

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

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

設定

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

未認証の設定

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

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

認証済みの設定

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

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