フローブロック: ビューを表示

説明

• このフローブロックを使用して、Amazon Connect エージェントワークスペースを使用しているエージェントのstep-by-step ガイドを作成します。これらのガイドは、一貫した方法でお客様と対話するための手順をワークフロー形式でエージェントに案内します。

• [ビューを表示] ブロックを含むフローにコンタクトがルーティングされると、ビューと呼ばれる UI テンプレートがエージェントワークスペースにレンダリングされます。この UI テンプレートは step-by-step ガイドを表します。

このブロックのユースケース

このフローブロックは、エージェントに次の手順を案内するように設計されています。

• 予約、支払い管理、新規発注など、一般的なタスクをお客様のために実行する。

• テンプレートに基づいてメールを送信し、返金リクエストが送信されたことをお客様に知らせる。メールの構造は常に同じですが、注文番号、返金額、支払い口座など、具体的な値は変更できます。これらの情報をエージェントが提供できるように、[ビューを表示] ブロックを設定できます。

• 既存のエージェントワークスペースに新しいCRMエントリを作成します。コンタクト属性を使用して、顧客の名前や電話番号などの関連情報をフォームにあらかじめ入力します。

コンタクトのタイプ

コンタクトのタイプ	サポート対象?
音声	あり
チャット	あり
タスク	いいえ

フロータイプ

このブロックは、次のフロータイプで使用できます。

フロータイプ	サポート対象?
着信フロー	あり
顧客保留フロー	なし
顧客ウィスパーフロー	なし
アウトバウンドウィスパーフロー	なし
エージェント保留フロー	なし
エージェントウィスパーフロー	なし
エージェントへの転送フロー	なし
キューへの転送フロー	なし

このブロックの設定方法

表示ブロックを設定するには、 Amazon Connect 管理者ウェブサイトを使用するか、Amazon Connect フロー言語で ShowViewアクションを使用します。

ビューリソースを選択する

Amazon Connect には、エージェントのワークスペースを追加できる一連のビューが用意されています。[表示] ボックスでビューを指定します (下図を参照)。

これらの AWS マネージドビューの簡単な説明を次に示します。各ビューの詳細については、「AWS マネージドビュー」を参照してください。

• 詳細ビュー： エージェントに情報を表示し、エージェントが実行できるアクションのリストを提供します。[Detail] ビューの一般的なユースケースは、通話の開始時にエージェントにポップアップを表示することです。

• リストビュー： タイトルと説明を含む項目のリストとして情報を表示します。項目は、アクションを割り当てられたリンクとして機能する場合もあります。オプションで、標準のバックナビゲーションと永続的なコンテキストヘッダーもサポートしています。

• フォームビュー : 必要なデータを収集し、バックエンドシステムにデータを送信するための入力フィールドをエージェントに提供します。このビューは、ヘッダー付きの定義済みのセクションスタイルを持つ複数のセクションで構成されます。本体は、列またはグリッドレイアウト形式で配置されたさまざまな入力フィールドで構成されています。

• 確認ビュー : フォームの送信後、またはアクションの完了後にエージェントを表示するページ。この事前構築されたテンプレートでは、何が起こったかの概要、次のステップ、およびプロンプトを提供できます。[Confirmation] ビューでは、固定属性バー、アイコン/画像、見出し、小見出し、ホームに戻るナビゲーションボタンがサポートされています。

• カードビュー： 問い合わせがエージェントに提示されたときに選択するトピックのリストをエージェントに提示することで、エージェントをガイドできます。

[ビューを表示] ブロックのプロパティは、選択したビューリソースに応じて動的に読み込まれます。例えば、[Form] を選択した場合は、[Next] アクションと [Previous] アクションを設定するため、これらが表示されます。これらはビューのアクションのほんの一部です。

以下のセクションでは、フォームアクションを手動、動的、または JSONオプションを使用して設定する方法について説明します。

[手動で設定] オプションの使用方法

