Dialogflow CX Messenger の JavaScript イベント

Dialogflow CX Messenger は、イベントリスナーを作成できるさまざまなイベントをトリガーします。一部のイベントには、イベントに関する詳細情報を提供する detail オブジェクトフィールドがあります。

`df-messenger-loaded`

最初にエージェントダイアログが読み込まれます。

詳細プロパティ:

なし

次に例を示します。

window.addEventListener('df-messenger-loaded', () => {
  // Messenger is now ready.
});

`df-chat-open-changed`

チャットが開始または終了します。

詳細プロパティ:

isOpen（boolean）: チャットの新しい状態

次に例を示します。

window.addEventListener('df-chat-open-changed', (event) => {
  console.log(`Chat is ${event.detail.isOpen ? 'open' : 'closed'}`);
});

`df-user-input-entered`

ユーザーがテキストを入力しました。

詳細プロパティ:

input（string）: ユーザーが入力した値

次に例を示します。

window.addEventListener('df-user-input-entered', (event) => {
  console.log(event.detail.input);
});

`df-request-sent`

Dialogflow バックエンドにリクエストが送信されました。

詳細プロパティ:

data（object）: データコンテナ
data.requestBody（object）: 送信されたリクエスト

次に例を示します。

window.addEventListener('df-request-sent', (event) => {
  console.log('Request', event.detail.data.requestBody);
});

window.addEventListener('df-request-sent', (event) => {
  event.preventDefault(); // Messenger won't send the request.

  // Send request yourself.
});

`df-response-received`

エージェントダイアログにレスポンスが届きました。

詳細プロパティ:

data（object）: データコンテナ
data.messages（object[]）: 解析されたレスポンスメッセージのリスト
raw（object）: 受信した回答の文字列

次に例を示します。

window.addEventListener('df-response-received', (event) => {
  // Remove all non-text messages.
  event.detail.data.messages = event.detail.data.messages.filter(message => {
    return message.type === 'text';
  });
});

window.addEventListener('df-response-received', (event) => {
  event.preventDefault(); // Messenger won't handle the response.

  const messenger = document.querySelector('df-messenger');
  event.detail.data.messages.forEach(message => {
    if (message.type === 'text') {
      messenger.renderCustomText(message.text);
    }
  });
});

`df-messenger-error`

バックエンドへのリクエストが失敗しています。

詳細プロパティ:

error（object）: 発生したエラー

次に例を示します。

window.addEventListener('df-messenger-error', (event) => {
  console.log(event.detail.error);
});

`df-session-expired`

エージェントとのセッションが期限切れになりました。

詳細プロパティ:

なし

次に例を示します。

window.addEventListener('df-session-expired', () => {
  const messenger = document.querySelector('df-messenger');
  messenger.renderCustomText(`*Session expired*`, /* isBot= */ true);
  messenger.startNewSession({ retainHistory: true });
});

`df-session-ended`

セッションが終了しました。

詳細プロパティ:

なし

次に例を示します。

window.addEventListener('df-session-ended', () => {
  const messenger = document.querySelector('df-messenger');
  messenger.renderCustomText(`*Session ended*`, /* isBot= */ true);
  messenger.startNewSession({ retainHistory: true });
});

`df-url-suggested`

おすすめのリソースの URL。

詳細プロパティ:

suggestedUrls（string[]）: 推奨 URL リスト

次に例を示します。

window.addEventListener('df-url-suggested', (event) => {
  if (event.detail.suggestedUrls.length === 1) {
    window.location.href = event.detail.suggestedUrls[0];
  }
});

`df-accordion-clicked`

ユーザーがアコーディオンをクリックしました。

詳細プロパティ:

なし

`df-button-clicked`

ユーザーがボタンをクリックしました。

詳細プロパティ:

actionLink（string）: クリックされたボタンのアンカー href（指定されている場合）
event（string）: クリックされたボタンのイベント（指定されている場合）
languageCode（string）: イベントの言語コード（指定されている場合）。指定されていない場合はメインの言語コード
text（string）: クリックされたボタンのテキスト

window.addEventListener('df-button-clicked', (event) => {
  event.preventDefault(); // Messenger won't send the "event" request.

  // Handle "event" yourself.
});

`df-chip-clicked`

ユーザーがチップをクリックしました。

詳細プロパティ:

actionLink（string）: クリックされたチップのアンカー href（指定されている場合）
text（string）: クリックされたチップのテキスト

`df-citation-clicked`

ユーザーが引用をクリックしました。

詳細プロパティ:

actionLink（string）: 引用のアンカー href
title（string）: 引用のタイトル

`df-info-card-clicked`

ユーザーが情報カードをクリックしました。

詳細プロパティ:

actionLink（string）: 情報カードのアンカー href。
title（string）: 情報カードのタイトル

`df-list-element-clicked`

ユーザーがリスト要素をクリックしました。

詳細プロパティ:

actionLink（string）: リスト要素のアンカー href（指定されている場合）
event（string）: クリックされたリスト要素のイベント（指定されている場合）
languageCode（string）: イベントの言語コード（指定されている場合）。指定されていない場合はメインの言語コード
title（string）: リスト要素のタイトル

window.addEventListener('df-list-element-clicked', (event) => {
  event.preventDefault(); // Messenger won't send the "event" request.

  // Handle "event" yourself.
});

`df-image-clicked`

ユーザーが画像をクリックしました。

詳細プロパティ:

actionLink（string）: 画像のアンカー href（指定されている場合）