対話型メッセージをチャットに追加する - Amazon Connect

翻訳は機械翻訳により提供されています。提供された翻訳内容と英語版の間で齟齬、不一致または矛盾がある場合、英語版が優先します。

対話型メッセージをチャットに追加する

インタラクティブメッセージは、顧客が選択できるプロンプトと事前設定された表示オプションを表示するリッチメッセージです。これらのメッセージは Amazon Lex によって供給され、Lambda を使用して Amazon Lex を介して設定されます。

ヒント

Apple Messages for Business と統合している場合は、Apple ウェブサイトの「Interactive Message Types」を参照してください。

検証の制限

文字列フィールドの制限 (タイトル、サブタイトルなど) は、クライアント (つまり、カスタムビルドのインターフェイスまたはホストされているコミュニケーションウィジェット) が強制的に適用するものと想定されています。SendMessage API は、文字列 の合計サイズが 20KB 未満であることのみをチェックします。

  • ホスト型のコミュニケーションウィジェットをカスタマイズせずに使用する場合、文字列がフィールド制限を超えると、ユーザーインターフェイス上で切り捨てられて、省略記号 (...) が付加されます。ウィジェットをカスタマイズすることで、フィールド制限を適用する方法を決定できます。

  • 他のプラットフォーム (Apple Messages for Business など) と統合する場合は、このトピックの Amazon Connect の制限と、他のプラットフォームのドキュメントの制限を確認してください。例えば、クイック返信は古いバージョンの iOS ではサポートされていません。

メッセージを正常に送信するには、他のすべてのフィールド制限に従う必要があります。

メッセージ表示テンプレート

Amazon Connect には、チャットで顧客に情報を提供するために使用できる以下のメッセージ表示テンプレートが用意されています。

これらのテンプレートは、情報のレンダリング方法、およびチャットインターフェイスに表示される情報を定義します。対話型メッセージがチャット経由で送信される場合、フローは、メッセージ形式がこれらのテンプレートの 1 つに従っているかどうかを検証します。

リストピッカーテンプレート

リストピッカーテンプレートを使用すると、最大 6 つの選択肢のリストを顧客に表示できます。各選択肢に、独自の画像を持たせることができます。

以下の画像は、リストピッカーテンプレートを使用してチャットで情報を表示する 2 つの方法の例を示しています。

  • 1 つの画像には 3 つのボタンが示されていて、それぞれにリンゴ、オレンジ、バナナという果物の名前がテキストで書かれています。

  • 2 番目の画像は店舗の写真を示していて、その下に 3 つのボタンがあり、それぞれに果物の名前、画像、価格が表示されています。


                チャットで情報を表示しているリストピッカーテンプレート。

次のコードは、Lambda で使用できるリストピッカーテンプレートです。次の点に注意してください。

  • 太文字は必須パラメータです。

  • 場合によっては、親要素がリクエストに存在し、それは必須/太字ではないが、その中のフィールドが太字の場合、そのフィールドは必須です。例えば、次のテンプレートの data.replyMessage 構造体を参照してください。構造体が存在する場合、タイトルは必須です。そうでない場合は、replyMessage 全体が省略可能です。

