Dialogflow CX Messenger CSS 맞춤설정

CSS 변수를 설정하여 채팅 대화상자의 스타일을 맞춤설정할 수 있습니다.

일반 스타일 지정

다음 CSS 변수는 일반 스타일 지정 옵션을 제공합니다.

속성 입력 정책 기본값 설명
df-messenger-font-family 선택사항 'Google Sans', 'Helvetica Neue', sans-serif 위젯 전체에서 사용할 글꼴 모음
df-messenger-font-size 선택사항 14px 위젯 전체에서 사용할 텍스트 크기
df-messenger-font-color 선택사항 #1f1f1f 위젯 전체에서 사용할 텍스트 색상
df-messenger-primary-color 선택사항 #0b57d0 위젯 전체에서 요소의 기본 색상(예: 제목 표시줄 배경, 작업 버튼 배경 등)
df-messenger-focus-color 선택사항 #1e88e5 요소 주위의 포커스 링 색상
df-messenger-focus-color-contrast 선택사항 흰색 제목 표시줄과 같이 배경 색상이 있는 상위 요소 내에 포함된 경우 요소 주위의 포커스 링 색상
df-messenger-chat-border 선택사항 없음 대화상자 테두리
df-messenger-chat-border-radius 선택사항 0 대화상자의 테두리 반경

df-messenger-chat-bubble 스타일 지정

df-messenger-chat-bubble 요소를 사용하면 다음 CSS 변수가 제공될 수 있습니다.

속성 입력 정책 기본값 설명
df-messenger-chat-window-height 선택사항 480px 채팅 창 높이
df-messenger-chat-window-width 선택사항 320px 채팅 창 너비
df-messenger-chat-window-offset 선택사항 16px 채팅 풍선과 채팅 창 사이의 거리
df-messenger-chat-window-box-shadow 선택사항 없음 채팅 창의 상자 그림자
df-messenger-chat-collapse-icon-size 선택사항 설정되지 않음 제목 표시줄의 접기 버튼 아이콘 크기
df-messenger-chat-bubble-icon-size 선택사항 36px 채팅 풍선의 아이콘 크기
df-messenger-chat-bubble-close-icon-size 선택사항 24px 채팅 풍선의 닫기 아이콘 크기
df-messenger-chat-bubble-close-icon-transform-rotate 선택사항 -90도 채팅 풍선의 닫기 아이콘 회전, 채팅이 종료되면 0도로 회전
df-messenger-chat-bubble-icon-color 선택사항 흰색 채팅 풍선의 아이콘 및 닫기 아이콘의 색상
df-messenger-chat-bubble-size 선택사항 64px 채팅 풍선 크기
df-messenger-chat-bubble-background 선택사항 #0b57d0 채팅 풍선의 배경
df-messenger-chat-bubble-border-radius 선택사항 32px 채팅 풍선의 테두리 반경
df-messenger-chat-bubble-border 선택사항 없음 채팅 풍선의 테두리
df-messenger-chat-border-minimized 선택사항 없음 최소화된 형태의 채팅의 테두리
df-messenger-chat-border-radius-minimized 선택사항 0 최소화된 형태의 채팅의 테두리 반경

제목 표시줄 스타일 지정

제목 표시줄에는 다음 CSS 변수가 제공될 수 있습니다.

