지원되는 포맷 유형 메시지 서식 활성화 이메일 및 전화 링크 추가 방법 챗봇 메시지 추가 방법

고객의 채팅 경험에 텍스트 서식 활성화

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. 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 API를 통해 마크다운 텍스트를 보내는 방법에 대한 자세한 내용은 다음 주제를 참조하십시오. StartChat연락처 및. SendMessage
3. 마크다운이 포함된 메시지를 보냅니다. 메시지를 보내는 방법의 예는 chatjs를 객체로 가져오기 위한 이전 코드 조각을 참조하세요. 간단한 마크다운을 사용하여 채팅에서 텍스트 서식을 지정할 수 있습니다. 현재 이미 chat.js를 사용하여 일반 텍스트 메시지를 보내고 있다면 마크다운 메시지를 보낼 text/plain 때 contentType 대신 text/markdown as를 SendMessage호출하도록 기존 로직을 수정할 수 있습니다. 메시지의 마크다운 형식을 갖도록 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)