{ "templateType":"ListPicker", "version":"1.0", "data":{ "replyMessage":{ "title":"Thanks for selecting!", "subtitle":"Produce selected", "imageType":"URL", "imageData":"https://interactive-msg.s3-us-west-2.amazonaws.com/fruit_34.3kb.jpg", "imageDescription":"Select a produce to buy" }, "content":{ "title":"What produce would you like to buy?", "subtitle":"Tap to select option", "imageType":"URL", "imageData":"https://interactive-msg.s3-us-west-2.amazonaws.com/fruit_34.3kb.jpg", "imageDescription":"Select a produce to buy", "elements":[ { "title":"Apple", "subtitle":"$1.00", "imageType":"URL", "imageData":"https://interactive-message-testing.s3-us-west-2.amazonaws.com/apple_4.2kb.jpg" }, { "title":"Orange", "subtitle":"$1.50", "imageType":"URL", "imageData":"https://interactive-message-testing.s3-us-west-2.amazonaws.com/orange_17.7kb.jpg", }, { "title":"Banana", "subtitle":"$10.00", "imageType":"URL", "imageData":"https://interactive-message-testing.s3-us-west-2.amazonaws.com/banana_7.9kb.jpg", "imageDescription":"Banana" } ] }

リストピッカー制限

次の表に、独自の Lambda をゼロから構築することを選択した場合の、リストピッカーの各要素の制限を示します。必須パラメータは太文字です。

無制限のオプションを送信するには、アプリケーションにアクションボタンを実装します。詳細については、「Implementation of action buttons in interactive message list picker/panel」 (対話型メッセージリストピッカー/パネルでのアクションボタンの実装) を参照してください。

親フィールド フィールド 必要 最小文字数 最大文字数 その他の要件

templateType

はい

有効なテンプレートのタイプ

データ

はい

バージョン

はい

「1.0」を指定してください

データ

コンテンツ はい
replyMessage いいえ

content

title はい

1

400

プロンプトのないテンプレートの説明にする必要があります

elements はい

1 アイテム

6 アイテム

これは要素の配列です。配列内に最大 6 要素です。無制限の要素を送信するには、アクションボタン機能を使用します。

subtitle いいえ

0

400

imageType いいえ

0

50

「URL」である必要があります

imageData いいえ

0

200

有効なパブリック URL である必要があります

imageDescription いいえ

0

50

referenceId いいえ

文字列。アクションボタン機能にのみ必要です。

listId いいえ

文字列。アクションボタン機能にのみ必要です。

preIndex いいえ

数値。アクションボタン機能にのみ必要です。

nextIndex いいえ

数値。アクションボタン機能にのみ必要です。

templateIdentifier いいえ

数値。必ず UUID にします。リストピッカー/パネルをカルーセルで使用する場合、このフィールドは必須です

elements

title はい

1

400

subtitle いいえ

0

400

imageType いいえ

0

50

「URL」である必要があります

imageData いいえ

0

200

有効なパブリック URL である必要があります

imageDescription いいえ

0

50

イメージなしでは存在できません

actionDetail いいえ

アクションボタン機能にのみ必要です。「PREVIOUS_OPTIONS」または「SHOW_MORE」である必要があります。

replyMessage

title はい

1

400

subtitle いいえ

0

400

imageType いいえ

0

50

「URL」である必要があります

imageData いいえ

0

200

有効なパブリック URL である必要があります

imageDescription いいえ

0

50

イメージなしでは存在できません

タイムピッカーテンプレート

タイムピッカーテンプレートは、顧客がアポイントメントをスケジュールするのに役立ちます。チャットで最大 40 のタイムスロットを顧客に提供できます。

以下の画像は、タイムピッカーテンプレートを使用してチャットで情報を表示する 2 つの方法の例を示しています。

  • 1 つの画像は 1 つの日付を示していて、その下に 1 つのタイムスロットが表示されています。

  • 2 番目の画像は 1 つの日付を示していて、その下に 2 つのタイムスロットが表示されています。


                チャットで情報を表示しているタイムピッカーテンプレート。

次のコードは、Lambda で使用できるタイムピッカーテンプレートです。次の点に注意してください。

  • 太文字は必須パラメータです。

  • 場合によっては、親要素がリクエストに存在し、それは必須/太字ではないが、その中のフィールドが太字の場合、そのフィールドは必須です。例えば、次のテンプレートの data.replyMessage 構造体を参照してください。構造体が存在する場合、タイトルは必須です。そうでない場合は、replyMessage 全体が省略可能です。

{ "templateType":"TimePicker", "version":"1.0", "data":{ "replyMessage":{ "title":"Thanks for selecting", "subtitle":"Appointment selected", }, "content":{ "title":"Schedule appointment", "subtitle":"Tap to select option", "timeZoneOffset":-450, "location":{ "latitude":47.616299, "longitude":-122.4311, "title":"Oscar", "radius":1, }, "timeslots":[ { "date" : "2020-10-31T17:00+00:00", "duration": 60, }, { "date" : "2020-11-15T13:00+00:00", "duration": 60, }, { "date" : "2020-11-15T16:00+00:00", "duration": 60, } ], } } } }

タイムピッカー制限

次の表に、タイムピッカーの各要素の制限を示します。独自の Lambda をゼロから構築する場合は、この情報を使用します。必須パラメータは太文字です。

親フィールド フィールド 必要 最小文字数 最大文字数 その他の要件

templateType

はい

有効なテンプレートのタイプ

データ

はい

バージョン

はい

「1.0」を指定してください

データ

replyMessage いいえ
コンテンツ はい

replyMessage

title

はい

1

400

プロンプトのないテンプレートの説明にする必要があります

subtitle いいえ

0

400

content

title

はい

1

400

プロンプトのないテンプレートの説明にする必要があります

subtitle いいえ

0

200

timezone offset いいえ

-720

840

これは、設定されていない場合はオプションのフィールドです。サンプルクライアントのデフォルトは、ユーザーのタイムゾーンです。設定されている場合、入力したタイムゾーンごとに表示されます。フィールドは、GMT との差を分単位で表す整数で、イベントの場所のタイムゾーンを指定します。

ロケーション いいえ

timeslots はい

1

40

これはタイムスロットの配列です。配列内に最大 40 要素。

ロケーション

longitude はい

-180

180

double に限ります

latitude はい

-90

90

double に限ります

title はい

1

400

radius

いいえ

0

200

timeslots

date はい

ISO-8601 時間形式にする必要があります: YYYY-MM-DDTHH.MM+00.00

例:

「2020-08-14T21:21+00.00」

duration はい

1

3600

パネルテンプレート

パネルテンプレートを使用すると、1 つの質問に対して最大 10 個の選択肢を顧客に提示できます。ただし、選択肢ごとに画像を表示するのではなく、1 つの画像のみを含めることができます。

次の画像は、パネルテンプレートを使用してチャットで情報を表示する方法の例を示しています。メッセージの上部に画像が表示され、画像の下に「どうされましたか?」というプロンプトが表示されています。タップしてオプションを選択します。プロンプトの下に、[セルフサービスオプションの確認][エージェントとの会話][チャットの終了] という 3 つのオプションが顧客に表示されます。


                チャットで情報を表示しているパネルテンプレート。

次のコードは、Lambda で使用できるパネルテンプレートです。次の点に注意してください。

  • 太文字は必須パラメータです。

  • 場合によっては、親要素がリクエストに存在し、それは必須/太字ではないが、その中のフィールドが太字の場合、そのフィールドは必須です。例えば、次のテンプレートの data.replyMessage 構造体を参照してください。構造体が存在する場合、タイトルは必須です。そうでない場合、replyMessage 全体が省略可能です。

{ "templateType":"Panel", "version":"1.0", "data":{ "replyMessage":{ "title":"Thanks for selecting!", "subtitle":"Option selected", }, "content":{ "title":"How can I help you?", "subtitle":"Tap to select option", "imageType":"URL", "imageData":"https://interactive-msg.s3-us-west-2.amazonaws.com/company.jpg", "imageDescription":"Select an option", "elements":[ { "title":"Check self-service options", }, { "title":"Talk to an agent", }, { "title":"End chat", } ] } } }

パネルの制限

次の表に、独自の Lambda をゼロから構築することを選択した場合の、パネルの各要素の制限を示します。必須パラメータは太文字です。

無制限のオプションを送信するには、アプリケーションにアクションボタンを実装します。詳細については、「Implementation of action buttons in interactive message list picker/panel」 (対話型メッセージリストピッカー/パネルでのアクションボタンの実装) を参照してください。

親フィールド フィールド 必要 最小文字数 最大文字数 その他の要件

templateType

はい

有効なテンプレートのタイプ

データ

はい

バージョン

はい

「1.0」を指定してください

データ

replyMessage いいえ
コンテンツ はい

content

title はい

1

400

プロンプトのないテンプレートの説明にする必要があります

subtitle いいえ

0

400

elements はい

1 アイテム

10 項目

これは要素の配列です。配列内に最大 10 要素。

imageType いいえ

0

50

「URL」である必要があります

imageData いいえ

0

200

有効なパブリック URL である必要があります

imageDescription いいえ

0

50

イメージなしでは存在できません

referenceId いいえ

文字列。アクションボタン機能にのみ必要です。

listId いいえ

文字列。アクションボタン機能にのみ必要です。

preIndex いいえ

数値。アクションボタン機能にのみ必要です。

nextIndex いいえ

数値。アクションボタン機能にのみ必要です。

templateIdentifier いいえ

数値。必ず UUID にします。リストピッカー/パネルをカルーセルで使用する場合、このフィールドは必須です

elements

title はい

1

400

actionDetail いいえ

アクションボタン機能にのみ必要です。「PREVIOUS_OPTIONS」または「SHOW_MORE」である必要があります。

replyMessage

title はい

1

400

subtitle いいえ

0

400

クイック返信テンプレート

クイック返信メッセージを使うと、カスタマーからの簡単な返答やカスタマーへの返答をインラインリストで取得できます。1 つのクイック返信メッセージで最大 5 つのオプションをカスタマーに提示できます。画像はクイック返信には対応していません。

次の画像は、クイック返信テンプレートを使用してチャットで情報を表示する方法の例を示しています。


                チャットで情報を表示しているパネルテンプレート。

次のコードは、Lambda で使用できるクイック返信テンプレートです。

{ "templateType": "QuickReply", "version": "1.0", "data": { "content": { "title": "Which department would you like?", "elements": [ { "title": "Billing" }, { "title": "Cancellation" }, { "title": "New Service" } ] } } }

クイック返信の制限

次の表に、クイック返信の各要素の制限を示します。独自の Lambda をゼロから構築する場合は、この情報を使用します。必須パラメータは太文字です。

フィールド 必要 最小文字数 最大文字数 その他の要件

templateType

有効なテンプレートのタイプ

データ

はい

バージョン

はい

「1.0」を指定してください

content

はい
title はい

1

400

プロンプトのないテンプレートの説明にする必要があります

elements はい

2 アイテム

5 アイテム

これは要素の配列です。配列内の最小 2 つの要素、最大 5 つの要素。

title はい

1

200

カルーセルを使用すると、1 つのメッセージで最大 5 つのリストピッカーまたはパネルをカスタマーに表示できます。リストピッカーやタイムピッカーと同様に、SHOW_MORE 機能を使用してカルーセルにオプションを追加できます。

次の GIF は、カルーセルテンプレートを使用してチャットで情報を表示する方法の例を示しています。カスタマーは左右の矢印を使用して画像のカルーセルをスクロールします。


                カスタマーのチャットエクスペリエンスのカルーセル。

次の図は、カルーセルピッカーのハイパーリンク要素の例である 2 つの [詳細はこちら] ハイパーリンクを示しています。


                ハイパーリンク付きのカルーセルピッカー。

次のコードは、Lambda で使用できるカルーセルテンプレートです。

{ "templateType": "Carousel", "version": "1.0", "data": { "content": { "title": "View our popular destinations", "elements": [ { "templateIdentifier": "template0", "templateType": "Panel", "version": "1.0", "data": { "content": { "title": "California", "subtitle": "Tap to select option", "elements": [ { "title": "Book flights" }, { "title": "Book hotels" }, { "title": "Talk to agent" } ] } } }, { "templateIdentifier": "template1", "templateType": "Panel", "version": "1.0", "data": { "content": { "title": "New York", "subtitle": "Tap to select option", "elements": [ { "title": "Book flights" }, { "title": "Book hotels" }, { "title": "Talk to agent" } ] } } } ] } } }

ホスト型コミュニケーションウィジェットユーザーの場合:

  • カルーセルテンプレートで選択すると、次の例のような構造の JSON 文字列レスポンスが返され、Lambda に送り返されます (他のインタラクティブメッセージタイプは selectionText 値のみの通常の文字列レスポンスを返します)。

    { templateIdentifier: "template0", listTitle: "California", selectionText: "Book hotels" }
  • カルーセルでは、リストピッカー/パネル要素にハイパーリンクを指定できます。ボタンの代わりにハイパーリンクを作成するには、ハイパーリンクにすべき要素に次のフィールドを追加してください。

    { title: "Book flights", ... type: "hyperlink", url: "https://www.example.com/Flights" }

次の表に、カルーセルの各要素の制限を示します。独自の Lambda をゼロから構築する場合は、この情報を使用します。必須パラメータは太文字です。

親フィールド フィールド 必要 最小文字数 最大文字数 その他の要件

templateType

はい

有効なテンプレートのタイプ

データ

はい

バージョン

はい

「1.0」を指定してください

データ

コンテンツ はい

content

title はい

1

400

プロンプトのないテンプレートの説明にする必要があります

elements はい

2 アイテム

5 アイテム

これは、リストピッカーまたはパネルテンプレートの配列です。カルーセルごとに受け入れられるインタラクティブメッセージタイプは 1 つだけです。各要素には、最上位のフィールド TemplateIdentifier を含める必要があります。配列に含めるテンプレートは最小 2 つ、最大 5 つです。

注記

カスタマーエクスペリエンスを最大限に高めるには、各テンプレートで画像または要素の数を一貫して使用することをお勧めします。

omitTitleFromCarouselResponse いいえ

ブール値 - オプションで、デフォルトのPickerTitle「:SelectionText」ではなく「」で応答しますSelectionText

carouselIsVertical いいえ

Boolean - オプションで、垂直スクロールを使用して Carousel 要素をレンダリングします。

チャットメッセージのタイトルとサブタイトルにリッチ書式設定を追加できます。例えば、リンク、斜体、太字、番号付きリスト、箇条書きリストを追加できます。マークダウンを使用してテキストの書式を設定します。

チャットボックスの次の画像は、タイトルとサブタイトルにリッチ書式設定を使用したリストピッカーの例を示しています。

  • タイトル「お問い合わせ内容をご記入ください。aws.amazon.com」は太字で、リンクが含まれています。

  • サブタイトルには、斜体と太字のテキスト、箇条書きリスト、番号付きリストが含まれています。また、プレーンリンク、テキストリンク、サンプルコードも表示されます。

  • チャットボックスの下部には、3 つのリストピッカー要素が表示されます。


                チャットボックス、リンク付きのタイトル、リストとリンクを含むサブタイトル。

マークダウンでテキストをフォーマットする方法

タイトルとサブタイトルの文字列は、複数行形式、または改行文字 `\r\n` を含む 1 行で記述できます。

  • 複数行形式: 次のコードサンプルは、複数行形式においてマークダウンでリストを作成する方法を示しています。

    const MultiLinePickerSubtitle = `This is some *emphasized text* and some **strongly emphasized text** This is a bulleted list (multiline): * item 1 * item 2 * item 3 This is a numbered list: 1. item 1 2. item 2 3. item 3 Questions? Visit https://plainlink.com/faq [This is a link](https://aws.amazon.com) This is \`\` ` const PickerTemplate = { templateType: "ListPicker|Panel", version: "1.0", data: { content: { title: "How can we help?", subtitle: MultiLinePickerSubtitle, elements: [ /* ... */ ] } } }
  • 単一行形式: 次の例は、改行文字 `\r\n` を使用して 1 行のサブタイトルを作成する方法を示しています。

    const SingleLinePickerSubtitle = "This is some *emphasized text* and some **strongly emphasized text**\r\nThis is a bulleted list:\n* item 1\n* item 2\n* item 3\n\nThis is a numbered list:\n1. item 1\n2. item 2\n3. item 3\n\nQuestions? Visit https://plainlink.com/faq\r\n[This is a link](https://aws.amazon.com)\r\nThis is `<code/>`"; const PickerTemplate = { templateType: "ListPicker|Panel", version: "1.0", data: { content: { title: "How can we help?", subtitle: SingleLinePickerSubtitle, elements: [ /* ... */ ] } } }

次の例は、マークダウンを使用して斜体と太字のテキストを書式設定する方法を示します。

This is some *emphasized text* and some **strongly emphasized text**

次の例は、マークダウンを使用してテキストをコードとして書式設定する方法を示します。

This is `<code />`

マークダウンを使用してリンクを書式設定する方法

リンクを作成するには、次の構文を使用します。

[aws](https://aws.amazon.com)

次の例は、マークダウンを使用してリンクを追加する 2 つの方法を示しています。

Questions? Visit https://plainlink.com/faq

[This is a link](https://aws.amazon.com)