
개편되어 css 코드를 Webchat-> [Theme] -> [Styles]에서 넣을 수 있습니다.

아래 CSS를 사용하여 Chatbot 버튼을 사용자 정의할 수 있습니다.
.bpw-floating-button {
/* 컨테이너의 오른쪽에 버튼을 정렬합니다. */
float: right;
/* 버튼 아이콘의 채우기 색을 설정합니다. */
fill: rgb(255, 255, 255);
/* 버튼에 마우스를 올리면 커서를 포인터로 변경합니다. */
cursor: pointer;
/* 버튼을 클릭하면 테두리를 제거합니다. */
outline: none;
/* 버튼 요소 내부에 아이콘을 가운데에 배치합니다. */
display: flex;
align-items: center;
justify-content: center;
/* 버튼이 다른 요소 위에 있도록 z-index를 설정합니다. */
z-index: 1;
/* 버튼의 너비와 높이를 설정합니다. */
width: 52px;
height: 52px;
/* 버튼에 마우스를 올리면 커서를 포인터로 변경합니다. */
cursor: pointer;
/* 버튼의 모서리를 둥글게 합니다. */
border-radius: 50%;
/* 버튼에 그림자 효과를 추가합니다. */
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.4);
/* 버튼에서 넘치는 콘텐츠를 잘라냅니다. */
overflow: hidden;
/* 버튼에서 패딩과 테두리를 제거합니다. */
padding: 0;
border: none;
background-clip: padding-box;
/* 버튼의 크기가 변경될 때 전환 효과를 추가합니다. */
transition: width 1s, height 1s;
}
해석:
float: right 속성은 버튼을 컨테이너의 오른쪽에 정렬합니다. 이는 버튼을 화면의 하단 모서리에 배치하여 사용자들이 쉽게 접근할 수 있도록 하는 데 유용합니다.fill 속성은 버튼 아이콘의 채우기 색을 설정합니다. 이 경우 아이콘은 흰색입니다.cursor 속성은 버튼에 마우스를 올리면 커서를 포인터로 변경합니다. 이는 사용자에게 버튼이 클릭할 수 있음을 나타냅니다.outline 속성은 버튼을 클릭하면 테두리를 제거합니다. 이는 버튼에 더 매끄러운 모양과 느낌을 줍니다.display 속성은 버튼 요소 내부에 아이콘을 가운데에 배치합니다. 이는 버튼이 크기가 조정되더라도 아이콘이 항상 표시되도록 합니다.align-items 속성은 버튼 요소 내부에 아이콘을 수직으로 가운데에 배치합니다.justify-content 속성은 버튼 요소 내부에 아이콘을 수평으로 가운데에 배치합니다.z-index 속성은 버튼이 페이지의 다른 요소 위에 있도록 설정합니다. 이는 버튼이 항상 보이고 사용자에게 액세스할 수 있도록 하는 데 중요합니다.width 속성은 버튼의 너비를 52픽셀로 설정합니다.height 속성은 버튼의 높이를 52픽셀로 설정합니다.border-radius 속성은 버튼의 모서리를 둥글게 합니다. 이는 버튼에 더 현대적이고 세련된 모양을 줍니다.box-shadow 속성은 버튼에 그림자 효과를 추가합니다. 이는 버튼을 배경에서 눈에 띄게 하고 더 시각적으로 매력적으로 만듭니다.overflow 속성은 버튼에서 넘치는 콘텐츠를 잘라냅니다. 이는 버튼이 너무 커지거나 페이지의 다른 요소와 겹치지 않도록 하는 데 중요합니다.padding 속성은 버튼에서 패딩을 제거합니다. 이는 버튼이 가능한 한 콤팩트하도록 합니다.border 속성은 버튼에서 테두리를 제거합니다. 이는 버튼에 더 매끄럽고 현대적인 모양.bpw-floating-button {
background-image: url(YOUR_URL);
}
.bpw-floating-button i {
/* 아이콘의 투명도가 변경될 때 전환 효과를 추가합니다. */
transition: opacity 0.3s ease;
/* 아이콘의 투명도를 완전히 표시되도록 설정합니다. */
opacity: 1;
/* 부모 버튼 요소에서 채우기 및 선 색상을 상속합니다. */
fill: inherit;
stroke: inherit;
/* 아이콘의 너비를 부모 버튼 요소의 100%로 설정합니다. */
width: 100%;
/* 패딩을 제거하고 선 높이를 0으로 설정하여 아이콘을 가운데에 배치합니다. */
padding: 0;
line-height: 0;
}
해석:
transition: opacity 0.3s ease 속성은 아이콘의 투명도가 변경될 때 전환 효과를 추가합니다. 이는 아이콘이 점차 숨거나 나타나는 부드러운 효과를 만듭니다.opacity: 1 속성은 아이콘의 투명도를 완전히 표시되도록 설정합니다.fill: inherit; 속성은 부모 버튼 요소에서 채우기 색상을 상속합니다.stroke: inherit; 속성은 부모 버튼 요소에서 선 색상을 상속합니다.width: 100%; 속성은 아이콘의 너비를 부모 버튼 요소의 100%로 설정합니다.padding: 0; 속성은 아이콘에서 패딩을 제거합니다.line-height: 0; 속성은 아이콘에서 선 높이를 0으로 설정합니다. 이는 아이콘을 가운데에 배치하는 데 사용됩니다.이 코드는 부모 버튼 요소와 동일한 색상의 완전히 표시되는 아이콘을 만드는 데 사용됩니다. 아이콘은 또한 부모 버튼 요소의 크기에 맞게 조정될 수 있습니다.
.bpw-floating-button .bpw-floating-button-unread {
/* 알림 배지를 표시합니다. */
display: block;
/* 배지를 버튼의 오른쪽 상단에 배치합니다. */
position: absolute;
right: 2px;
bottom: 54px;
/* 배지의 너비와 높이를 설정합니다. */
width: 20px;
height: 20px;
/* 배지의 모서리를 둥글게 하여 원형으로 만듭니다. */
border-radius: 50%;
/* 배지 내부의 텍스트를 가운데에 배치합니다. */
line-height: 20px;
/* 배지 내부 텍스트의 색상을 설정합니다. */
color: #fff;
/* 배지의 배경색을 설정합니다. */
background-color: #ff5d5d;
/* 배지에 그림자 효과를 추가합니다. */
box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.4);
}
해석:
display: block 속성은 알림 배지를 표시합니다.position: absolute 속성은 배지를 버튼의 오른쪽 상단에 배치합니다.right: 2px 속성은 배지를 버튼의 오른쪽에서 2픽셀 떨어뜨립니다.bottom: 54px 속성은 배지를 버튼의 맨 아래에서 54픽셀 떨어뜨립니다.width: 20px 속성은 배지의 너비를 20픽셀로 설정합니다.height: 20px 속성은 배지의 높이를 20픽셀로 설정합니다.border-radius: 50%; 속성은 배지의 모서리를 둥글게 하여 원형으로 만듭니다.line-height: 20px; 속성은 배지 내부의 텍스트를 가운데에 배치합니다.color: #fff; 속성은 배지 내부 텍스트의 색상을 흰색으로 설정합니다.background-color: #ff5d5d; 속성은 배지의 배경색을 빨간색으로 설정합니다.box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.4); 속성은 배지에 그림자 효과를 추가합니다.이 코드는 버튼의 오른쪽 상단에 표시되는 빨간색 원형 알림 배지를 만드는 데 사용됩니다. 배지에는 흰색 텍스트가 표시되며, 그림자 효과가 적용됩니다. 배지의 크기와 위치는 CSS로 지정할 수 있습니다.

