Dialogflow Messenger

Dialogflow Messenger を統合すると、エージェント用のカスタマイズ可能なチャット ダイアログが提供され、これをウェブサイトに埋め込むことができます。チャット ダイアログは、エンドユーザーが開閉できるダイアログ ウィンドウとして実装されます。チャット ダイアログは、画面右下のコンテンツの上に表示されます。

Messenger のスクリーンショット

制限事項

セットアップとテスト

Dialogflow Messenger をセットアップして有効にするには:

  1. Dialogflow ES コンソールに移動します。
  2. 左側のサイドバー メニューで [Integrations] をクリックします。
  3. [Dialogflow Messenger] をクリックします。
  4. 構成ダイアログが開きます。
  5. 環境を選択します。
  6. [Enable] をクリックします。
  7. ウェブサイトに貼り付ける埋め込みコードをコピーします。
  8. [Try It Now] をクリックして、エージェントをテストします。
  9. ウィンドウの右下に、Dialogflow のロゴが付いたボタンが表示されます。このボタンをクリックします。
  10. 操作できるチャット ダイアログが開きます。
  11. テストが完了したら、チャット ダイアログを閉じます。
  12. 構成ダイアログで [Close] をクリックします。

埋め込み

上記でコピーした埋め込みコードをウェブサイトのウェブページに貼り付けます。<script><df-messenger> HTML 要素をページの <body> 要素に含める必要があります。レスポンシブ レイアウトにするには、以下のものをページに追加します。

<meta name="viewport" content="width=device-width, initial-scale=1">

HTML のカスタマイズ

さまざまな要素を変更して、チャット ダイアログの表示や動作をカスタマイズできます。df-messenger HTML 要素には次の属性があります。

属性 入力ポリシー
agent-id 必須 Dialogflow エージェントに関連付けられたエージェント ID。エージェント ID があらかじめ入力されています。
chat-icon 任意 チャット ダイアログを開くボタンのアイコン。Dialogflow アイコンがデフォルトです。このフィールドは公開 URL にする必要があります。アイコンのサイズは 36x36 ピクセルにする必要があります。
chat-title 必須 チャット ダイアログの上部に表示されるタイトル。エージェントの名前があらかじめ入力されています。
expand 任意 ページが読み込まれたときにチャット ダイアログを開いておくように設定するブール値属性。デフォルトでは、ページの読み込み時にチャット ダイアログが閉じます。
intent 任意 チャット ダイアログが開いたときに最初のインテントをトリガーするイベントWELCOME イベントがあらかじめ入力されています。
language-code 必須 最初のインテントのデフォルトの言語コード。エージェントのデフォルトの言語があらかじめ入力されています。
session-id 任意 セッション ID。指定しない場合、各チャット ダイアログに一意の ID が生成されます。
user-id 任意 セッション間でユーザーをトラッキングできます。インテント検出リクエストの queryParams.payload.userId フィールドを介して、Dialogflow に値を渡すことができます。
wait-open 任意 ダイアログが実際に開くまでウェルカム イベントを遅らせるブール値属性。

CSS のカスタマイズ

CSS 変数を設定すると、チャット ダイアログのスタイルをカスタマイズできます。

次の CSS 変数を指定できます。

CSS 変数 影響を受けるプロパティ
df-messenger-bot-message エージェント メッセージのふきだしの背景色。
df-messenger-button-titlebar-color チャット ダイアログのフローティング ボタンとタイトルバーの色。
df-messenger-button-titlebar-font-color タイトルバーのタイトルのフォントの色。
df-messenger-chat-background-color チャット ダイアログの背景色。
df-messenger-font-color メッセージのフォントの色。
df-messenger-input-box-color テキスト入力ボックスの背景色。
df-messenger-input-font-color テキスト入力ボックスのフォントの色。
df-messenger-input-placeholder-font-color テキスト入力ボックス内のプレースホルダ テキストのフォントの色。
df-messenger-minimized-chat-close-icon-color 閉じたチャットビューの終了アイコンの色。
df-messenger-send-icon テキスト入力ボックスの送信アイコンの色。
df-messenger-user-message ユーザー メッセージのふきだしの背景色。

