채팅에 대화형 메시지 추가 - Amazon Connect

기계 번역으로 제공되는 번역입니다. 제공된 번역과 원본 영어의 내용이 상충하는 경우에는 영어 버전이 우선합니다.

채팅에 대화형 메시지 추가

대화형 메시지는 프롬프트와 함께 고객이 선택할 수 있도록 사전 구성된 디스플레이 옵션을 제공하는 풍부한 메시지입니다. 이러한 메시지는 Amazon Lex가 제공하며 Lambda를 사용하여 Amazon Lex를 통해 구성됩니다.

작은 정보

Apple Messages for Business와 통합한 경우 Apple 웹 사이트의 대화형 메시지 유형을 참조하세요.

검증 제한

문자열 필드 제한(예: 제목, 부제 등)은 클라이언트(즉, 사용자 지정 구축 인터페이스 또는 호스팅된 커뮤니케이션 위젯)에 의해 적용될 것으로 예상됩니다. SendMessageAPI는 문자열의 총 크기가 20KB 미만인지만 확인합니다.

  • 호스팅된 커뮤니케이션 위젯을 사용자 지정하지 않고 사용하는 경우, 문자열이 필드 제한을 초과하면 사용자 인터페이스에서 문자열이 잘리고 줄임표(...)가 추가됩니다. 위젯을 사용자 지정하여 필드 제한을 적용하는 방법을 결정할 수 있습니다.

  • 다른 플랫폼(예: Apple Messages for Business)과 통합하는 경우 이 주제에 나와 있는 Amazon Connect의 제한을 검토하고, 다른 플랫폼의 경우 설명서에 나와 있는 제한을 검토하세요. 예를 들어 이전 버전의 iOS에서는 빠른 회신이 지원되지 않습니다.

메시지를 성공적으로 보내려면 다른 모든 필드 제한을 준수해야 합니다.

메시지 표시 템플릿

Amazon Connect는 채팅에서 고객에게 정보를 렌더링하는 데 사용할 수 있는 다음과 같은 메시지 표시 템플릿을 제공합니다.

이 템플릿은 채팅 인터페이스에서 정보가 렌더링되는 방식과 표시되는 정보를 정의합니다. 채팅을 통해 대화형 메시지를 보내는 경우 흐름은 메시지 형식이 이러한 템플릿 중 하나를 따르는지 검증합니다.

목록 선택기 템플릿

목록 선택기 템플릿을 사용하여 고객에게 최대 6개의 선택 항목이 포함된 목록을 제공할 수 있습니다. 각 선택 항목에는 고유한 이미지가 있을 수 있습니다.

다음 이미지는 목록 선택기 템플릿이 채팅에서 정보를 렌더링하는 방식의 두 가지 예를 보여 줍니다.

  • 첫 번째 이미지는 세 개의 버튼을 보여 주며 각 버튼에는 사과, 오렌지, 바나나 등 과일 이름이 텍스트로 표시되어 있습니다.

  • 두 번째 이미지는 매장의 사진과 그 아래에 있는 세 개의 버튼을 보여 주며 각 버튼에는 과일의 이름, 이미지, 가격이 표시되어 있습니다.


                채팅에서 정보를 렌더링하는 목록 선택기 템플릿.

다음 코드는 Lambda에서 사용할 수 있는 목록 선택기 템플릿입니다. 다음을 참고합니다.

  • 굵은 텍스트는 필수 파라미터입니다.

  • 요청에 상위 요소가 있는데 해당 상위 요소는 필수이거나 굵게 표시되어 있지 않기도 합니다. 이 경우 그 안에 있는 필드가 굵게 표시되어 있다면 해당 필드는 필수입니다. 예를 들어, 다음 템플릿의 data.replyMessage 구조를 확인합니다. 이 구조가 있는 경우 제목은 필수입니다. 그렇지 않으면 전체 replyMessage는 선택 사항입니다.

