여기에 설명된 것 외에 웹 SDK 위젯 UI에 적용된 맞춤설정은 지원되지 않으며 예기치 않은 동작이 발생할 수 있습니다. 고급 맞춤설정이 필요한 경우 헤드리스 SDK를 사용하는 것이 좋습니다.
테마 맞춤설정이 예상대로 표시되도록 하려면 변경사항을 프로덕션에 배포하기 전에 테스트 환경에서 테스트하는 것이 좋습니다.
런처 디자인
런처의 아이콘, 크기, 위치, 색상을 맞춤설정할 수 있습니다.
런처
열기 아이콘
닫기 아이콘
아이콘
기본 런처의 UI가 브랜딩과 일치하지 않으면 자체 SVG 파일로 런처의 아이콘을 맞춤설정할 수 있습니다. SVG 파일에 URL을 추가할 수 없습니다. SVG 파일 자체여야 합니다.
ccaas.config({ launcherOpenIcon: '<svg ....>', launcherCloseIcon: '<svg ....>',})
크기
런처의 기본 너비와 높이는 80px입니다. 다른 크기로 변경할 수 있습니다.
#ccaas-widget {
--launcher-size: 60px;
}
테두리 맞춤설정
다음 옵션을 사용하여 런처 테두리를 맞춤설정할 수 있습니다.
- 테두리 색상
- 테두리 두께
- 그림자 (늘리거나 줄이기)
--launcher-border-color
--launcher-border-width
--launcher-shadow
런처 색상
기본적으로 런처는 강조 색상을 사용합니다.
{
--launcher-border-color: var(--accent-10);
--launcher-background-color: var(--accent-10);
--launcher-color: var(--accent-9-contrast);
}
다른 색상을 사용하도록 런처를 맞춤설정할 수 있습니다. 예를 들면 다음과 같습니다.
#ccaas-widget {
--launcher-border-color: var(--green-10);
--launcher-background-color: var(--blue-10);
--launcher-color: white;
}
런처 사용 중지
미적인 이유로 웹 SDK 런처를 숨기고 대신 사전 대응형 채팅 트리거를 사용하거나 프로그래매틱 방식으로 채팅을 시작할 수 있습니다. disableLauncher를 사용하여 런처의 UI를 숨기거나 사용 중지할 수 있습니다.
ccaas.config({
disableLauncher: true
})
런처가 사용 중지된 경우 다음을 사용하여 위젯을 열 수 있습니다.
ccaas.show()
위젯 디자인
위젯
로고
글꼴
사용자 인터페이스에 다른 글꼴을 선택합니다.
--font-en: Roboto, Verdana, Helvetica Neue
--font-zh: PingFang SC, Hiragino Sans GB, Droid Sans Fallback, Microsoft YaHei
--font-ja: Hiragino Sans, Meiryo
강조 색상
다음 구성을 사용하여 사전 정의된 색상 옵션을 선택하여 강조색 color을 맞춤설정할 수 있습니다.
ccaas.config({
accent: 'green',
})
사전 정의된 색상에는 blue, green, purple, orange, yellow, gold, red가 있습니다.
강조색 맞춤설정
사전 정의된 선택사항이 비즈니스 요구사항에 맞지 않으면 CSS 변수를 사용하여 스타일을 맞춤설정할 수 있습니다.
#ccaas-widget {
--accent-1: #fbfdff;
--accent-2: #f4faff;
--accent-3: #e6f4fe;
--accent-4: #d5efff;
--accent-5: #c2e5ff;
--accent-6: #acd8fc;
--accent-7: #8ec8f6;
--accent-8: #5eb1ef;
--accent-9: #0090ff;
--accent-10: #0588f0;
--accent-11: #0d74ce;
--accent-12: #113264;
--accent-contrast: white;
--chat-input-selection-color: var(--accent-11);
}
Position
마운트 지점이 #ccaas-widget인 경우 다음을 사용하여 위젯 위치를 업데이트할 수 있습니다.
#ccaas-widget {
--ujet-right: 20px;
--ujet-bottom: 10px;
}
로고
위젯에 표시할 맞춤 logo을 선택합니다.
ccaas.config({
logo: 'https://example.com/logo.png'
})
에이전트 로고 테두리 숨기기
마운트 지점이 #ccaas-widget인 경우 다음 코드 샘플을 사용하여 에이전트 로고 테두리를 숨길 수 있습니다.
#ccaas-widget {
--head-logo-shadow: none;
}
기타 구성요소
Web SDK 위젯은 강조 색상과 위치 외에도 위젯에 사용되는 다른 구성요소를 구성할 수 있는 CSS 변수를 더 많이 제공했습니다.
마운트 지점이 #ccaas-widget인 경우 다음 코드 샘플을 사용하여 맞춤설정할 수 있습니다.
#ccaas-widget {
--variable-name: value;
}
일반 CSS 변수
--text-font: 기본 텍스트 글꼴 모음입니다.
--text-color: 기본 텍스트 색상입니다.
--end-color: 종료 버튼의 기본 색상 (채팅 종료, 채팅 나가기, 공동 탐색 종료)
확인 아이콘
SDK 전체의 다양한 페이지에 표시되는 확인 아이콘을 맞춤설정할 수 있습니다. 기본 아이콘을 맞춤 아이콘으로 바꾸고 크기와 색상을 제어할 수 있습니다.
--confirmation-icon-size
--confirmation-icon-color
버튼
다양한 버튼 유형의 맞춤설정을 세부적으로 제어할 수 있습니다. 다음 표에서는 여러 유형의 버튼을 조합하여 맞춤설정할 때 예상되는 동작을 설명합니다.
| 버튼 맞춤설정 적용됨 | 결과 |
| 없음 | 기본 동작 (모든 버튼 스타일이 기본 테마에 따라 표시됨) |
| 일반 버튼 맞춤설정 | 모든 버튼 (대화상자/채팅 화면 제외)은 고객이 설정한 맞춤설정에 따라 표시됩니다. 여기에는 메뉴 버튼이 포함됩니다.
일반 버튼 맞춤설정 변수가 지정되지 않은 경우 기본 동작이 적용됩니다. |
| 메뉴 버튼 맞춤설정
대화상자 버튼 맞춤설정 |
--menu-button 변수에 따라 메뉴 버튼이 표시됩니다.
메뉴 / 대화상자 버튼 맞춤설정 변수가 지정되지 않은 경우 기본 동작이 적용됩니다. |
| 일반 버튼 맞춤설정
메뉴 버튼 맞춤설정 대화상자 버튼 맞춤설정 |
메뉴 버튼은 --menu-button 변수에 따라 표시됩니다.
대화상자 버튼은 메뉴 버튼이나 대화상자 버튼이 아닌 버튼은 일반 맞춤설정에 따라 표시됩니다. 일반 / 메뉴 / 대화상자 버튼 맞춤설정 변수가 지정되지 않은 경우 해당 버튼에 기본 동작이 적용됩니다. |
일반 버튼
자체 CSS 변수가 없는 다른 모든 버튼은 일반 버튼 구성 및 맞춤설정을 사용합니다.
--general-button-default-background
--general-button-default-border
--general-button-default-color
--general-button-default-outline
--general-button-hover-background
--general-button-hover-border
--general-button-hover-color
--general-button-hover-outline
--general-button-active-background
--general-button-active-border
--general-button-active-color
--general-button-active-outline
--general-button-focus-background
--general-button-focus-border
--general-button-focus-color
--general-button-focus-outline
기본 버튼
--primary-button-default-background<
--primary-button-default-color
--primary-button-focus-background
--primary-button-focus-color
--primary-button-hover-background
--primary-button-hover-color
--primary-button-active-background
--primary-button-active-color
--primary-button-disabled-background
--primary-button-disabled-color
보조 버튼
--secondary-button-default-background
--secondary-button-default-border
--secondary-button-default-outline
--secondary-button-default-color
--secondary-button-hover-background
--secondary-button-hover-border
--secondary-button-hover-outline
--secondary-button-hover-color
--secondary-button-active-background
--secondary-button-active-border
--secondary-button-active-outline
--secondary-button-active-color
--secondary-button-disabled-background
--secondary-button-disabled-border
--secondary-button-disabled-outline
--secondary-button-disabled-color
--secondary-button-focus-background
--secondary-button-focus-border
--secondary-button-focus-outline
--secondary-button-focus-color
보조 버튼 (반전)
--secondary-button-inverse-default-background
--secondary-button-inverse-default-border
--secondary-button-inverse-default-outline
--secondary-button-inverse-default-color
--secondary-button-inverse-hover-background
--secondary-button-inverse-hover-border
--secondary-button-inverse-hover-outline
--secondary-button-inverse-hover-color
--secondary-button-inverse-active-background
--secondary-button-inverse-active-border
--secondary-button-inverse-active-outline
--secondary-button-inverse-active-color
--secondary-button-inverse-disabled-background
--secondary-button-inverse-disabled-border
--secondary-button-inverse-disabled-outline
--secondary-button-inverse-disabled-color
--secondary-button-inverse-focus-background
--secondary-button-inverse-focus-border
--secondary-button-inverse-focus-outline
--secondary-button-inverse-focus-color
메뉴 버튼
메뉴 버튼 맞춤설정
--menu-button-default-background
--menu-button-default-border
--menu-button-default-text
--menu-button-default-outline
--menu-button-hover-background
--menu-button-hover-border
--menu-button-hover-text
--menu-button-active-background
--menu-button-active-border
--menu-button-active-text
--menu-button-active-outline
--menu-button-focus-background
--menu-button-focus-border
--menu-button-focus-text
--menu-button-focus-outline
메뉴 버튼 맞춤설정
대화상자 버튼
예: 모달 또는 팝업
--dialog-background
--dialog-text
--dialog-primary-button-default-background
--dialog-primary-button-default-border
--dialog-primary-button-default-text
--dialog-primary-button-default-outline
--dialog-primary-button-hover-background
--dialog-primary-button-hover-border
--dialog-primary-button-hover-text
--dialog-primary-button-hover-outline
--dialog-primary-button-focus-background
--dialog-primary-button-focus-border
--dialog-primary-button-focus-text
--dialog-primary-button-focus-outline
--dialog-primary-button-active-background
--dialog-primary-button-active-border
--dialog-primary-button-active-text
--dialog-primary-button-active-outline
--dialog-secondary-button-default-background
--dialog-secondary-button-default-border
--dialog-secondary-button-default-text
--dialog-secondary-button-default-outline
--dialog-secondary-button-hover-background
--dialog-secondary-button-hover-border
--dialog-secondary-button-hover-text
--dialog-secondary-button-hover-outline
--dialog-secondary-button-focus-background
--dialog-secondary-button-focus-border
--dialog-secondary-button-focus-text
--dialog-secondary-button-focus-outline
--dialog-secondary-button-active-background
--dialog-secondary-button-active-border
--dialog-secondary-button-active-text
--dialog-secondary-button-active-outline
채팅 헤더
--options-menu-icon-color-default
--options-menu-icon-color-hover
--options-menu-icon-color-active
--options-menu-icon-color-focus
--options-menu-icon-background-default
--options-menu-icon-background-hover
--options-menu-icon-background-active
--options-menu-icon-background-focus
채팅 음소거
ccaas.config({
enableMuteChat: true,
})
채팅 풍선
--chat-bubble-background
--chat-bubble-border
--chat-bubble-text
--chat-bubble-line-height
--chat-bubble-agent-background
--chat-bubble-agent-text
--chat-bubble-agent-border-top-left
--chat-bubble-agent-border-top-right
--chat-bubble-agent-border-bottom-right
--chat-bubble-agent-border-bottom-left
--chat-bubble-user-background
--chat-bubble-user-text
--chat-bubble-user-border-top-left
--chat-bubble-user-border-top-right
--chat-bubble-user-border-bottom-right
--chat-bubble-user-border-bottom-left
### 채팅 풍선 맞춤설정
메시지
--message-event-general-font
--message-event-general-font-size
--message-event-general-font-weight
--message-event-general-color
--message-event-error-font
--message-event-error-font-size
--message-event-error-font-weight
--message-event-error-color
--message-event-confirmation-font
--message-event-confirmation-font-size
--message-event-confirmation-font-weight
--message-event-confirmation-color
--message-progress-color
--message-button-font
--message-button-text-size
--message-button-text-color
--message-button-font-style
--message-button-default-background
--message-button-default-border
--message-button-hover-background
--message-button-focus-background
--message-button-focus-text
--message-button-disabled-background
--message-button-disabled-border
--message-button-disabled-color
--message-button-disabled-font-style
세션 후 가상 에이전트
--post-session-background
--post-session-padding