コードの例:

<style>
  df-messenger {
   --df-messenger-bot-message: #878fac;
   --df-messenger-button-titlebar-color: #df9b56;
   --df-messenger-chat-background-color: #fafafa;
   --df-messenger-font-color: white;
   --df-messenger-send-icon: #878fac;
   --df-messenger-user-message: #479b3d;
  }
</style>

上記の設定では次のような結果になります。

Messenger のスクリーンショット

JavaScript イベント

Dialogflow Messenger は、イベント リスナーを作成できるさまざまなイベントをトリガーします。

これらのイベントのイベント ターゲットは、df-messenger 要素です。

df-messenger 要素のイベント リスナーを追加するには、次の JavaScript コードを追加します。event-type は、以下で説明するイベント名のいずれかです。

const dfMessenger = document.querySelector('df-messenger');
dfMessenger.addEventListener('event-type', function (event) {
  // Handle event
  ...
});

次のイベントタイプがサポートされています。

df-accordion-clicked

このイベントは、ユーザーがアコーディオン要素をクリックしたときに発生します。イベントの構造は次のようになります。

element: {
  title: string,
  subtitle: string,
  image: {
    src: {rawUrl: string}
  },
  text: string
}

df-button-clicked

このイベントは、ユーザーがボタン要素をクリックしたときに発生します。イベントの構造は次のようになります。

element: {
  icon: {
    type: string,
    color: string
  },
  text: string,
  link: string,
  event: EventInput,
  payload: {}
}

df-chip-clicked

このイベントは、ユーザーが候補ワードを選択したときに発生します。イベントの構造は次のようになります。

query: string // Text of the suggestion chip that was selected.

df-info-card-clicked

このイベントは、エンドユーザーがタイトルバーの情報アイテムをクリックしたときに発生します。イベントの構造は次のようになります。

element: {
  title: string,
  image: {
    src: {rawUrl: string}
  },
  actionLink: string
}

df-list-element-clicked

このイベントは、ユーザーがリスト内のアイテムをクリックしたときに発生します。イベントの構造は次のようになります。

element: {
  title: string,
  subtitle: string,
  image: {
    src: {rawUrl}
  },
  event: {
    name: string,
    parameters: {},
    languageCode: string
  },
  payload: {}
}

df-messenger-error

このイベントは、Dialogflow API がエラー ステータス コードを送信したときに発生します。イベントの構造は次のようになります。

error: {
  "error": {
    "code": <error_code>,
    "message": <error_message>,
    "status": <error_status>
  }
}

df-messenger-loaded

このイベントは、df-messenger 要素が完全に読み込まれ、初期化されるとトリガーされます。

df-request-sent

このイベントは、Dialogflow API に対してリクエストが送信されたときに発生します。このイベントと df-response-received を使用して、リクエストのレイテンシをモニタリングできます。イベントの構造は次のようになります。

requestBody: {
  "queryParams": {
    object(QueryParameters)
  },
  "queryInput": {
    object(QueryInput)
  },
  "inputAudio": string
}

df-response-received

このイベントは、Dialogflow API からレスポンスを受信したときに発生します。イベントの構造は次のようになります。

response: detectIntentResponse

df-user-input-entered

このイベントは、エンドユーザーがクエリを入力したときに発生します。イベントの構造は次のようになります。

input: string // Text entered by user

JavaScript 関数

df-messenger 要素を使用すると、関数を呼び出し、その動作を変更できます。

renderCustomText

この関数は、Dialogflow からの単純なテキスト レスポンスとして、単純なテキスト メッセージをレンダリングします。

例:

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

renderCustomCard

この関数は、Dialogflow からのリッチ レスポンス メッセージとしてカスタムカードをレンダリングします。カスタム ペイロード レスポンスの形式は、リッチ レスポンス メッセージのセクションで定義されています。

例:

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

showMinChat

この関数は、メッセージ リストの最小バージョンを表示します。

例:

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

リッチ レスポンス メッセージ

