Dialogflow 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(); // Dialogflow 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(); // Dialogflow 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(); // Dialogflow Messenger won't send the "event" request.
// Handle "event" yourself.
});
df-chip-clicked
ユーザーがチップをクリックしました。
詳細プロパティ:
actionLink（string）: クリックされたチップのアンカー href（指定されている場合）text（string）: クリックされたチップのテキスト
df-citation-clicked
ユーザーが引用をクリックしました。
詳細プロパティ:
actionLink（string）: 引用のアンカー hreftitle（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(); // Dialogflow Messenger won't send the "event" request.
// Handle "event" yourself.
});
df-image-clicked
ユーザーが画像をクリックしました。
詳細プロパティ:
actionLink（string）: 画像のアンカー href（指定されている場合）