채팅 창: 스타일, 크기, 사이드 패널과 모바일 화면

열린 채팅 창의 헤더, 밀도, 말풍선, 그림자, 아바타, 입력란, 카드, 창 크기, 사이드 패널, 배경, 글자 크기, 애니메이션과 방문자 말풍선을 설명합니다.

색상이 개성을 정하고 형태가 나머지를 완성합니다. /app/projects/{id}의 외관 탭, 브랜드 설정 섹션에는 스타일(색상이 아닌 형태)과 창(열린 창의 모습) 두 설정 그룹이 있습니다. 아무것도 선택하지 않으면 모두 기본값을 유지합니다. 저장으로 저장하며 위젯 홈 화면 아래 미리보기에서 실제 위젯을 봅니다.

디자인 어시스턴트의 템플릿은 이 설정도 함께 지정합니다.

스타일

헤더 – 그라데이션(기본값), 평면 또는 유리입니다. 홈 화면 헤더와 제목 표시줄에 적용됩니다.
밀도 – 보통(기본값), 좁은 간격 또는 넓은 간격입니다. 홈 화면과 대화의 간격입니다.
말풍선 – 부드럽게(기본값, 설정한 모서리 반경에 따름), 둥글게(18 px), 사각형(4 px)입니다.
그림자 – 부드럽게(기본값), 선명하게 또는 없음입니다. 채팅 버튼이 아닌 창에 적용됩니다.
아바타 – 둥글게(기본값) 또는 사각형입니다.
입력란 – 평면(기본값) 또는 캡슐(크게 둥근 모서리와 둥근 버튼)입니다.
카드 – 윤곽선(기본값) 또는 평면입니다. 홈 화면 타일, 도움말 행과 대화의 카드에 적용됩니다.

창

창 크기 – 보통(기본값, 너비 380 px), 넓게(440 px), 좁게(340 px) 또는 길게(화면 높이에 거의 맞추며 최대 960 px)입니다. 일반 높이는 620 px이며 작은 화면에서는 더 작습니다.
레이아웃 – 떠 있는 창(기본값) 또는 사이드 패널입니다. 사이드 패널은 채팅 버튼이 있는 쪽 가장자리에 전체 높이로 놓이며 그곳에서 밀려 들어옵니다. 열려 있는 동안 채팅 버튼은 물러납니다. 헤더의 버튼으로 닫습니다.
배경 – 메시지 영역의 바탕입니다. 단순하게(기본값), 점, 격자 또는 그라데이션(브랜드 색상을 은은하게 반영)입니다.
글자 크기 – 보통(기본값, 14 px), 크게(15.5 px), 작게(13 px)입니다. 말풍선과 입력란에 적용되며 채팅 버튼에는 적용되지 않습니다.
열기 애니메이션 – 밀어서 표시(기본값), 확대 표시, 서서히 표시 또는 없음입니다. 방문자가 시스템에서 “동작 줄이기”를 설정하면 이 설정과 관계없이 애니메이션을 생략합니다.
방문자 말풍선 – 방문자 말풍선의 색상입니다. 주 색상(기본값, 브랜드 색상의 연한 혼합색), 강조색 또는 중립색(회색)입니다. 여기에서도 읽을 수 있을 때까지 텍스트를 다시 계산합니다.

창 크기와 레이아웃은 화면 너비 481 px부터 적용됩니다. 그 아래에서는 항상 전체 화면으로 열립니다(아래 참조).

코드에서 설정

모든 설정은 브랜드의 stil 아래에 있습니다. 값은 내부 이름입니다.

kopf: verlauf, flach, glas
dichte: normal, kompakt, luftig
blase: weich, rund, eckig
schatten: weich, hart, keiner
avatar: rund, eckig
eingabe: flach, pille
karten: rahmen, flach
fenster: normal, breit, schmal, hoch
ansicht: schwebend, seite
hintergrund: schlicht, punkte, raster, verlauf
schrift: normal, gross, klein
animation: gleiten, zoom, blenden, keine
besucher: marke, akzent, neutral

알 수 없는 값은 기본값으로 대체됩니다.

ReactiveChat('setBrand', { stil: { ansicht: 'seite', hintergrund: 'punkte', schrift: 'gross' } });

스니펫에서 data-rc-brand='{"stil":{"ansicht":"seite"}}'로 지정하면 해당 페이지의 자체 브랜드 설정으로 간주되어 계정 설정보다 우선합니다. 색상, 글꼴과 테마를 참조합니다.

동작

스니펫의 data-rc-motion으로 애니메이션을 제어합니다. auto(기본값, 방문자의 시스템 설정에 따름), reduced(동작 없음), full입니다.

data-rc-motion="reduced"

헤더

헤더는 누가 답변하는지 보여 줍니다.

팀원이 작성하는 경우 해당 사람의 표시 이름을 표시합니다. 각 팀원이 개인 설정에서 관리합니다. 팀, 콘솔과 알림을 참조합니다.
AI 어시스턴트가 답변하는 경우 AI와 지식 → 어시스턴트의 이름(기본값 “Ada”)을 표시합니다. AI 어시스턴트를 참조합니다.
그 외에는 제목 “채팅”을 표시합니다. 제목과 두 번째 줄(“상담 가능해요”, “AI 어시스턴트”)은 텍스트와 언어에서 header.title, header.subtitle_online, header.subtitle_bot 키로 변경합니다.

아바타는 이름의 첫 글자를 표시하며 어시스턴트는 ✦ 기호로 표시합니다. 현재 팀원 사진은 저장할 수 없습니다.

헤더에는 방문자가 대화 사본을 이메일로 받을 수 있는 봉투 아이콘도 있습니다. 규칙과 서비스 → 대화를 이메일로 받기에서 끌 수 있습니다. 상담 가능 여부, 양식과 서비스를 참조합니다.

“Powered by reactive.chat” 안내

무료 요금제에서는 창 하단에 “Powered by reactive.chat” 안내가 표시됩니다. 유료 요금제부터는 외관 → 채팅 내 reactive.chat의 “Powered by reactive.chat” 숨기기로 직접 결정합니다. 유료 요금제의 기본값은 숨김입니다. 안내 문구 자체는 변경할 수 없습니다.

휴대전화

너비 480 px까지, 그리고 기기를 가로로 놓은 경우 높이 480 px까지는 채팅이 전체 화면으로 열립니다. 모서리 없이 보이는 높이 전체를 사용하며 화면 키보드가 열려도 유지합니다. 입력란은 휴대전화가 확대되지 않도록 16 px 텍스트를 사용하고 버튼 크기는 최소 44 px입니다. 채팅이 열려 있는 동안 채팅 버튼은 물러납니다.

창 크기와 사이드 패널은 휴대전화에 적용되지 않습니다. 나머지 스타일 설정, 색상과 글자 크기는 적용됩니다. 휴대전화의 채팅 버튼 크기는 채팅 버튼에서 설정합니다.

최종 업데이트: 2026-10-25