リッチ レスポンス メッセージを作成するときに、インテントのデフォルト レスポンスのタブからテキスト レスポンスカスタム ペイロードを作成できます。テキスト レスポンスは基本的なエージェント レスポンスに使用され、カスタム ペイロードはリッチ レスポンスに使用されます。すべてのレスポンス タイプのカスタム ペイロード形式には、次のような基本的な構造があります。

{
  "richContent": [
    [
      {
        "type": "type-id",
        ...
      },
      {
        "type": "type-id",
        ...
      }
    ],
    [
      {
        "type": "type-id",
        ...
      },
      {
        "type": "type-id",
        ...
      }
    ]
  ]
}

richContent 値では、1 つの外部配列と複数の内部配列を使用できます。内部配列内のレスポンスは、1 つのビジュアル カードにバインドされます。外部配列に複数の内部配列が含まれている場合、複数のカードが表示されます(内部配列ごとに 1 つのカードが表示されます)。

残りのサブセクションでは、カスタム ペイロード用に構成できるレスポンス タイプについて説明します。

情報レスポンス タイプ

情報レスポンス タイプは、ユーザーがクリックまたはタップすることができるシンプルなタイトルカードです。

Messenger のスクリーンショット

次の表に、フィールドの意味を示します。

名前 説明
type 文字列 レスポンス タイプ: "info"
title 文字列 カードタイトル
subtitle 文字列 カードのサブタイトル
image オブジェクト 画像
image.src オブジェクト 画像のソース
image.src.rawUrl 文字列 画像の公開 URL
actionLink 文字列 カードがクリックされたときの URL

例:

{
  "richContent": [
    [
      {
        "type": "info",
        "title": "Info item title",
        "subtitle": "Info item subtitle",
        "image": {
          "src": {
            "rawUrl": "https://example.com/images/logo.png"
          }
        },
        "actionLink": "https://example.com"
      }
    ]
  ]
}

説明レスポンス タイプ

説明レスポンス タイプは複数行のテキストを含む情報カードです。

Messenger のスクリーンショット

次の表に、フィールドの意味を示します。

名前 説明
type 文字列 レスポンス タイプ: "description"
title 文字列 カードタイトル
text array<string> 各文字列が新しい行に表示される文字列配列

例:

{
  "richContent": [
    [
      {
        "type": "description",
        "title": "Description title",
        "text": [
          "This is text line 1.",
          "This is text line 2."
        ]
      }
    ]
  ]
}

画像レスポンス タイプ

画像レスポンス タイプは、ユーザーがクリックまたはタップできる画像カードです。

Messenger のスクリーンショット

次の表に、フィールドの意味を示します。

名前 説明
type 文字列 レスポンス タイプ: "image"
rawUrl 文字列 画像の公開 URL
accessibilityText 文字列 画像の代替テキスト

例:

{
  "richContent": [
    [
      {
        "type": "image",
        "rawUrl": "https://example.com/images/logo.png",
        "accessibilityText": "Example logo"
      }
    ]
  ]
}

ボタン レスポンス タイプ

ボタン レスポンス タイプは、ユーザーがクリックまたはタップできるアイコン付きの小さなボタンです。

Messenger のスクリーンショット

次の表に、フィールドの意味を示します。

名前 説明
type 文字列 レスポンス タイプ: "button"
icon オブジェクト ボタンのアイコン
icon.type 文字列 マテリアル アイコン ライブラリのアイコン。デフォルトのアイコンは矢印
icon.color 文字列 色の 16 進数
text 文字列 ボタンのテキスト
link 文字列 ボタンがクリックされたときにフォローする URL
event オブジェクト ボタンがクリックされたときにトリガーされる Dialogflow イベントについては、EventInput REST リファレンスをご覧ください。

例:

{
  "richContent": [
    [
      {
        "type": "button",
        "icon": {
          "type": "chevron_right",
          "color": "#FF9800"
        },
        "text": "Button text",
        "link": "https://example.com",
        "event": {
          "name": "",
          "languageCode": "",
          "parameters": {}
        }
      }
    ]
  ]
}

リスト レスポンス タイプ

リスト レスポンス タイプは、ユーザーが複数の選択肢から選択できるカードです。

Messenger のスクリーンショット

レスポンスには、listdivider のレスポンス タイプの配列が含まれます。次の表に、list タイプを示します。

