고객의 채팅 경험을 위한 텍스트 서식을 활성화하세요

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 때contentType 대신text/markdown as를 SendMessage호출하도록 기존 로직을 수정할 수 있습니다. 메시지의 마크다운 형식을 포함하도록sendMessage 매개 변수를 업데이트해야 합니다. 자세한 내용은 마크다운 가이드의 기본 구문을 참조하세요.

   4. UI 패키지에 고유한 로직을 구현하여 입력 영역 및 채팅 트랜스크립트에서 마크다운 메시지를 렌더링하세요. React를 사용하는 경우 react-markdown을 참조로 사용할 수 있습니다.

참고

텍스트 서식 기능은 채팅 사용자 인터페이스에서 고객이 해당 기능을 사용하도록 설정한 경우에만 상담원에게 표시됩니다. 고객 채팅 사용자 인터페이스에서 텍스트 서식이 지원되거나 활성화되지 않는 경우 상담원은 텍스트 서식을 사용하여 메시지를 작성하고 보낼 수 없습니다.