以前の Dialogflow CX Messenger

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

最新の Dialogflow CX Messenger への移行

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

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

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

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

  1. ウェブサイトからすべての HTML、CSS、JavaScript の Messenger コードを削除します。
  2. 最新の Dialogflow CX Messenger の統合の手順に沿います。

HTML のカスタマイズ

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

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

次に例を示します。

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

renderCustomCard

この関数は、会話エージェント（Dialogflow CX）フルフィルメントから受け取ったものであるかのように、カスタムカードをレンダリングします。カスタム ペイロード レスポンスのフォーマットはフルフィルメント セクションで定義します。

次に例を示します。

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 CX）イベント。

次に例を示します。

{
  "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 CX）イベント。

次の表に、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 CX Messenger のリッチ メッセージ要素を使用すると、要件に合わせてカスタムカードを作成できます。 次に、上記の要素を使用した例を示します。

Messenger のスクリーンショット

{
  "richContent": [
    [
      {
        "type": "image",
        "rawUrl": "https://example.com/images/logo.png",
        "accessibilityText": "Conversational Agents (Dialogflow CX) across platforms"
      },
      {
        "type": "info",
        "title": "Conversational Agents (Dialogflow CX)",
        "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 CX Messenger を使用してエージェントをローカルでテストするには:

  • HTML のカスタマイズ セクションの説明に従って、Dialogflow CX Messenger の要素をページに埋め込みます。
  • そのページのローカル HTTP サーバーを特定のポートで起動します。
  • http://localhost:port_numberでそのページにアクセスします。