名前 説明
type 文字列 レスポンス タイプ: "list"
title 文字列 オプションのタイトル
subtitle 文字列 オプションのサブタイトル
event オブジェクト オプションがクリックされたときにトリガーされる Dialogflow イベントについては、EventInput REST リファレンスをご覧ください。

次の表に、divider タイプを示します。

名前 説明
type 文字列 レスポンス タイプ: "divider"

例:

{
  "richContent": [
    [
      {
        "type": "list",
        "title": "List item 1 title",
        "subtitle": "List item 1 subtitle",
        "event": {
          "name": "",
          "languageCode": "",
          "parameters": {}
        }
      },
      {
        "type": "divider"
      },
      {
        "type": "list",
        "title": "List item 2 title",
        "subtitle": "List item 2 subtitle",
        "event": {
          "name": "",
          "languageCode": "",
          "parameters": {}
        }
      }
    ]
  ]
}

アコーディオン レスポンス タイプ

アコーディオン レスポンス タイプは、ユーザーがクリックまたはタップして展開 / 表示できる小さなカードです。

Messenger のスクリーンショット

次の表に、フィールドの意味を示します。

名前 説明
type 文字列 レスポンス タイプ: "accordion"
title 文字列 アコーディオンのタイトル
subtitle 文字列 アコーディオンのサブタイトル
image オブジェクト 画像
image.src オブジェクト 画像のソース
image.src.rawUrl 文字列 画像の公開 URL
text 文字列 アコーディオンのテキスト

例:

{
  "richContent": [
    [
      {
        "type": "accordion",
        "title": "Accordion title",
        "subtitle": "Accordion subtitle",
        "image": {
          "src": {
            "rawUrl": "https://example.com/images/logo.png"
          }
        },
        "text": "Accordion text"
      }
    ]
  ]
}

候補ワード レスポンス タイプ

候補ワード レスポンス タイプは、クリック可能な候補ワードのリストをエンドユーザーに提供します。

Messenger のスクリーンショット

次の表に、フィールドの意味を示します。

名前 説明
type 文字列 レスポンス タイプ: "chips"
options array<object> オプションのオブジェクト配列
options[].text 文字列 オプションのテキスト
options[].image オブジェクト オプションの画像
options[].image.src オブジェクト オプションの画像のソース
options[].image.src.rawUrl 文字列 オプションの画像の公開 URL
options[].link 文字列 オプションのリンク

例:

{
  "richContent": [
    [
      {
        "type": "chips",
        "options": [
          {
            "text": "Chip 1",
            "image": {
              "src": {
                "rawUrl": "https://example.com/images/logo.png"
              }
            },
            "link": "https://example.com"
          },
          {
            "text": "Chip 2",
            "image": {
              "src": {
                "rawUrl": "https://example.com/images/logo.png"
              }
            },
            "link": "https://example.com"
          }
        ]
      }
    ]
  ]
}

レスポンス タイプの組み合わせ

Dialogflow Messenger のリッチ メッセージ要素を使用すると、要件に合わせてカスタムカードを作成できます。次に、上記の要素を使用した例を示します。

Messenger のスクリーンショット

{
  "richContent": [
    [
      {
        "type": "image",
        "rawUrl": "https://example.com/images/logo.png",
        "accessibilityText": "Dialogflow across platforms"
      },
      {
        "type": "info",
        "title": "Dialogflow",
        "subtitle": "Build natural and rich conversational experiences",
        "actionLink": "https://cloud.google.com/dialogflow/docs"
      },
      {
        "type": "chips",
        "options": [
          {
            "text": "Case Studies",
            "link": "https://cloud.google.com/dialogflow/case-studies"
          },
          {
            "text": "Docs",
            "link": "https://cloud.google.com/dialogflow/docs"
          }
        ]
      }
    ]
  ]
}

デバッグ

Dialogflow Messenger を使用してエージェントをローカルでテストするには:

  • 上記のように、Dialogflow Messenger の要素をページに埋め込みます。
  • そのページのローカル HTTP サーバーを特定のポートで起動します。
  • http://localhost:port_numberでそのページにアクセスします。