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 CX バックエンドにリクエストを送信すると発生します。

詳細プロパティ:

  • 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

エージェント ダイアログからレスポンスを受信したときに発生します。

詳細プロパティ:

次に例を示します。

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

アコーディオンをクリックしたときに発生します。

詳細プロパティ:

  • actionLink（string）: アコーディオンのアンカー href（指定されている場合）

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（指定されている場合）