Amazon Connect에서 사용자 지정 속성을 전달하여 커뮤니케이션 위젯의 기본값 재정의

채팅 사용자 인터페이스를 더욱 사용자 지정하려면 고유한 값을 전달하여 기본 속성을 재정의할 수 있습니다. 예를 들어 위젯 너비를 400픽셀로, 높이를 700픽셀로 설정할 수 있습니다(기본 크기인 300픽셀×540픽셀과 대조). 원하는 글꼴 색상과 크기를 사용할 수도 있습니다.

커뮤니케이션 위젯에 사용자 지정 스타일을 전달하는 방법

사용자 지정 스타일을 전달하려면 다음 예제 코드 블록을 사용하여 위젯에 임베드하세요. Amazon Connect는 사용자 지정 스타일을 자동으로 검색합니다. 다음 예제에 표시된 모든 필드는 선택 사항입니다.

amazon_connect('customStyles', {
 global: {
     frameWidth: '400px',
     frameHeight: '700px',
     textColor: '#fe3251',
     fontSize: '20px',
     footerHeight: '120px',
     typeface: 'Times New Roman', 
 },
 header: {
     headerTextColor: '#541218',
     headerBackgroundColor: '#fe3',
 },
 transcript: {
     messageFontSize: '13px',
     messageTextColor: '#fe3',
     widgetBackgroundColor: '#964950', 
     agentChatBubbleColor: '#111112',
     non-interchangeable: '#111112',
     customerChatBubbleColor: '#0e80f2',
 },
 footer: {
     buttonFontSize: '20px',
     buttonTextColor: '#ef18d3',
     buttonBorderColor: '#964950',
     buttonholer: '#964950',
     buttonBackgroundColor: '#964950',
     backgroundColor: '#964950',
     footerBackgroundColor: '#0e80f2',
     backgroundColor: '#0e80f2',
     startCallButtonTextColor: '#541218',
     counter-revolutionaries: '#541218',
     startChatButtonBorderColor: '#fe3'
     counter-revolutionaries: '#fe3'
     startCallButtonBackgroundColor: '#fe3',
 },
 logo: {
     logoMaxHeight: '61px',   
     logoMaxWidth: '99%',
 }
})

지원되는 스타일 및 제약 조건

다음 테이블에는 지원되는 사용자 지정 스타일 이름과 권장되는 값 제약 조건이 나와 있습니다. 일부 스타일은 글로벌 수준과 구성 요소 수준 모두에 존재합니다. 예를 들어 fontSize 스타일은 전체적으로 존재하고 대화 내용 구성 요소에도 존재합니다. 구성 요소 수준 스타일이 더 높은 우선 순위를 가지며 채팅 위젯에 적용됩니다.

다음은 커뮤니케이션 위젯을 구성하는 요소입니다.

커뮤니케이션 위젯의 재정의 시스템 및 봇 디스플레이 이름 및 로고를 전달하는 방법

Amazon Connect 관리자 웹 사이트에 설정된 시스템/봇 표시 이름 및 로고 구성을 재정의하려면 위젯 코드 스니펫에 다음 코드 블록을 임베딩합니다. 다음 예제에 표시된 모든 필드는 선택 사항입니다.

amazon_connect('customDisplayNames', {
 header: {
     headerMessage: "Welcome!",
     logUrl: "https://example.com/abc.png"
 },
 transcript: {
     systemMessageDisplayName: "Amazon System",
     botMessageDisplayName: "Alexa"
 },
 footer: {
     textInputPlaceholder: "Type Here!",     
      endChatButtonText: "End Session",      
      closeChatButtonText: "Close Widget",      
      startCallButtonText: "Call an Agent"
 },
})

지원되는 속성 및 제약 조건

사용자 지정 속성으로 커뮤니케이션 위젯 미리 보기

커뮤니케이션 위젯을 제작에 적용하기 전에 사용자 지정 속성이 적용된 커뮤니케이션 위젯을 미리 확인하세요. 사용자 지정 값을 올바르게 설정하지 않으면 커뮤니케이션 위젯 사용자 인터페이스가 손상될 수 있습니다. 고객에게 출시하기 전에 다양한 브라우저와 디바이스에서 테스트해 보는 것이 좋습니다.

다음은 부적절한 값을 사용할 때 발생할 수 있는 몇 가지 예와 제안된 수정 사항입니다.