아래 CSS를 사용하여 Chatbot 헤더를 사용자 정의할 수 있습니다.
/* This block of CSS code styles a header icon element */ 처럼 영어로 된 코드 설명을 gemini로 번역하여 다시 코드로 올려주세요.
/* This block of CSS code styles a header icon element */
.bpw-header-icon {
/* Remove border */
border: none;
/* Remove background color */
background: none;
/* Remove padding */
padding: 0;
/* Remove margin */
margin: 0;
/* Set text color to a variable named shark */
color: var(--shark);
/* Set line-height to zero */
line-height: 0;
/* Set left margin to a variable named spacing-large */
margin-left: var(--spacing-large);
/* Align text to the right */
text-align: right;
/* Align element vertically in the middle */
vertical-align: middle;
/* Set cursor to a pointer */
cursor: pointer;
/* Set fill color to a variable named shark */
fill: var(--shark);
/* Set width to 16 pixels */
width: 16px;
/* Set height to 16 pixels */
height: 16px;
/* Set fill transition duration to 0.3 seconds */
transition: fill 0.3s;
}
/* Apply the same fill color and fill transition to the icon's SVG and path elements */
.bpw-header-icon svg,
.bpw-header-icon svg path {
/* Set fill color to a variable named shark */
fill: var(--shark);
/* Set fill transition duration to 0.3 seconds */
transition: fill 0.3s;
}
/* When the icon is hovered over, change the fill color to a variable named reef for the icon, SVG and path elements */
.bpw-header-icon:hover,
.bpw-header-icon:hover svg,
.bpw-header-icon:hover svg path {
fill: var(--reef);
}
.bpw-header-title-flexbox {
/* sets the overflow behavior of the element */
overflow: hidden;
/* sets the text overflow behavior of the element */
text-overflow: ellipsis;
/* sets the flexbox properties of the element for webkit browsers */
-webkit-box-flex: 1;
/* sets the flexbox properties of the element for Microsoft browsers */
-ms-flex: 1 1 auto;
/* sets the flexbox properties of the element */
flex: 1 1 auto;
}
.bpw-header-title-container {
/* sets the vertical alignment of the element */
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
/* sets the display of the element to use flexbox for webkit browsers */
display: -webkit-box;
/* sets the display of the element to use flexbox for Microsoft browsers */
display: -ms-flexbox;
/* sets the display of the element to use flexbox */
display: flex;
}
.bpw-header-title-container .bpw-bot-avatar {
/* sets the display of the element to none */
display: none;
}
.bpw-header-title-container .bpw-bot-avatar svg {
/* sets the zoom level of the element */
zoom: 0.6;
}
.bpw-header-name {
/* sets the font weight of the element */
font-weight: 500;
/* sets the font size of the element */
font-size: 14px;
/* sets the color of the element */
color: var(--zinc-600);
}
.bpw-header-subtitle {
/* sets the overflow behavior of the element */
overflow: hidden;
/* sets the white space handling of the element */
white-space: nowrap;
/* sets the text overflow behavior of the element */
text-overflow: ellipsis;
/* sets the font weight of the element */
font-weight: 300;
/* sets the font size of the element */
font-size: 12px;
/* sets the color of the element */
color: var(--zinc-400);
}
.bpw-header-unread {
/* sets the display of the element to none */
display: none;
}
.sr-only {
/* sets the position of the element to absolute */
position: absolute;
/* sets the width of the element */
width: 1px;
/* sets the height of the element */
height: 1px;
/* sets the padding of the element */
padding: 0;
/* sets the margin of the element */
margin: -1px;
/* sets the overflow behavior of the element */
overflow: hidden;
/* clips the element to the given rectangle */
clip: rect(0, 0, 0, 0);
/* sets the border of the element */
border: 0;
}
| 사용자 정의 변수 | 변수 유형 | 기본값 | 설명 |
showConversationsButton | 부울 | true | false인 경우 대화 목록 창이 숨겨집니다. |
enableTranscriptDownload | 부울 | true | 사용자가 대화 기록을 다운로드할 수 있도록 허용합니다. |
enableConversationDeletion | 부울 | false | 사용자가 대화 기록을 삭제할 수 있도록 허용합니다. |
showCloseButton | 부울 | true | 웹 채팅이 열릴 때 웹 채팅 닫기 버튼이 표시됩니다. |
.bpw-header-container {
/* sets the border radius of the element */
border-radius: var(--spacing-large);
/* sets the background color of the element */
background: var(--white);
/* sets the border of the element */
border: 1px solid var(--zinc-200);
/* sets the border radius of the element (repeated declaration) */
border-radius: var(--spacing-medium);
/* sets the padding of the element */
padding: var(--spacing-large) var(--spacing-x-large);
}