속성 입력 정책 기본값 설명
df-messenger-titlebar-background 선택사항 #0b57d0 제목 표시줄의 배경
df-messenger-titlebar-padding 선택사항 0 15px 제목 표시줄 패딩
df-messenger-titlebar-border 선택사항 없음 제목 표시줄 테두리
df-messenger-titlebar-border-bottom 선택사항 없음 제목 표시줄 하단 테두리
df-messenger-titlebar-title-align 선택사항 start 제목 표시줄에서 제목 텍스트의 텍스트 정렬, 허용되는 값은 start, center, end
df-messenger-titlebar-font-color 선택사항 흰색 제목 표시줄에 있는 텍스트의 텍스트 색상
df-messenger-titlebar-letter-spacing 선택사항 normal 제목 표시줄에 있는 텍스트의 문자 간격
df-messenger-titlebar-title-font-size 선택사항 18px 제목 표시줄에 있는 제목 텍스트의 텍스트 크기
df-messenger-titlebar-title-font-family 선택사항 'Google Sans', 'Helvetica Neue', sans-serif 제목 표시줄에 있는 제목 텍스트의 글꼴 모음
df-messenger-titlebar-title-font-weight 선택사항 400 제목 표시줄에 있는 제목 텍스트의 글꼴 두께
df-messenger-titlebar-title-line-height 선택사항 normal 제목 표시줄에 있는 제목 텍스트의 줄 높이
df-messenger-titlebar-title-letter-spacing 선택사항 normal 제목 표시줄에 있는 제목 텍스트의 문자 간격
df-messenger-titlebar-subtitle-font-color 선택사항 흰색 제목 표시줄에 있는 자막 텍스트의 텍스트 색상
df-messenger-titlebar-subtitle-font-size 선택사항 18px 제목 표시줄에 있는 자막 텍스트의 텍스트 크기
df-messenger-titlebar-subtitle-font-family 선택사항 'Google Sans', 'Helvetica Neue', sans-serif 제목 표시줄에 있는 자막 텍스트의 글꼴 모음
df-messenger-titlebar-subtitle-font-weight 선택사항 400 제목 표시줄에 있는 자막 텍스트의 글꼴 두께
df-messenger-titlebar-subtitle-line-height 선택사항 normal 제목 표시줄에 있는 자막 텍스트의 줄 높이
df-messenger-titlebar-subtitle-letter-spacing 선택사항 normal 제목 표시줄에 있는 자막 텍스트의 문자 간격
df-messenger-titlebar-title-order 선택사항 제목 표시줄의 순서 요소, 허용되는 값은 row 또는 row-reverse임. 이 값은 chat-title-icon 속성이 지정된 경우에만 적용됩니다.
df-messenger-titlebar-icon-width 선택사항 18px 제목 표시줄에 있는 아이콘의 너비입니다. 이 값은 chat-title-icon이 지정된 경우에만 적용됩니다.
df-messenger-titlebar-icon-height 선택사항 18px 제목 표시줄에 있는 아이콘의 높이입니다. 이 값은 chat-title-icon이 지정된 경우에만 적용됩니다.
df-messenger-titlebar-icon-padding 선택사항 0 12px 0 0 제목 표시줄에 있는 아이콘 주위의 패딩입니다. 이 값은 chat-title-icon이 지정된 경우에만 적용됩니다.

채팅 창 스타일 지정

채팅 창에는 다음 CSS 변수가 제공될 수 있습니다.

