고객의 채팅 경험을 위해 Amazon Connect에서 텍스트 서식 활성화

새 채팅 사용자 인터페이스를 만들면 리치 텍스트 서식이 바로 활성화됩니다. 추가 구성은 필요하지 않습니다.

기존 채팅 사용자 인터페이스에 텍스트 서식 기능을 추가하려면 굵게 강조 표시된 다음 코드로 커뮤니케이션 위젯 코드를 업데이트합니다.

    (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의 굵게 표시된 마지막 줄뿐입니다.

사용자 지정 채팅 사용자 인터페이스에 텍스트 서식 기능을 추가하려면 다음 단계를 따릅니다(예: 채팅 인터페이스 또는 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을 참조로 사용할 수 있습니다.