Dialogflow CX Messenger JavaScript

Dialogflow CX Messenger には、動作に影響を与えるために呼び出すことができる関数が用意されています。

renderCustomText

この関数は、エージェントから送られたものであるか、またはユーザーによって入力されたものであるかのように、テキスト メッセージをレンダリングします。

引数:

  • string: テキスト メッセージ
  • boolean: エージェントからのメッセージの場合は true、エンドユーザーからの場合は false

戻り値:

  • void

次に例を示します。

const dfMessenger = document.querySelector('df-messenger');
dfMessenger.renderCustomText('Custom text', true);

renderCustomCard

この関数は、Dialogflow CX フルフィルメントから受け取ったものであるかのように、カスタムカードをレンダリングします。

引数:

  • payload: カスタム ペイロード レスポンスのリスト。フルフィルメント セクションで定義します。

戻り値:

  • void

次に例を示します。

const dfMessenger = document.querySelector('df-messenger');
const payload = [
  {
    "type": "info",
    "title": "Info item title",
    "subtitle": "Info item subtitle",
    "image": {
      "rawUrl": "https://example.com/images/logo.png"
    },
    "anchor": {
      "href": "https://example.com",
      "target": "_blank"
    }
  }
];
dfMessenger.renderCustomCard(payload);

sendQuery

この関数は、Dialogflow CX API にクエリを送信し、レスポンスを待ちます。これにより、通常はエージェント ダイアログに表示されるエンドユーザー入力がシミュレートされます。システムは、エンドユーザーのクエリと同様にレスポンスを処理します。

引数:

  • string: テキスト クエリ

戻り値:

  • Promise<void>: 非同期オペレーションの戻り値

次に例を示します。

const dfMessenger = document.querySelector('df-messenger');
dfMessenger.sendQuery('Describe shipping costs.');

sendRequest

この関数は、Dialogflow CX API にリクエストを送信し、レスポンスを待ちます。

引数:

  • string: リクエスト タイプ。query（上記 sendQuery もご覧ください）および event（カスタム イベントをご覧ください）をサポートします
  • any: リクエスト タイプに対応するペイロード。サポートされている両方のリクエスト タイプの文字列です

戻り値:

  • Promise<void>: 非同期オペレーションの戻り値

次に例を示します。

const dfMessenger = document.querySelector('df-messenger');
dfMessenger.sendRequest('query', 'Describe shipping costs.');

setQueryParameters

この関数は、Dialogflow CX API detectIntent リクエストの queryParams フィールドのデフォルト値を設定します。他の Dialogflow CX Messenger メソッドでは、クエリ パラメータの個別のデフォルト値が置き換えられる場合があります。

引数:

  • object: JSON データクエリ パラメータのスキーマについては、QueryParameters をご覧ください。

戻り値:

  • void

次に例を示します。

const dfMessenger = document.querySelector('df-messenger');
const queryParameters = {
  parameters: {
  timeZone: "America/New_York"
  }
};
dfMessenger.setQueryParameters(queryParameters);

setContext

この関数は、エンドユーザーから Dialogflow CX に生成のパーソナライズ情報を送信します。この情報は、セッションの残りの部分で保持されます。

引数:

  • object: JSON データ。生成パーソナライズのドキュメントをご覧ください。

戻り値:

  • void

次に例を示します。

const dfMessenger = document.querySelector('df-messenger');
const metadata = {
  "subscription plan": "Business Premium Plus",
  "devices owned": [
    {
      model: "Google Pixel 7",
    },
    {
      model: "Google Pixel Tablet",
    },
  ],
};
dfMessenger.setContext(metadata);

clearStorage

この関数は、エージェント ダイアログの永続ストレージをクリアします。また、エージェント ダイアログの現在の状態もクリアされます。デフォルトでは、ユーザーの認証ステータスが保持されます。この動作をカスタマイズするには、オプションの args を使用します。

引数:

名前 タイプ 説明
args object? ストレージのクリア オペレーションを構成するオプションの引数。
args.clearAuthentication boolean? 認証ステータスをクリアするオプション フラグ。true に設定すると、認証ステータスがクリアされます。それ以外の場合は保持されます。

戻り値:

  • void

次に例を示します。

const dfMessenger = document.querySelector('df-messenger');
dfMessenger.clearStorage();

clearAuthentication

この関数は、エージェント ダイアログの認証をクリアします。

引数:

  • なし

戻り値:

  • void

次に例を示します。

const dfMessenger = document.querySelector('df-messenger');
dfMessenger.clearAuthentication();

startNewSession

この関数は、エージェント ダイアログ内で新しいセッションを開始します。デフォルトでは、メッセージの履歴は消去されますが、ユーザーの認証ステータスは保持されます。この動作をカスタマイズするには、オプションの args パラメータを使用します。

引数:

名前 タイプ 説明
args object? 新しいセッションの作成を構成するオプションの引数。
args.retainHistory boolean? 履歴を保持するためのオプション フラグ。true に設定すると履歴が保持され、それ以外の場合は消去されます。
args.clearAuthentication boolean? 認証ステータスをクリアするオプション フラグ。true に設定すると、認証ステータスがクリアされます。それ以外の場合は保持されます。

戻り値:

  • void

次に例を示します。

const dfMessenger = document.querySelector('df-messenger');
dfMessenger.startNewSession({ retainHistory: true });

openChat

df-messenger-chat-bubble 要素でこの関数を呼び出してチャットを開始します。チャットがすでに開始されている場合は何もしません。

引数:

  • なし

戻り値:

  • void

次に例を示します。

const dfMessengerBubble = document.querySelector('df-messenger-chat-bubble');
dfMessengerBubble.openChat();

closeChat

この関数はチャットを終了します。df-messenger-chat-bubble 要素でこの関数を呼び出してチャットを終了します。チャットがすでに終了されている場合は何もしません。

引数:

  • なし

戻り値:

  • void

次に例を示します。

const dfMessengerBubble = document.querySelector('df-messenger-chat-bubble');
dfMessengerBubble.closeChat();

openMinChat

Dialogflow CX Messenger の最小化されたチャット

df-messenger-chat-bubble 要素でこの関数を呼び出すと、チャット ウィンドウを最小化されたバージョンで開くことができます。チャットがすでに最小化されている場合、この関数は何もしません。

引数:

名前 タイプ 説明
args object? 最小化されたチャットを構成するオプションの引数。
args.anchor string? 省略可。最小化されたチャットを開く場所を構成する anchor。チャットのふきだし要素の anchor 属性と同じロジックです。デフォルトは left-top です。
args.showActorImages boolean? 出演者の画像を表示するためのオプションのフラグ（df-messenger-chat-bubble 要素で指定されている場合）。デフォルトは false です。

例:

const dfMessengerChatBubble = document.querySelector('df-messenger-chat-bubble');
dfMessengerChatBubble.openMinChat({
  anchor: 'top-left'
});

closeMinChat

df-messenger-chat-bubble 要素でこの関数を呼び出して、最小化されたチャットを終了します。チャットがすでに終了されている場合は何もしません。

例:

const dfMessengerChatBubble = document.querySelector('df-messenger-chat-bubble');
dfMessengerChatBubble.closeMinChat();