{ "templateType":"ListPicker", "version":"1.0", "data":{ "replyMessage":{ "title":"Thanks for selecting!", "subtitle":"Produce selected", "imageType":"URL", "imageData":"https://interactive-msg.s3-us-west-2.amazonaws.com/fruit_34.3kb.jpg", "imageDescription":"Select a produce to buy" }, "content":{ "title":"What produce would you like to buy?", "subtitle":"Tap to select option", "imageType":"URL", "imageData":"https://interactive-msg.s3-us-west-2.amazonaws.com/fruit_34.3kb.jpg", "imageDescription":"Select a produce to buy", "elements":[ { "title":"Apple", "subtitle":"$1.00", "imageType":"URL", "imageData":"https://interactive-message-testing.s3-us-west-2.amazonaws.com/apple_4.2kb.jpg" }, { "title":"Orange", "subtitle":"$1.50", "imageType":"URL", "imageData":"https://interactive-message-testing.s3-us-west-2.amazonaws.com/orange_17.7kb.jpg", }, { "title":"Banana", "subtitle":"$10.00", "imageType":"URL", "imageData":"https://interactive-message-testing.s3-us-west-2.amazonaws.com/banana_7.9kb.jpg", "imageDescription":"Banana" } ] }

목록 선택기 제한

다음 표에는 자체 Lambda를 처음부터 새로 구축하기로 선택하는 경우 각 목록 선택기 요소에 적용되는 제한이 나와 있습니다. 필수 파라미터는 굵게 표시됩니다.

옵션을 무제한으로 전송하려면 애플리케이션에 작업 버튼을 구현합니다. 자세한 내용은 대화형 메시지 목록 선택기/패널의 작업 버튼 구현을 참조합니다.

상위 필드 필드 필수 최소 문자 수 최대 문자 수 기타 요구 사항

템플릿 유형

유효한 템플릿 유형

data

version

‘1.0’이어야 합니다.

data

content
replyMessage 아니요

content

title

1

400

프롬프트가 없는 템플릿의 경우 설명이어야 합니다.

elements

항목 1개

항목 6개

요소의 배열입니다. 배열에는 최대 6개의 요소가 허용됩니다. 요소를 무제한으로 보내려면 작업 버튼 기능을 사용합니다.

subtitle 아니요

0

400

imageType 아니요

0

50

‘URL’이어야 합니다.

imageData 아니요

0

200

공개적으로 액세스할 수 있는 유효한 URL이어야 합니다.

imageDescription 아니요

0

50

referenceId 아니요

문자열. 작업 버튼 기능에만 필요합니다.

listId 아니요

문자열. 작업 버튼 기능에만 필요합니다.

preIndex 아니요

숫자입니다. 작업 버튼 기능에만 필요합니다.

nextIndex 아니요

숫자입니다. 작업 버튼 기능에만 필요합니다.

templateIdentifier 아니요

숫자입니다. UUID여야 합니다. 캐러셀에서 목록 선택기/패널을 사용하는 경우 이 필드는 필수입니다.

elements

title

1

400

subtitle 아니요

0

400

imageType 아니요

0

50

‘URL’이어야 합니다.

imageData 아니요

0

200

공개적으로 액세스할 수 있는 유효한 URL이어야 합니다.

imageDescription 아니요

0

50

이미지 없이는 존재할 수 없습니다.

actionDetail 아니요

작업 버튼 기능에만 필요합니다. ‘PREVIOUS_OPTIONS’ 또는 ‘SHOW_MORE’이어야 합니다.

replyMessage

title

1

400

subtitle 아니요

0

400

imageType 아니요

0

50

‘URL’이어야 합니다.

imageData 아니요

0

200

공개적으로 액세스할 수 있는 유효한 URL이어야 합니다.

imageDescription 아니요

0

50

이미지 없이는 존재할 수 없습니다.

시간 선택기 템플릿

시간 선택기 템플릿은 고객이 약속을 예약할 수 있도록 하는 데 유용합니다. 채팅을 통해 고객에게 최대 40개의 시간 슬롯을 제공할 수 있습니다.

다음 이미지는 시간 선택기 템플릿이 채팅에서 정보를 렌더링하는 방식의 두 가지 예를 보여 줍니다.

  • 첫 번째 이미지에는 날짜가 하나 표시되어 있으며, 그 아래에는 시간 슬롯 하나가 있습니다.

  • 두 번째 이미지에는 날짜 하나가 표시되어 있으며, 그 아래에는 시간 슬롯 두 개가 있습니다.


                채팅에서 정보를 렌더링하는 시간 선택기 템플릿.

다음 코드는 Lambda에서 사용할 수 있는 시간 선택기 템플릿입니다. 다음을 참고합니다.

  • 굵은 텍스트는 필수 파라미터입니다.

  • 요청에 상위 요소가 있는데 해당 상위 요소는 필수이거나 굵게 표시되어 있지 않기도 합니다. 이 경우 그 안에 있는 필드가 굵게 표시되어 있다면 해당 필드는 필수입니다. 예를 들어, 다음 템플릿의 data.replyMessage 구조를 확인합니다. 이 구조가 있는 경우 제목은 필수입니다. 그렇지 않으면 전체 replyMessage는 선택 사항입니다.

{ "templateType":"TimePicker", "version":"1.0", "data":{ "replyMessage":{ "title":"Thanks for selecting", "subtitle":"Appointment selected", }, "content":{ "title":"Schedule appointment", "subtitle":"Tap to select option", "timeZoneOffset":-450, "location":{ "latitude":47.616299, "longitude":-122.4311, "title":"Oscar", "radius":1, }, "timeslots":[ { "date" : "2020-10-31T17:00+00:00", "duration": 60, }, { "date" : "2020-11-15T13:00+00:00", "duration": 60, }, { "date" : "2020-11-15T16:00+00:00", "duration": 60, } ], } } } }

시간 선택기 제한

다음 표에는 각 시간 선택기 요소의 제한이 나열되어 있습니다. 자체 Lambda를 처음부터 새로 구축하려는 경우 이 정보를 사용합니다. 필수 파라미터는 굵게 표시됩니다.

상위 필드 필드 필수 최소 문자 수 최대 문자 수 기타 요구 사항

템플릿 유형

유효한 템플릿 유형

data

version

‘1.0’이어야 합니다.

data

replyMessage 아니요
content

replyMessage

title

1

400

프롬프트가 없는 템플릿에 대한 설명이어야 합니다.

subtitle 아니요

0

400

content

title

1

400

프롬프트가 없는 템플릿에 대한 설명이어야 합니다.

subtitle 아니요

0

200

시간대 오프셋 아니요

-720

840

설정되지 않은 경우 이 필드는 선택 사항입니다. 샘플 클라이언트는 기본적으로 사용자의 시간대를 사용합니다. 설정된 경우 입력한 시간대에 따라 표시됩니다. 필드는 GMT와의 차이를 분 단위로 나타내는 정수여야 하며, 이벤트 위치의 시간대를 지정합니다.

location 아니요

timeslots

1

40

시간 슬롯의 배열입니다. 배열에는 최대 40개의 요소가 허용됩니다.

location

longitude

-180

180

배정밀도여야 합니다.

latitude

-90

90

배정밀도여야 합니다.

title

1

400

radius

아니요

0

200

timeslots

date

ISO-8601 시간 형식(YYYY-MM-DDTHH.MM+00.00)이어야 합니다.

예:

‘2020-08-14T21:21+00.00’

duration

1

3600

패널 템플릿

패널 템플릿을 사용하면 고객에게 질문 하나당 최대 10개의 선택 항목을 제시할 수 있습니다. 그러나 각 선택 항목에 이미지를 하나씩 포함하는 대신 하나의 이미지만 포함할 수 있습니다.

다음 이미지는 패널 템플릿이 채팅에서 정보를 렌더링하는 방식의 예를 보여 줍니다. 메시지 상단에 이미지가 표시되고 이미지 아래에는 어떻게 도와드릴까요?라는 프롬프트가 표시됩니다. 탭하여 옵션을 선택합니다. 프롬프트 아래에는 셀프 서비스 옵션 확인, 에이전트와 대화, 채팅 종료의 세 가지 옵션이 고객에게 표시됩니다.


                채팅에서 정보를 렌더링하는 패널 템플릿.

다음 코드는 Lambda에서 사용할 수 있는 패널 템플릿입니다. 다음을 참고합니다.

  • 굵은 텍스트는 필수 파라미터입니다.

  • 요청에 상위 요소가 있는데 해당 상위 요소는 필수이거나 굵게 표시되어 있지 않기도 합니다. 이 경우 그 안에 있는 필드가 굵게 표시되어 있다면 해당 필드는 필수입니다. 예를 들어, 다음 템플릿의 data.replyMessage 구조를 확인합니다. 이 구조가 있는 경우 제목은 필수입니다. 그렇지 않으면 전체 replyMessage는 선택 사항입니다.

{ "templateType":"Panel", "version":"1.0", "data":{ "replyMessage":{ "title":"Thanks for selecting!", "subtitle":"Option selected", }, "content":{ "title":"How can I help you?", "subtitle":"Tap to select option", "imageType":"URL", "imageData":"https://interactive-msg.s3-us-west-2.amazonaws.com/company.jpg", "imageDescription":"Select an option", "elements":[ { "title":"Check self-service options", }, { "title":"Talk to an agent", }, { "title":"End chat", } ] } } }

패널 제한

다음 표에는 자체 Lambda를 처음부터 새로 구축하기로 선택하는 경우 각 패널 요소에 적용되는 제한이 나와 있습니다. 필수 파라미터는 굵게 표시됩니다.

옵션을 무제한으로 전송하려면 애플리케이션에 작업 버튼을 구현합니다. 자세한 내용은 대화형 메시지 목록 선택기/패널의 작업 버튼 구현을 참조합니다.

상위 필드 필드 필수 최소 문자 수 최대 문자 수 기타 요구 사항

템플릿 유형

유효한 템플릿 유형

data

version

‘1.0’이어야 합니다.

data

replyMessage 아니요
content

content

title

1

400

프롬프트가 없는 템플릿의 경우 설명이어야 합니다.

subtitle 아니요

0

400

elements

항목 1개

항목 10개

요소의 배열입니다. 배열에는 최대 10개의 요소가 허용됩니다.

imageType 아니요

0

50

‘URL’이어야 합니다.

imageData 아니요

0

200

공개적으로 액세스할 수 있는 유효한 URL이어야 합니다.

imageDescription 아니요

0

50

이미지 없이는 존재할 수 없습니다.

referenceId 아니요

문자열. 작업 버튼 기능에만 필요합니다.

listId 아니요

문자열. 작업 버튼 기능에만 필요합니다.

preIndex 아니요

숫자입니다. 작업 버튼 기능에만 필요합니다.

nextIndex 아니요

숫자입니다. 작업 버튼 기능에만 필요합니다.

templateIdentifier 아니요

숫자입니다. UUID여야 합니다. 캐러셀에서 목록 선택기/패널을 사용하는 경우 이 필드는 필수입니다.

elements

title

1

400

actionDetail 아니요

작업 버튼 기능에만 필요합니다. ‘PREVIOUS_OPTIONS’ 또는 ‘SHOW_MORE’이어야 합니다.

replyMessage

title

1

400

subtitle 아니요

0

400

빠른 회신 템플릿

빠른 회신 메시지를 사용하면 고객으로부터 인라인 목록에 있는 항목 중에서 간단한 응답을 받을 수 있습니다. 하나의 빠른 회신 메시지로 고객에게 최대 5가지 옵션을 제시할 수 있습니다. 빠른 회신에는 이미지가 지원되지 않습니다.

다음 이미지는 빠른 회신 템플릿이 채팅에서 정보를 렌더링하는 방식의 예를 보여 줍니다.


                채팅에서 정보를 렌더링하는 패널 템플릿.

다음 코드는 Lambda에서 사용할 수 있는 빠른 회신 템플릿입니다.

{ "templateType": "QuickReply", "version": "1.0", "data": { "content": { "title": "Which department would you like?", "elements": [ { "title": "Billing" }, { "title": "Cancellation" }, { "title": "New Service" } ] } } }

빠른 응답 제한

다음 표에는 각 빠른 회신 요소의 제한이 나열되어 있습니다. 자체 Lambda를 처음부터 새로 구축하려는 경우 이 정보를 사용합니다. 필수 파라미터는 굵게 표시됩니다.

필드 필수 최소 문자 수 최대 문자 수 기타 요구 사항

템플릿 유형

유효한 템플릿 유형

data

version

‘1.0’이어야 합니다.

content

title

1

400

프롬프트가 없는 템플릿의 경우 설명이어야 합니다.

elements

항목 2개

항목 5개

요소의 배열입니다. 배열에는 최소 2개, 최대 5개의 요소가 허용됩니다.

title

1

200

캐러셀을 사용하면 메시지 하나에 최대 5개의 목록 선택기 또는 패널을 고객에게 표시할 수 있습니다. 목록 선택기 및 시간 선택기와 마찬가지로 SHOW_MORE 기능을 사용하여 캐러셀에 더 많은 옵션을 추가할 수 있습니다.

다음 GIF는 캐러셀 템플릿이 채팅에서 정보를 렌더링하는 방식의 예를 보여 줍니다. 고객은 왼쪽 및 오른쪽 화살표를 사용하여 이미지 캐러셀을 스크롤합니다.


                고객 채팅 경험의 캐러셀.

다음 이미지는 캐러셀 선택기 하이퍼링크 요소의 예인 두 개의 자세히 알아보기 하이퍼링크를 보여 줍니다.


                하이퍼링크가 있는 캐러셀 선택기.

다음 코드는 Lambda에서 사용할 수 있는 캐러셀 템플릿입니다.

{ "templateType": "Carousel", "version": "1.0", "data": { "content": { "title": "View our popular destinations", "elements": [ { "templateIdentifier": "template0", "templateType": "Panel", "version": "1.0", "data": { "content": { "title": "California", "subtitle": "Tap to select option", "elements": [ { "title": "Book flights" }, { "title": "Book hotels" }, { "title": "Talk to agent" } ] } } }, { "templateIdentifier": "template1", "templateType": "Panel", "version": "1.0", "data": { "content": { "title": "New York", "subtitle": "Tap to select option", "elements": [ { "title": "Book flights" }, { "title": "Book hotels" }, { "title": "Talk to agent" } ] } } } ] } } }

호스팅된 커뮤니케이션 위젯 사용자의 경우:

  • 캐러셀 템플릿의 항목을 선택하면 다음 예와 같은 구조의 JSON 문자열 응답이 생성되어 Lambda로 다시 전송됩니다(다른 대화형 메시지 유형은 selectionText 값만 있는 일반 문자열 응답을 반환함).

    { templateIdentifier: "template0", listTitle: "California", selectionText: "Book hotels" }
  • 캐러셀에서는 목록 선택기/패널 요소에 하이퍼링크를 제공할 수 있습니다. 버튼 대신 하이퍼링크를 생성하려면 하이퍼링크여야 하는 요소에 대해 다음과 같은 추가 필드를 포함합니다.

    { title: "Book flights", ... type: "hyperlink", url: "https://www.example.com/Flights" }

다음 표에는 각 캐러셀 요소의 제한이 나열되어 있습니다. 자체 Lambda를 처음부터 새로 구축하려는 경우 이 정보를 사용합니다. 필수 파라미터는 굵게 표시됩니다.

상위 필드 필드 필수 최소 문자 수 최대 문자 수 기타 요구 사항

템플릿 유형

유효한 템플릿 유형

data

version

‘1.0’이어야 합니다.

data

content

content

title

1

400

프롬프트가 없는 템플릿의 경우 설명이어야 합니다.

elements

항목 2개

항목 5개

목록 선택기 또는 패널 템플릿의 배열입니다. 캐러셀당 하나의 대화형 메시지 유형만 허용됩니다. 각 요소에는 최상위 필드 templateIdentifier가 포함되어야 합니다. 배열에는 최소 2개, 최대 5개의 템플릿이 허용됩니다.

참고

최상의 고객 경험을 위해 각 템플릿에 이미지/요소 수를 일관되게 사용하는 것이 좋습니다.

omitTitleFromCarouselResponse 아니요

Boolean - 기본값 "PickerTitle: SelectionText" 대신 SelectionText"“로 응답할 수도 있습니다.

carouselIsVertical 아니요

부울 - 선택적으로 세로 스크롤을 사용하여 Carousel 요소를 렌더링할 수 있습니다.

채팅 메시지의 제목과 자막에 풍부한 형식을 추가할 수 있습니다. 예를 들어 링크, 기울임꼴, 굵게, 번호가 매겨진 목록, 글머리 기호 목록을 추가할 수 있습니다. 마크다운을 사용하여 텍스트 서식을 지정합니다.

다음 채팅 상자 이미지는 제목과 부제목에 풍부한 서식이 적용된 목록 선택기의 예를 보여 줍니다.

  • 제목인 어떻게 도와드릴까요? aws.amazon.com은 굵게 표시되며 링크가 포함됩니다.

  • 부제목에는 기울임꼴과 굵은 텍스트, 글머리 기호 목록, 번호가 매겨진 목록이 포함됩니다. 또한 일반 링크, 텍스트 링크 및 샘플 코드도 표시됩니다.

  • 채팅 상자 하단에는 세 개의 목록 선택기 요소가 표시됩니다.


                채팅 상자, 링크가 포함된 제목, 목록과 링크가 포함된 부제목.

마크다운으로 텍스트 서식을 지정하는 방법

제목 및 부제목 문자열을 여러 줄 형식으로 작성하거나 `\r\n` 줄 바꿈 문자를 사용하여 한 줄로 작성할 수 있습니다.

  • 여러 줄 형식: 다음 코드 샘플은 여러 줄 형식의 마크다운으로 목록을 작성하는 방법을 보여 줍니다.

    const MultiLinePickerSubtitle = `This is some *emphasized text* and some **strongly emphasized text** This is a bulleted list (multiline): * item 1 * item 2 * item 3 This is a numbered list: 1. item 1 2. item 2 3. item 3 Questions? Visit https://plainlink.com/faq [This is a link](https://aws.amazon.com) This is \`\` ` const PickerTemplate = { templateType: "ListPicker|Panel", version: "1.0", data: { content: { title: "How can we help?", subtitle: MultiLinePickerSubtitle, elements: [ /* ... */ ] } } }
  • 한 줄 형식: 다음 예에서는 `\r\n` 줄 바꿈 문자를 사용하여 한 줄로 부제목을 작성하는 방법을 보여 줍니다.

    const SingleLinePickerSubtitle = "This is some *emphasized text* and some **strongly emphasized text**\r\nThis is a bulleted list:\n* item 1\n* item 2\n* item 3\n\nThis is a numbered list:\n1. item 1\n2. item 2\n3. item 3\n\nQuestions? Visit https://plainlink.com/faq\r\n[This is a link](https://aws.amazon.com)\r\nThis is `<code/>`"; const PickerTemplate = { templateType: "ListPicker|Panel", version: "1.0", data: { content: { title: "How can we help?", subtitle: SingleLinePickerSubtitle, elements: [ /* ... */ ] } } }

다음 예에서는 마크다운을 사용하여 기울임꼴 및 굵은 텍스트 서식을 지정하는 방법을 보여 줍니다.

This is some *emphasized text* and some **strongly emphasized text**

다음 예에서는 마크다운을 사용하여 텍스트에 코드 형식을 지정하는 방법을 보여 줍니다.

This is `<code />`

마크다운으로 링크 서식을 지정하는 방법

링크를 생성하려면 다음 구문을 사용합니다.

[aws](https://aws.amazon.com)

다음 예는 마크다운을 사용하여 링크를 추가하는 두 가지 방법을 보여 줍니다.

Questions? Visit https://plainlink.com/faq

[This is a link](https://aws.amazon.com)