

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

# Amazon Connect 채팅 위젯에 대한 추가 사용자 지정
<a name="pass-customization-object"></a>

채팅 사용자 인터페이스에 선택적으로 다음 사용자 지정을 추가할 수 있습니다.
+ 바닥글 대신 머리글 드롭다운 메뉴에 **채팅 종료** 버튼을 표시합니다.
+ 표시 이름을 가리거나 숨깁니다.
+ 메시지 아이콘을 추가합니다.
+ 이벤트 메시지를 재정의합니다.
+ 고객이 **채팅 종료** 버튼을 선택할 때 표시되는 확인 대화 상자를 구성합니다. 이 대화 상자는 고객이 채팅 세션을 실제로 종료할 의도가 있는지 확인합니다. 확인 대화 상자, 제목, 메시지 및 버튼 텍스트를 사용자 지정할 수 있습니다.
+ 첨부 파일 거부 메시지를 재정의합니다.

## 사용자 지정 객체 구성
<a name="configure-customization-object"></a>

이 예시에서는 일부 선택적 사용자 지정을 구현하는 방법을 보여 줍니다. 가능한 모든 사용자 지정 목록은 [지원되는 옵션 및 제약 조건](#customization-options-constraints) 섹션을 참조하세요. 이러한 사용자 지정은 선택 사항이므로 아래 예시에 표시된 필드를 일부만 또는 모두 다 구현할 수 있습니다. 필요에 따라 `eventNames.customer`, `eventNames.agent`, `eventNames.supervisor`, `eventMessages.participantJoined`, `eventMessages.participantDisconnect`, `eventMessages.participantLeft`, `eventMessages.participantIdle`, `eventMessages.participantReturned`, `eventMessages.chatEnded` 문자열을 교체합니다. 아이콘은 퍼블릭 URL에서 호스팅해야 합니다.

```
amazon_connect('customizationObject', {
        header: { 
            dropdown: true, 
            dynamicHeader: true,
        },
        transcript: { 
            hideDisplayNames: false, 
            eventNames: {
                customer: "User",
                agent: "Webchat Agent",
                supervisor: "Webchat Supervisor"
            },
            eventMessages: {
                participantJoined: "{name} has joined the chat",
                participantDisconnect: "",
                participantLeft: "{name} has dropped",
                participantIdle: "{name}, are you still there?",
                participantReturned: "",
                chatEnded: "Chat ended",
            },
            displayIcons: true,
            iconSources: { 
                botMessage: "imageURL",
                systemMessage: "imageURL",
                agentMessage: "imageURL",
                customerMessage: "imageURL",
            },
        },
        composer: {
            disableEmojiPicker: true,
            disableCustomerAttachments: true,
            alwaysHideToolbar: true,
            hide: false,
        },
        footer: {
            disabled:true,
            skipCloseChatButton: true,
        },
        endChat: {
            enableConfirmationDialog: true,
            confirmationDialogText: {
                title: "End Chat",
                message: "Are you sure you want to end this chat?",
                confirmButtonText: "End Chat",
                cancelButtonText: "Cancel",
        },
    },
    attachment: {
         // Default rejectedErrorMessage: Attachment was rejected.
        rejectedErrorMessage: "Custom Error Message: Files cannot exceed 15 MB." //this is customizable attribute 
    }
});
```

다음 이미지는 제시된 예를 사용한 경우 사용자 지정이 어떤 모습인지 보여 줍니다.

![\[사용자 지정 가능한 표시 이름, 메뉴 위치, 아이콘 및 채팅 종료 확인 대화 상자를 보여 주는 다이어그램.\]](http://docs.aws.amazon.com/ko_kr/connect/latest/adminguide/images/chat-customization-diagram2.png)


## 지원되는 옵션 및 제약 조건
<a name="customization-options-constraints"></a>

다음 테이블에는 지원되는 사용자 지정 필드와 권장되는 값 제약 조건이 나와 있습니다.


| 사용자 지정 레이아웃 옵션 | Type | 설명 | 
| --- | --- | --- | 
|  `header.dropdown`  |  부울  |  기본 바닥글 대신 헤더 드롭다운 메뉴 렌더링  이 옵션을 `true`로 설정하면 **트랜스크립트 다운로드** 버튼이 나타나고 옵션을 `false`로 설정하거나 옵션을 제거할 때까지 계속 표시됩니다.   | 
| `header.dynamicHeader` | 부울 | 머리글 제목을 'Chatting with Bot/AgentName'으로 동적으로 설정합니다. | 
| `header.hideTranscriptDownloadButton` | 부울 | 헤더 드롭다운 메뉴에서 [트랜스크립트 다운로드](chat-widget-download-transcript.md) 버튼을 숨깁니다. 기본값은 false입니다. | 
|  `transcript.hideDisplayNames`  |  부울  |  모든 표시 이름을 숨깁니다. `eventNames`를 제공하지 않은 경우 기본 이름 마스킹을 적용합니다.  | 
|  `transcript.eventNames.customer`  |  문자열  |  고객의 표시 이름을 마스킹합니다.  | 
|  `transcript.eventNames.agent`  |  문자열  |  에이전트의 표시 이름을 마스킹합니다.  | 
|  `transcript.eventNames.supervisor`  |  문자열  |  감독자의 표시 이름을 마스킹합니다.  | 
|  ` transcript.eventMessages.participantJoined`  |  문자열  |  참가자가 채팅에 참여한 시점에 대한 트랜스크립트의 이벤트 메시지를 재정의합니다. 빈 문자열을 지정하면 이벤트 메시지가 트랜스크립트에서 생략됩니다. `{name}`는 메시지에 전달될 수 있으며 해당 참가자의 표시 이름으로 대체됩니다. 기본 메시지는 `{name} has joined the chat`입니다.  | 
|  `transcript.eventMessages.participantDisconnect`  |  문자열  |  참가자가 채팅에서 연결 해제된 시점에 대한 트랜스크립트의 이벤트 메시지를 재정의합니다. 빈 문자열을 지정하면 이벤트 메시지가 트랜스크립트에서 생략됩니다. `{name}`는 메시지에 전달될 수 있으며 해당 참가자의 표시 이름으로 대체됩니다. 기본 메시지는 \$1`name} has been idle too long, disconnecting`입니다.  | 
|  `transcript.eventMessages.participantLeft`  |  문자열  |  참가자가 채팅에서 떠난 시점에 대한 트랜스크립트의 이벤트 메시지를 재정의합니다. 빈 문자열을 지정하면 이벤트 메시지가 트랜스크립트에서 생략됩니다. `{name}`는 메시지에 전달될 수 있으며 해당 참가자의 표시 이름으로 대체됩니다. 기본 메시지는 `{name} has left the chat`입니다.  | 
|  `transcript.eventMessages.participantIdle`  |  문자열  |  참가자가 유휴 상태인 시점에 대한 트랜스크립트의 이벤트 메시지를 재정의합니다. 빈 문자열을 지정하면 이벤트 메시지가 트랜스크립트에서 생략됩니다. `{name}`는 메시지에 전달될 수 있으며 해당 참가자의 표시 이름으로 대체됩니다. 기본 메시지는 `{name} has become idle`입니다.  | 
|  `transcript.eventMessages.participantReturned`  |  문자열  |  참가자가 채팅으로 돌아온 시점에 대한 트랜스크립트의 이벤트 메시지를 재정의합니다. 빈 문자열을 지정하면 이벤트 메시지가 트랜스크립트에서 생략됩니다. `{name} `는 메시지에 전달될 수 있으며 해당 참가자의 표시 이름으로 대체됩니다. 기본 메시지는 `{name} has returned`입니다.  | 
|  `transcript.eventMessages.chatEnded`  |  문자열  |  채팅이 종료된 시점에 대한 트랜스크립트의 이벤트 메시지를 재정의합니다. 빈 문자열을 지정하면 이벤트 메시지가 트랜스크립트에서 생략됩니다. `{name}`는 메시지에 전달될 수 있으며 해당 참가자의 표시 이름으로 대체됩니다. 기본 메시지는 `Chat has ended!`입니다.  | 
|  `transcript.displayIcons`  |  부울  |  메시지 표시 아이콘을 활성화합니다.  | 
|  `transcript.iconSources.botMessage`  |  문자열  |  봇 메시지에 표시되는 아이콘으로, 퍼블릭 URL에서 호스팅해야 합니다.  | 
|  `transcript.iconSources.systemMessage`  |  문자열  |  시스템 메시지에 표시되는 아이콘으로, 퍼블릭 URL에서 호스팅해야 합니다.  | 
|  `transcript.iconSources.agentMessage`  |  문자열  |  에이전트 메시지에 표시되는 아이콘으로, 퍼블릭 URL에서 호스팅해야 합니다.  | 
|  `transcript.iconSources.customerMessage`  |  문자열  |  고객 메시지에 표시되는 아이콘으로, 퍼블릭 URL에서 호스팅해야 합니다.  | 
|  `composer.alwaysHideToolbar`  |  부울  |  굵게, 기울임꼴, 글머리 기호 및 번호 매기기 목록 옵션과 같은 텍스트 스타일링 기능이 포함된 서식 도구 모음을 숨깁니다.  | 
|  `composer.disableEmojiPicker`  |  부울  |  [서식 있는 텍스트 편집기](enable-text-formatting-chat.md)를 사용할 때 이모티콘 피커를 비활성화합니다.  | 
| `composer.disableCustomerAttachments` | 부울 | 고객이 첨부 파일을 보내거나 업로드하지 못하도록 방지합니다. | 
| `composer.hide` | 부울 | 컴포저를 숨기거나(`true`) 표시합니다(`false`). 이벤트(예: 에이전트가 참여할 때)를 기반으로 작곡기를 전환하려면 `hideComposer` 메서드와 `registerCallback` 함께를 사용합니다. 자세한 내용은 [Amazon Connect에서 사용자 지정 가능한 지원되는 위젯 스니펫 필드](supported-snippet-fields.md) 단원을 참조하십시오.<pre>document.getElementById("amazon-connect-chat-widget-iframe").contentWindow.connect.ChatInterface.hideComposer(false)</pre> | 
|  `footer.disabled`  |  부울  |  기본 바닥글과 **채팅 종료** 버튼을 숨깁니다.  | 
|  `footer.skipCloseChatButton`  |  부울  |  **닫기** 버튼을 표시하는 대신 **채팅 종료** 버튼을 클릭할 때 위젯을 직접 닫습니다.  | 
| `endChat.enableConfirmationDialog` | 부울 | 채팅 종료 확인 대화 상자를 활성화합니다. confirmationDialogText가 제공되지 않은 경우 기본 텍스트가 사용됩니다. | 
| `endChat.confirmationDialogText.title` | 문자열 | 채팅 종료 확인 대화 상자의 제목을 재정의합니다. | 
| `endChat.confirmationDialogText.message` | 문자열 | 채팅 종료 확인 대화 상자의 메시지를 재정의합니다. | 
| `endChat.confirmationDialogText.confirmButtonText` | 문자열 | 채팅 종료 확인 대화 상자의 확인 버튼 텍스트를 재정의합니다. | 
| `endChat.confirmationDialogText.cancelButtonText` | 문자열 | 채팅 종료 확인 대화 상자의 취소 버튼 텍스트를 재정의합니다. | 
| `attachment.rejectedErrorMessage` | 문자열 | 채팅 위젯 연결 거부에 대한 오류 메시지를 재정의합니다. | 