顧客のチャットエクスペリエンスのためのテキストフォーマットを有効にする - Amazon Connect
サポートされているフォーマットタイプメッセージの書式設定を有効にするE メールと電話のリンクを追加する方法Chatbot メッセージを追加する方法

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

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

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. StartChat問い合わせ 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 APIs: StartChat連絡先 および SendMessage。

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

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

注記

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

  • クイックレスポンスでは、添付ファイル以外のすべてのテキスト形式機能を使用できます。

次の例は、クリックおよび呼び出し可能なリンクをウェブおよびモバイルアプリケーションに追加する方法を示しています。

Call us today: [+1 (123) 456-7890](tel:+11234567890)
[Call Us](tel:+11234567890)
[Skype Us](callto:+91123-456-7890)
[Fax Us](fax:+91123-456-7890)
[Text Us](SMS:+91123-456-7890)
[Email Us](mailto:name@email.com)

Chatbot メッセージを追加する方法

チャットメッセージのマークダウンを有効にすると、次のタイプの Chatbot メッセージにリッチテキストフォーマットを使用できます。

次の図は、再生プロンプトフローブロックでプロンプトを手動で有効にする方法を示しています。

フローブロックと 2 つのリンクを含むプロンプトの画像。1 つはよくある質問用、もう 1 つは電話番号用です。

次の図は、顧客入力の取得フローブロックでプロンプトを手動で有効にし、フローブロックを Amazon Lex ボットに関連付ける方法を示しています。

フローブロックと 2 つのリンクを含むプロンプトの画像。1 つはよくある質問用、もう 1 つは電話番号用です。

次の図は、SYSTEM_MESSAGE およびさまざまな BOT メッセージタイプにプロンプトがどのように表示されるかを示しています。

SYSTEM メッセージと BOT メッセージ内の「よくある質問を確認する」リンクと「電話をかける」リンクを示す画像。

次の図は、Amazon Lex ボットインテントでプロンプトを設定する方法を示しています。

よくある質問と電話番号の 2 つのリンクを含むプロンプトを含む Amazon Lex インテントの画像。

インテントの詳細については、Amazon Lex V2 デベロッパーガイド」の「インテントの追加」を参照してください。Lambda メッセージの詳細については、Amazon Lex V2 Lex V2 デベロッパーガイド」の AWS 「Lambda 関数 でカスタムロジックを有効にする」を参照してください。