以前の 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

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

  1. ウェブサイトからメッセンジャーの HTML、CSS、JavaScript コードをすべて削除します。
  2. 新しい 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"
      }
    ]
  ]
}

ボタン レスポンス タイプ

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

Messenger のスクリーンショット

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

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

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