1. [プロパティ] ページの [表示] セクションで、ドロップダウンメニューから [Form] を選択し、[バージョンを使う] をデフォルトの 1 に設定します。次の図では、[プロパティ] ページでこれらのオプションが設定されています。

   

2. [プロパティ] ページには、[Form] ビューに基づいて一連のフィールドが表示されます。[手動で設定] を選択し、ビュー UI コンポーネントにレンダリングするテキストを入力します。次の図には、[Next] と [Previous] の UI コンポーネントが表示されています。コンポーネントの表示名は手動で [Next] と [Previous] に設定されています。これは、 step-by-step ガイドがレンダリングされたときにエージェントワークスペースに表示されるものです。

   

[動的に設定] オプションの使用方法

1. [プロパティ] ページの [表示] セクションで、ドロップダウンメニューから [Form] を選択し、[バージョンを使う] をデフォルトの 1 に設定します。次の図では、[プロパティ] ページでこれらのオプションが設定されています。

   

2. [プロパティ] ページには、[Form] ビューに基づいて一連のフィールドが表示されます。[Set dynamically] (動的に設定) を選択します。[名前空間] ドロップダウンメニューで、コンタクト属性を選択し、キーを選択します。次の画像は、 step-by-step ガイドで動的にレンダリングされる見出しを示し、顧客の姓を表示します。

   

設定JSONオプションの使用方法

このセクションでは、Set JSONオプションの使用方法の例について説明します。

1. [ビューを表示] ブロックの [プロパティ] ページの [表示] セクションで、ドロップダウンメニューから [Form] を選択し、[バージョン] をデフォルトの 1 に設定します。これらのオプションは、次の画像に示されています。

   

2. [Form] ビューを選択した場合、ビューの入力スキーマが [プロパティ] ページに表示されます。スキーマには、次のセクションがあり、情報を追加できます: セクション 、AttributeBar、バック 、キャンセル 、編集 、 ErrorTextなど。

3. 次の図は、 AttributeBarパラメータと を使用して設定 JSON オプションを示しています。JSON 貼り付けたすべての を表示するには、ボックスの角をクリックしてプルダウンします。

   

   ヒント

   JSON が無効な場合はエラーを修正します。以下の画像は、カンマが余分にあるため発生したエラーメッセージの例を示しています。

   

4. [保存] を選択して、準備ができたら公開してください。

次のコードサンプルは、この同じ設定がフロー言語の ShowViewアクションでどのように表されるかを示しています。

{
      "Parameters": {
        "ViewResource": {
          "Id": "arn:aws:connect:us-west-2:aws:view/form:1"
        },
        "InvocationTimeLimitSeconds": "2",
        "ViewData": {
          "Sections": "Sections",
          "AttributeBar": [
            {
              "Label": "Example",
              "Value": "Attribute"
            },
            {
              "Label": "Example 2",
              "Value": "Attribute 2"
            },
            {
              "Label": "Example 3",
              "Value": "Case 123456",
              "LinkType": "case",
              "ResourceId": "123456",
              "Copyable":true
            },
            {
              "Label": "Example 3",
              "Value": "Case 123456",
              "LinkType": "case",
              "ResourceId": "https:example.com"
            }
          ],
          "Back": {
            "Label": "Back"
          },
          "Cancel": {
            "Label": "Cancel"
          },
          "Edit": "Edit",
          "ErrorText": "ErrotText",
          "Heading": "$.Customer.LastName",
          "Next": "Next",
          "Previous": "Previous",
          "SubHeading": "$.Customer.FirstName",
          "Wizard": {
            "Heading": "Progress tracker",
            "Selected": "Step Selected"
          }
        }
      },
      "Identifier": "53c6be8a-d01f-4dd4-97a5-a001174f7f66",
      "Type": "ShowView",
      "Transitions": {
        "NextAction": "7c5ef809-544e-4b5f-894f-52f214d8d412",
        "Conditions": [
          {
            "NextAction": "7c5ef809-544e-4b5f-894f-52f214d8d412",
            "Condition": {
              "Operator": "Equals",
              "Operands": [
                "Back"
              ]
            }
          },
          {
            "NextAction": "7c5ef809-544e-4b5f-894f-52f214d8d412",
            "Condition": {
              "Operator": "Equals",
              "Operands": [
                "Next"
              ]
            }
          },
          {
            "NextAction": "7c5ef809-544e-4b5f-894f-52f214d8d412",
            "Condition": {
              "Operator": "Equals",
              "Operands": [
                "Step"
              ]
            }
          }
        ],
        "Errors": [
          {
            "NextAction": "b88349e3-3c54-4915-8ea0-818601cd2d03",
            "ErrorType": "NoMatchingCondition"
          },
          {
            "NextAction": "7c5ef809-544e-4b5f-894f-52f214d8d412",
            "ErrorType": "NoMatchingError"
          },
          {
            "NextAction": "b88349e3-3c54-4915-8ea0-818601cd2d03",
            "ErrorType": "TimeLimitExceeded"
          }
        ]
      }
    }