속성 입력 정책 기본값 설명
df-messenger-chat-background 선택사항 #fafafa 메시지가 표시되는 에이전트 대화상자의 배경
df-messenger-chat-padding 선택사항 10px 메시지가 표시되는 에이전트 대화상자의 패딩
df-messenger-messagelist-border 선택사항 없음 메시지 목록의 테두리
df-messenger-message-border 선택사항 없음 에이전트 대화상자 메시지의 테두리
df-messenger-message-font-size 선택사항 14px 에이전트 대화상자 메시지의 텍스트 크기
df-messenger-message-font-family 선택사항 'Google Sans', 'Helvetica Neue', sans-serif 에이전트 대화상자 메시지의 글꼴 모음
df-messenger-message-font-weight 선택사항 normal 에이전트 대화상자 메시지의 글꼴 두께
df-messenger-message-bot-background 선택사항 #ecf3fe 에이전트가 보낸 메시지의 배경
df-messenger-message-bot-border 선택사항 없음 에이전트가 보낸 메시지의 테두리
df-messenger-message-bot-font-color 선택사항 #1f1f1f 에이전트가 보낸 메시지의 텍스트 색상
df-messenger-message-bot-font-weight 선택사항 normal 에이전트가 전송한 메시지의 글꼴 두께
df-messenger-message-user-background 선택사항 #e1e3e1 사용자가 보낸 메시지의 배경
df-messenger-message-user-border 선택사항 없음 사용자가 보낸 메시지의 테두리
df-messenger-message-user-font-color 선택사항 #1f1f1f 사용자가 보낸 메시지의 텍스트 색상
df-messenger-message-user-font-weight 선택사항 normal 사용자가 보낸 메시지의 글꼴 두께
df-messenger-message-spacing 선택사항 10px 두 메시지 사이의 공간
df-messenger-message-border-radius 선택사항 8px 메시지의 테두리 반경입니다. 모든 모서리에 적용됩니다.
df-messenger-message-bot-border-top-left-radius 선택사항 8px 에이전트 메시지 왼쪽 상단의 테두리 반경, 일반 반경보다 우선함
df-messenger-message-bot-border-top-right-radius 선택사항 8px 에이전트 메시지의 오른쪽 상단 테두리 반경, 일반 반경보다 우선함
df-messenger-message-bot-border-bottom-left-radius 선택사항 8px 에이전트 메시지 왼쪽 하단의 테두리 반경, 일반 반경보다 우선함
df-messenger-message-bot-border-bottom-right-radius 선택사항 8px 에이전트 메시지 오른쪽 하단의 테두리 반경, 일반 반경보다 우선함
df-messenger-message-user-border-top-left-radius 선택사항 8px 사용자 메시지 왼쪽 상단의 테두리 반경, 일반 반경보다 우선함
df-messenger-message-user-border-top-right-radius 선택사항 8px 사용자 메시지의 오른쪽 상단 테두리 반경, 일반 반경보다 우선함
df-messenger-message-user-border-bottom-left-radius 선택사항 8px 사용자 메시지 왼쪽 하단의 테두리 반경, 일반 반경보다 우선함
df-messenger-message-user-border-bottom-right-radius 선택사항 8px 사용자 메시지 오른쪽 하단의 테두리 반경, 일반 반경보다 우선함
df-messenger-message-stack-spacing 선택사항 10px 연속된 두 메시지 사이의 공간
df-messenger-message-bot-stack-border-top-left-radius 선택사항 8px 연속된 에이전트 메시지 왼쪽 상단의 테투리 반경, 에이전트 왼쪽 상단 반경보다 우선함
df-messenger-message-bot-stack-border-top-right-radius 선택사항 8px 연속된 에이전트 메시지 오른쪽 상단의 테두리 반경, 에이전트 오른쪽 상단 반경보다 우선함
df-messenger-message-bot-stack-border-bottom-left-radius 선택사항 8px 연속된 에이전트 메시지 왼쪽 하단의 테두리 반경, 에이전트 왼쪽 하단 반경보다 우선함
df-messenger-message-bot-stack-border-bottom-right-radius 선택사항 8px 연속된 에이전트 메시지 오른쪽 하단의 테두리 반경, 에이전트 오른쪽 하단보다 우선함
df-messenger-message-user-stack-border-top-left-radius 선택사항 8px 연속된 사용자 메시지 왼쪽 상단의 테두리 반경, 사용자 왼쪽 상단 반경보다 우선함
df-messenger-message-user-stack-border-top-right-radius 선택사항 8px 연속된 사용자 메시지 오른쪽 상단의 테두리 반경, 사용자 오른쪽 상단 반경보다 우선함
df-messenger-message-user-stack-border-bottom-left-radius 선택사항 8px 연속된 사용자 메시지 왼쪽 하단의 테두리 반경, 사용자 왼쪽 하단 반경보다 우선함
df-messenger-message-user-stack-border-bottom-right-radius 선택사항 8px 연속된 사용자 메시지 오른쪽 하단의 테두리 반경, 사용자 오른쪽 하단 반경보다 우선함
df-messenger-message-user-writing-image-width 선택사항 24px 에이전트가 쓰는 동안 표시되는 이미지의 너비, bot-writing-image가 설정된 경우에만 활성화됨
df-messenger-message-bot-writing-image-height 선택사항 24px 에이전트가 쓰는 동안 표시되는 이미지의 높이, bot-writing-image가 설정된 경우에만 활성화됨
df-messenger-message-bot-writing-font-color 선택사항 #1f1f1f 에이전트가 쓰는 동안 표시되는 텍스트의 색상
df-messenger-message-bot-writing-font-weight 선택사항 normal 에이전트가 쓰는 동안 표시되는 텍스트의 글꼴 두께
df-messenger-message-bot-writing-font-size 선택사항 14px 에이전트가 쓰는 동안 표시되는 텍스트의 크기
df-messenger-message-bot-writing-border 선택사항 없음 에이전트가 쓰는 동안 표시되는 메시지의 테두리
df-messenger-message-bot-writing-background 선택사항 #ecf3fe 에이전트가 쓰는 동안 표시되는 메시지의 배경
df-messenger-message-bot-writing-padding 선택사항 12px 에이전트가 쓰는 동안 표시되는 메시지의 패딩
df-messenger-message-bot-writing-spacing 선택사항 10px 에이전트가 쓰는 동안 표시되는 메시지와 이전 메시지 사이의 공백
df-messenger-chat-scroll-button-enabled-display 선택사항 없음 '아래로 이동' 버튼 표시를 정의하며, 버튼을 사용 설정하려면 flex로 설정함
df-messenger-chat-scroll-button-align 선택사항 가운데 '아래로 이동' 버튼의 정렬, 허용되는 값은 flex-start, center, flex-end
df-messenger-chat-scroll-button-container-padding 선택사항 8px '아래로 이동' 버튼 주위의 컨테이너 패딩
df-messenger-chat-scroll-button-text-display 선택사항 inline '아래로 이동' 버튼에서 아이콘 옆의 텍스트 표시, 텍스트를 숨기려면 none을 사용함
df-messenger-chat-scroll-button-font-size 선택사항 14px '아래로 이동' 버튼의 텍스트 크기
df-messenger-chat-scroll-button-font-color 선택사항 흰색 '아래로 이동' 버튼의 텍스트 색상
df-messenger-chat-scroll-button-background 선택사항 #0b57d0 '아래로 이동' 버튼의 배경
df-messenger-chat-scroll-button-border-radius 선택사항 999px '아래로 이동' 버튼의 테두리 반경
df-messenger-chat-messagelist-scroll-shadow-background 선택사항 방사형-그래디언트(가장 먼 쪽에서 50%, 100%, rgba(0,0,0,.2), 투명) 하단 목록이 맨 아래로 스크롤되지 않으면 메시지 목록 하단에 표시되는 섀도, 사용 중지하려면 none으로 설정함

