顧客のチャットエクスペリエンスのためのテキストフォーマットを有効にする

Amazon Connect メッセージの書式設定を使用すると、顧客とエージェントは、チャットメッセージに構造と明瞭さをすばやく追加できます。

マークダウンを使用して、チャットユーザーインターフェイスとエージェントアプリケーションの両方で、次の種類の書式を設定できます。

• 太字

• イタリック

• 箇条書き

• 番号付きリスト

• ハイパーリンク

• 絵文字

• アタッチメント。添付ファイルを有効にするには、添付ファイルを有効にして、チャットを使用してファイルを共有したり、ファイルをケースにアップロードしたりする に従います。

メッセージの書式設定を有効にする方法

1. 新しいチャットユーザーインターフェイスを作成する場合、リッチテキストフォーマットがすぐに有効になります。追加の設定は必要ありません。

2. 既存のチャットユーザーインターフェイスにテキストの書式設定機能を追加するには、次に示す太字でハイライトされているコードでチャットウィジェットコードを更新します。

   
       (function(w, d, x, id){
           s=d.createElement('script');
           s.src='https://d3xxxx.cloudfront.net/amazon-connect-chat-interface-client.js';
           s.async=1;
           s.id=id;
           d.getElementsByTagName('head')[0].appendChild(s);
           w[x] =  w[x] || function() { (w[x].ac = w[x].ac || []).push(arguments) };
       })(window, document, 'amazon_connect', 'widget-id');
       amazon_connect('styles', { openChat: { color: 'white', backgroundColor: '#123456'}, closeChat: { color: 'white', backgroundColor: '#123456'} });
       amazon_connect('snippetId', 'snippet-id');
       amazon_connect('supportedMessagingContentTypes', [ 'text/plain', 'text/markdown' ]);
                   

   赤くハイライトされているコードは、Amazon Connect コンソールからスニペットを取得した際に正しい値に設定されます。追加または削除するコンテンツは、supportedMessagingContentTypes の太字の最後の行のみです。

3. 独自のカスタムチャットユーザーインターフェイス (例えば、チャットインターフェイスまたは ChatJs の独自の UI ソリューション) にテキストの書式設定機能を追加するには、以下の手順を実行します。

   1. StartChatContact API を呼び出します。StartChatContact を呼び出した際に、次の太字で示されている SupportedMessagingContentTypes パラメータを追加します。

      // Amazon Connect StartChatContact API
      {
          "Attributes": { 
              "string" : "string" 
          },
          "ClientToken": "string",
          "ContactFlowId": "your flow ID",
          "InitialMessage": { 
              "Content": "string",
              "ContentType": "string"
          },
          "InstanceId": "your instance ID",
          "ParticipantDetails": { 
              "DisplayName": "string"
          }
          
          // optional
         "SupportedMessagingContentTypes": [ "text/plain", "text/markdown" ]
      }

   2. 次の例に示すように、オブジェクトとして chatjs をインポートします。

      import "amazon-connect-chatjs";
      
      this.session = connect.ChatSession.create({
            ...
          });
      
      this.session.sendMessage({
            message: "message-in-markdown-format",
            contentType: "text/markdown"
      });           

      ChatJS を使用しない場合、Amazon Connect API を介してマークダウンテキストを送信する方法については、次の「StartChatContact」、「SendMessage」のトピックを参照してください。

   3. マークダウンでメッセージを送信します。メッセージの送信方法の例として、オブジェクトとして chatjs をインポートするための、前のコードスニペットを参照してください。チャット内のテキストの書式設定には、シンプルなマークダウンを使用できます。既にプレーンテキストメッセージを送信するために chatjs を使用している場合は、マークダウンメッセージを送信する際に text/plain の代わりに text/markdown を contentType として SendMessage を呼び出すために、既存のロジックを変更できます。必ず sendMessage パラメータを更新して、メッセージのマークダウン形式を指定してください。詳細については、「マークダウンガイドの基本的な構文」を参照してください。

   4. UI パッケージに独自のロジックを実装して、入力エリアとチャットトランスクリプトにマークダウンメッセージをレンダリングします。React を使用する場合は、react-markdownを参照できます。

注記

テキストフォーマット機能は、顧客に対してチャットユーザーインターフェイスで有効になっている場合にのみ、エージェントに表示されます。カスタマーチャットのユーザーインターフェイスで、テキストフォーマットがサポートされていないか、有効になっていない場合は、エージェントはテキストフォーマットを使用してメッセージを作成し、送信することができません。