フローブロックのブランチ

次の図は、設定済みの [ビューを表示] ブロックの例を示しています。このブロックは条件分岐に対応しています。つまり、選択したビューによってブランチは異なります。また、[エラー] ブランチと [タイムアウト] ブランチにも対応しています。

• 条件分岐: これらのブランチは、[ビューを表示] ブロックで選択されているビューによって決まります。上図では、ブロックが [Form] ビュー用に設定され、[戻る]、[次へ]、[一致なし] というアクションが表示されています。

  • この特定の設定では、チャットのコンタクトは、ランタイムにエージェントがビューでクリックした対象に応じて、[戻る] または [次へ] のブランチにルーティングされます。[一致なし] は、ユーザーがカスタムアクション値のあるアクションコンポーネントを持っている場合のみ可能です。

• エラー: 実行に失敗した (エージェントワークスペースでビューをレンダリングできない、またはビューの出力アクションを取得できない) 場合は、[エラー] ブランチに分岐します。

• タイムアウト： step-by-step ガイドのこのステップでエージェントが完了するまでにかかる時間を指定します。[タイムアウト] の指定値よりもステップの完了に時間がかかった場合 (例えば、指定された時間内にエージェントが必要な情報を提供しなかった場合)、そのステップは [タイムアウト] ブランチに分岐します。

  ステップがタイムアウトすると、 step-by-step ガイドはフローで定義されたロジックに従って次のステップを決定できます。例えば、次のステップとして、あらためて情報の提示を求める、ガイドエクスペリエンスを停止するなどが考えられます。

  この時点でお客様はエージェントとつながっているため、タイムアウトによるカスタマーエクスペリエンスの変化はありません。

追加の設定のヒント

step-by-step ガイドを使用できるように、エージェントに次のセキュリティプロファイルのアクセス許可を割り当てます。

• エージェントアプリケーション - カスタムビュー - すべて : このアクセス許可により、エージェントはエージェントワークスペースで step-by-step ガイドを表示できます。

マネージャーとビジネスアナリストが step-by-step ガイドを作成できるように、次のセキュリティプロファイルのアクセス許可をマネージャーとビジネスアナリストに割り当てます。

• チャネルとフロー - 表示 : このアクセス許可により、マネージャーは step-by-step ガイドを作成できます。

既存のセキュリティプロファイルにアクセス許可を追加する方法については、「セキュリティプロファイルの更新」を参照してください。

このブロックで生成されるデータ

ランタイムに、[ビューを表示] ブロックは、ビューリソースの実行時に出力されるデータを生成します。ビューは主に次の 2 つのデータを生成します。

• レンダリングされたビュー UI (エージェントワークスペース上) で実行された Action と、Output データである ViewResultData。

  [ビューを表示] ブロックを使用する場合、[アクション] はブランチを表し、Views 名前空間の下位の $.Views.Action コンタクト属性に設定されます。