작업 수행자 이미지 스타일 지정

작업 수행자 이미지는 봇이나 작업 수행자의 메시지와 함께 표시되는 이미지입니다. 이러한 작업 수행자 이미지의 경우 다음 CSS 변수가 제공될 수 있습니다.

속성 입력 정책 기본값 설명
df-messenger-message-actor-spacing 선택사항 16px 작업 수행자 이미지와 메시지 사이의 거리
df-messenger-message-bot-actor-order 선택사항 작업 수행자 이미지 및 메시지의 순서. 작업 수행자 이미지를 왼쪽에, 메시지를 오른쪽에 표시하려면 row를 사용하고 작업 수행자 이미지를 오른쪽에, 메시지를 왼쪽에 표시하려면 row-reverse를 사용합니다.
df-messenger-message-user-actor-order 선택사항 row-reverse 작업 수행자 이미지 및 메시지의 순서. 작업 수행자 이미지를 오른쪽에, 메시지를 왼쪽에 표시하려면 row-reverse를 사용하고 작업 수행자 이미지를 왼쪽에, 메시지를 오른쪽에 표시하려면 row를 사용합니다.
df-messenger-message-actor-direction 선택사항 df-messenger-message-bot-actor-orderdf-messenger-message-user-actor-order의 반대여야 하며, row 기반일 때는 column을 사용하고, column 기반일 때는 row를 사용합니다.
df-messenger-message-actor-align 선택사항 flex-start 메시지와 관련된 작업 수행자의 정렬. 작업 수행자 이미지를 상단에 표시하려면 flex-start를 사용하고 작업 수행자 이미지를 중앙에 표시하려면 center를 사용하고 작업 수행자 이미지를 하단에 표시하려면 flex-end를 사용합니다.
df-messenger-message-actor-border-radius 선택사항 999px 작업 수행자 이미지의 테두리 반경
df-messenger-message-actor-padding 선택사항 8px 작업 수행자 이미지의 패딩
df-messenger-message-actor-image-size 선택사항 24px 작업 수행자 이미지의 크기
df-messenger-message-bot-actor-background 선택사항 흰색 에이전트의 작업 수행자 이미지의 배경
df-messenger-message-bot-actor-border 선택사항 없음 에이전트의 작업 수행자 이미지의 테두리
df-messenger-message-bot-actor-offset 선택사항 0 에이전트의 작업 수행자 이미지를 이동할 오프셋
df-messenger-message-user-actor-background 선택사항 흰색 사용자의 작업 수행자 이미지의 배경
df-messenger-message-user-actor-border 선택사항 없음 사용자의 작업 수행자 이미지의 테두리
df-messenger-message-user-actor-offset 선택사항 0 사용자의 작업 수행자 이미지를 이동할 오프셋

