以前の Dialogflow Messenger

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

新しい Dialogflow Messenger への移行

新しいバージョンの Dialogflow Messenger では、エージェントクエリのアクセスを制御する認証と、その他のユーザーインターフェース構成オプションが提供されます。以前のバージョンのすべてのユーザーが新しいバージョンに移行することをおすすめします。

2023 年 8 月 29 日より前に Dialogflow Messenger の統合を有効にした場合、引き続き以前のバージョンを使用している可能性があります。以前のバージョンを使用しているかどうかを確認するには、ウェブサイトに埋め込まれたメッセンジャーの HTML コードを調べます。次のスクリプトが表示された場合は、以前のバージョンを使用しています。

https://www.gstatic.com/dialogflow-console/fast/messenger-cx/bootstrap.js?v=1

新しいバージョンに移行するには:

ウェブサイトからメッセンジャーの HTML、CSS、JavaScript コードをすべて削除します。
新しい Dialogflow Messenger の統合の手順に沿って操作します。

HTML のカスタマイズ

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

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

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
  },
  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 イベント。

例:

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

リストレスポンスタイプ

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

Messenger のスクリーンショット

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

名前	タイプ	説明
`type`	文字列	レスポンスタイプ: "list"
`title`	文字列	オプションのタイトル
`subtitle`	文字列	オプションのサブタイトル
`event`	オブジェクト	オプションをクリックしたときにトリガーされる Dialogflow イベント。

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

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

例:

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

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

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

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

新しい 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`

情報レスポンスタイプ

説明レスポンスタイプ

画像レスポンスタイプ

ボタンレスポンスタイプ

リストレスポンスタイプ

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

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

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