• Output データは Views 名前空間の下位の $.Views.ViewResultData コンタクト属性に設定されます。

  Action の値と Output データは、エージェントがビューリソースの使用中にやり取りしたコンポーネントによって決まります。

フローの各部でこのデータを使用する方法

• ブロックはライアントアプリケーションからレスポンスを受け取ると、出力データをフローで参照するため、 `$.Views.Action と $.Views.ViewResultData を使用します。

• [ビューを表示] ブロックでビューを使用する場合、Action は Views 名前空間の下位のコンタクト属性 $.Views.Action で取得されたブランチを表し、ビューの出力データは $.Views.ViewResultData コンタクト属性に設定されます。

• 問い合わせ属性のJSONパス (手動で設定または設定JSONオプションで問い合わせ属性を指定) を使用するか、動的に を設定する を選択したときに属性セレクタドロップダウンを使用して、表示ブロックによって生成されたデータを参照できます。

エラーシナリオ

注記

ShowView ブロックがエラーブランチ (一致、タイムアウト、エラーなし) を受け取ると、フローをフロー内の前のポイントにルーティングし直すことができます。このようなループをフローに作成した場合、チャットの問い合わせがタイムアウトするまで、問い合わせフローは無限に実行できます。Loop 問い合わせフローブロックを使用して、特定のShowViewブロックの再試行回数を制限することをお勧めします。

コンタクトは、次の状況で [エラー] ブランチへルーティングされます。

• Amazon Connect は、エージェントワークスペースのビュー UI コンポーネントでユーザーアクションをキャプチャできません。これは、断続的なネットワークの問題またはメディアサービス側の問題が原因である可能性があります。

フローログのエントリ

Amazon Connect フローログには、お客様との対話中にフローのイベントに関する詳細がリアルタイムで記録されます。詳細については、「お客様がフローとやり取りしている間にイベントを追跡する」を参照してください。

サンプル ShowView 入力 (入力ログ) に従う

{
  "ContactId": "string",
  "ContactFlowId": "string",
  "ContactFlowName": "string",
  "ContactFlowModuleType": "ShowView",
  "Timestamp": "2023-06-06T16:08:26.945Z",
  "Parameters": {
    "Parameters": {
      "Cards": [
        {
          "Summary": {
            "Id": "See",
            "Heading": "See cancel options"
          }
        },
        {
          "Summary": {
            "Id": "Change",
            "Heading": "Change Booking"
          }
        },
        {
          "Summary": {
            "Id": "Get",
            "Heading": "Get Refund Status"
          }
        },
        {
          "Summary": {
            "Id": "Manage",
            "Heading": "Manage rewards"
          }
        }
      ],
      "NoMatchFound": {
        "Label": "Do Something Else",
        "type": "bubble"
      }
    },
    "TimeLimit": "300",
    "ViewResourceId": "cards"
  }
}   

ShowView 出力例に従う (出力ログ）

{
  "Results": "string",
  "ContactId": "string",
  "ContactFlowId": "string",
  "ContactFlowName": "string",
  "ContactFlowModuleType": "ShowView",
  "Timestamp": "2023-06-06T16:08:35.201Z"
} 

サンプルフロー

次のブログのステップ 2 のサンプルフローをダウンロードできます: step-by-step ガイド の開始方法。このブログの手順を実行して、 AWSマネージドビューが設定されたフローの作成方法や、インバウンドのメディアコンタクトに対してこれらのフローを実行する方法を学ぶことをお勧めします。

その他のリソース

step-by-step ガイドとビューの詳細については、以下のトピックを参照してください。

• S tep-by-step ガイド

• カスタマーマネージドビューを設定する step-by-step 方法については、「カスタマーマネージドビュー」を参照してください。

• インスタンスでの plug-and-play step-by-step ガイドエクスペリエンスの設定については、「ガイドの開始方法 step-by-step 」を参照してください。

• AWSマネージドビュー - 共通設定

• Views - UI Components

• Amazon Connect リファレンス のアクションを表示します。 Amazon Connect API