사용자 입력 스타일 지정

사용자 입력에는 다음 CSS 변수가 제공될 수 있습니다.

속성 입력 정책 기본값 설명
df-messenger-send-icon-color 선택사항 #0b57d0 사용자 입력의 '전송' 아이콘의 색상
df-messenger-send-icon-color-hover 선택사항 #0b57d0 마우스 오버 시 사용자 입력에 있는 '전송' 아이콘의 색상
df-messenger-send-icon-color-active 선택사항 #0b57d0 텍스트 전송이 가능한 경우 사용자 입력에 있는 '전송' 아이콘의 색상
df-messenger-send-icon-offset-x 선택사항 0 사용자 입력에 있는 '전송' 아이콘의 세로 오프셋
df-messenger-send-icon-offset-y 선택사항 -4px 사용자 입력에 있는 '전송' 아이콘의 가로 오프셋
df-messenger-input-background 선택사항 흰색 사용자 입력의 배경
df-messenger-input-padding 선택사항 8px 사용자 입력란(메시지 전송 버튼 포함)과 컨테이너 사이의 전체 패딩
df-messenger-input-inner-padding 선택사항 0px 48px 0px 0 사용자 입력란(메시지 전송 버튼 제외)과 컨테이너 사이의 내부 패딩
df-messenger-input-border 선택사항 없음 사용자 입력의 테두리
df-messenger-input-border-top 선택사항 1px solid #e0e0e0 사용자 입력의 상단 테두리
df-messenger-input-border-bottom 선택사항 없음 사용자 입력의 텍스트 필드의 테두리 하단
df-messenger-input-font-family 선택사항 'Google Sans', 'Helvetica Neue', sans-serif 사용자 입력의 글꼴 모음
df-messenger-input-font-color 선택사항 #1f1f1f 사용자 입력의 텍스트 색상
df-messenger-input-font-size 선택사항 14px 사용자 입력의 텍스트 크기
df-messenger-input-font-weight 선택사항 normal 사용자 입력의 글꼴 두께
df-messenger-input-box-border 선택사항 없음 사용자 입력 상자의 테두리
df-messenger-input-box-focus-border 선택사항 없음 포커스가 있는 동안 사용자 입력 상자의 테두리
df-messenger-input-box-border-radius 선택사항 0 사용자 입력 상자의 테두리 반경
df-messenger-input-box-padding 선택사항 12px 0 사용자 입력 상자의 패딩
df-messenger-input-box-focus-padding 선택사항 12px 0 포커스가 있는 동안 사용자 입력 상자의 패딩
df-messenger-input-gutter 선택사항 안정됨 사용자 입력의 스크롤바 여백
df-messenger-input-info-font-size 선택사항 14px 사용자 입력의 정보 메시지 텍스트 크기
df-messenger-input-info-font-weight 선택사항 normal 사용자 입력의 정보 메시지의 글꼴 두께
df-messenger-input-info-padding 선택사항 14px 16px 사용자 입력의 정보 메시지 패딩
df-messenger-input-info-line-height 선택사항 20px 사용자 입력의 정보 메시지의 줄 높이
df-messenger-input-long-text-warning-display 선택사항 없음 block으로 설정하면 입력이 256자를 초과할 때 경고 메시지가 표시됩니다. max-query-length 속성이 더 높은 경우에만(예: 사용 중지) 활성화됩니다. 추가 문서.
df-messenger-input-warning-background 선택사항 #fef7e0 사용자 입력의 경고 메시지 배경
df-messenger-input-warning-color 선택사항 #410e0b 사용자 입력의 경고 메시지 텍스트 색상
df-messenger-input-warning-icon-color 선택사항 #e37400 사용자 입력의 경고 메시지에 있는 아이콘의 색상
df-messenger-input-error-background 선택사항 #f9dedc 사용자 입력의 오류 메시지 배경
df-messenger-input-error-color 선택사항 #410e0b 사용자 입력의 오류 메시지 텍스트 색상
df-messenger-input-error-icon-color 선택사항 #b3261e 사용자 입력의 경고 메시지에 있는 아이콘의 색상

