Dialogflow Messenger

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

Messenger のスクリーンショット

制限事項

この統合では、デフォルトのエージェント言語のみがサポートされます。

セットアップとテスト

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

Dialogflow ES コンソールに移動します。
左側のサイドバーメニューで [Integrations] をクリックします。
[Dialogflow Messenger] をクリックします。
構成ダイアログが開きます。
環境を選択します。
[有効にする] をクリックします。
ウェブサイトに貼り付ける埋め込みコードをコピーします。
[Try It Now] をクリックして、エージェントをテストします。
ウィンドウの右下に、Dialogflow のロゴが付いたボタンが表示されます。このボタンをクリックします。
操作できるチャットダイアログが開きます。
テストが完了したら、チャットダイアログを閉じます。
構成ダイアログで [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"
      }
    ]
  ]
}

ボタンレスポンスタイプ

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

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

名前	型	説明
`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 のスクリーンショット

レスポンスには、list と divider のレスポンスタイプの配列が含まれます。次の表に、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でそのページにアクセスします。

Dialogflow Messenger

制限事項

セットアップとテスト

埋め込み

HTML のカスタマイズ

CSS のカスタマイズ

JavaScript イベント

df-accordion-clicked

df-button-clicked

df-chip-clicked

df-info-card-clicked

df-list-element-clicked

df-messenger-error

df-messenger-loaded

df-request-sent

df-response-received

df-user-input-entered

JavaScript 関数

renderCustomText

renderCustomCard

showMinChat

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

情報レスポンス タイプ

説明レスポンス タイプ

画像レスポンス タイプ

ボタン レスポンス タイプ

リスト レスポンス タイプ

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

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

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

デバッグ

`df-accordion-clicked`

`df-button-clicked`

`df-chip-clicked`

`df-info-card-clicked`

`df-list-element-clicked`

`df-messenger-error`

`df-messenger-loaded`

`df-request-sent`

`df-response-received`

`df-user-input-entered`

`renderCustomText`

`renderCustomCard`

`showMinChat`

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

情報レスポンスタイプ

説明レスポンスタイプ

画像レスポンスタイプ

ボタンレスポンスタイプ

リストレスポンスタイプ

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

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

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