인증 오버레이 스타일 지정

인증된 설정을 사용하는 경우 오버레이에 다음 CSS 변수가 제공될 수 있습니다.

속성 입력 정책 기본값 설명
df-messenger-auth-background 선택사항 rgba(204, 204, 204, .8) 인증이 표시될 때 에이전트 대화상자의 배경
df-messenger-auth-button-background 선택사항 #0b57d0 인증 버튼의 배경
df-messenger-auth-button-font-family 선택사항 'Google Sans', 'Helvetica Neue', sans-serif 인증 버튼의 글꼴 모음
df-messenger-auth-button-font-color 선택사항 흰색 인증 버튼의 텍스트 색상
df-messenger-auth-button-font-size 선택사항 14px 인증 버튼의 텍스트 크기
df-messenger-auth-button-border 선택사항 없음 인증 버튼의 테두리
df-messenger-auth-button-border-radius 선택사항 8px 인증 버튼의 테두리 반경

피드백 스타일 지정

응답 피드백 기능을 사용 설정하면 피드백 제어를 위해 다음 CSS 변수가 제공될 수 있습니다.

속성 입력 정책 기본값 설명
df-messenger-message-feedback-icon-distance 선택사항 8px 좋아요 버튼과 싫어요 버튼 사이의 거리
df-messenger-message-feedback-icon-font-color 선택사항 #444746 좋아요 버튼과 싫어요 버튼의 색상
df-messenger-message-feedback-icon-font-color-active 선택사항 #444746 활성 상태일 때 좋아요 및 싫어요 버튼 색상
df-messenger-message-feedback-icon-border 선택사항 없음 좋아요 버튼과 싫어요 버튼의 테두리
df-messenger-message-feedback-icon-border-radius 선택사항 0 좋아요 버튼과 싫어요 버튼의 테두리 반경
df-messenger-message-feedback-icon-background 선택사항 없음 좋아요 버튼과 싫어요 버튼의 배경
df-messenger-message-feedback-icon-background-hover 선택사항 없음 마우스를 올렸을 때 좋아요 버튼과 싫어요 버튼의 배경
df-messenger-message-feedback-icon-padding 선택사항 0 좋아요 버튼과 싫어요 버튼의 패딩
df-messenger-message-rich-feedback-spacing 선택사항 10px 서식 있는 피드백에 있는 요소의 간격
df-messenger-message-rich-feedback-padding 선택사항 0 서식 있는 피드백의 패딩
df-messenger-message-rich-feedback-background 선택사항 없음 서식 있는 피드백의 배경
df-messenger-message-rich-feedback-border-radius 선택사항 0 서식 있는 피드백의 테두리 반경
df-messenger-message-rich-feedback-border 선택사항 없음 서식 있는 피드백의 테두리
df-messenger-rich-feedback-offset-left 선택사항 0 왼쪽의 오프셋