위젯 커스터마이징

채팅 위젯의 외관을 브랜드와 웹사이트 디자인에 맞게 개인화하세요.

설정

모든 위젯 커스터마이징 옵션은 설정 → 채널 → 웹에서 확인할 수 있습니다. 웹 채널을 선택하고 외관 탭을 여세요.

테마 색상

테마 색상은 위젯 전체에 일관되게 적용됩니다:

런처 버튼 배경
헤더 바 배경
전송 버튼 색상
링크 강조 색상
사용자 메시지 말풍선 배경

브랜드 아이덴티티와 어울리면서 흰색 텍스트와 충분한 대비를 이루는 색상을 선택하세요.

환영 메시지

환영 메시지는 고객이 위젯을 열었을 때 처음 보게 되는 텍스트입니다. 친근한 톤으로 작성하고, 봇이 어떤 도움을 줄 수 있는지 명확하게 설명하세요.

예시:

“안녕하세요! 오늘 무엇을 도와드릴까요?”
“Acme 지원 센터에 오신 것을 환영합니다. 제품과 서비스에 대해 무엇이든 물어보세요.”
“안녕하세요! 도움이 필요하시면 말씀해 주세요. 무엇을 도와드릴까요?”

위젯 위치

위치	설정 값	사용 시기
오른쪽 하단	`bottom-right` (기본값)	대부분의 사이트에 적합한 기본 배치
왼쪽 하단	`bottom-left`	오른쪽에 다른 요소와 겹칠 때

아바타

v1.6.4

이미지 URL을 입력하여 위젯 헤더와 홈 화면에 커스텀 아바타를 표시하세요.

대시보드에서: 설정 → 채널 → 웹 → 커스터마이저 → 아바타 URL에서 아바타 URL을 설정하세요.

임베드 코드에서: 테마 설정에 avatarUrl을 전달하세요:

<script>
  window.ClientaConfig = {
    botId: "YOUR_BOT_ID",
    widgetId: "YOUR_WIDGET_ID",
    theme: {
      avatarUrl: "https://example.com/your-logo.png"
    }
  };
</script>

요구 사항:

https:// URL이어야 합니다 (보안상 http, data:, javascript: URL은 허용되지 않습니다)
권장 크기: 128 × 128픽셀 (정사각형)
지원 형식: PNG, JPG, WebP, SVG
URL이 유효하지 않거나 이미지 로드에 실패하면 기본 아이콘이 표시됩니다

인사말 모드

v1.6.2

인사말 메시지는 세 가지 언어 모드를 지원합니다. 설정 → 채널 → 웹 → 커스터마이저로 이동하여 인사말 모드 섹션을 찾으세요.

정적(Static)

방문자의 언어에 관계없이 모든 방문자에게 동일한 인사말 텍스트가 표시됩니다. 이것이 기본 모드입니다.

텍스트 필드에 하나의 인사말을 입력하세요. 예시: “안녕하세요! 오늘 무엇을 도와드릴까요?”

방문자 언어 일치(Match Visitor, locale)

각 언어별로 다른 인사말을 표시합니다. 위젯이 방문자의 감지된 언어를 읽어 일치하는 인사말을 표시합니다.

방문자 언어 일치 모드를 선택하세요.
지원되는 15개 로케일 각각에 대한 필드가 나타납니다.
지원하려는 각 언어의 인사말 텍스트를 입력하세요.
로케일 필드를 비워두면 해당 언어에 대해 정적 인사말로 대체됩니다.

설정 예시:

태국어: “สวัสดีค่ะ! มีอะไรให้ช่วยไหม?”
영어: “Hi! How can I help you today?”
일본어: “こんにちは！何かお手伝いできますか？“

조직 기본 언어(Org-Main)

방문자의 언어에 관계없이 인사말이 항상 조직의 주요 응답 언어로 표시됩니다. 이 모드는 **AI 설정 → 주요 응답 언어**에 설정된 언어를 따릅니다.

팀이 하나의 언어로 운영되며 모든 인사말을 일관되게 유지하고 싶을 때 Org-Main을 사용하세요.

언어 선택기

v1.6.2

언어 선택기는 방문자가 언어를 직접 선택할 수 있도록 위젯 헤더에 지구본 아이콘(🌐)을 추가합니다. 기본적으로 비활성화되어 있습니다.

활성화하려면: 설정 → 채널 → 웹 → 커스터마이저에서 언어 선택기 표시를 켜세요.

방문자가 드롭다운에서 언어를 선택하면:

세션 동안 모든 AI 응답이 해당 언어로 고정됩니다
방문자가 다른 언어로 입력해도 자동 감지보다 선택한 언어가 우선 적용됩니다
위젯 UI가 선택한 언어로 전환됩니다

전체 동작 개요는 웹 위젯 — 언어 선택기를 참조하세요.

기본 언어

v1.6.8

자동 감지가 이루어지기 전에 방문자가 원하는 로케일의 UI를 볼 수 있도록 위젯의 기본 언어를 설정하세요. 설정 → 채널 → 웹 → 커스터마이저 → 기본 언어로 이동하여 드롭다운에서 선택하세요.

언어 우선순위 체계는 다음과 같습니다:

이 언어 강제 적용 (AI 설정) — 활성화 시 모든 설정보다 우선합니다
방문자의 명시적 선택 (언어 선택기가 활성화된 경우)
기본 언어 — 이 설정
임베드 설정 로케일 — 임베드 코드의 locale 값
태국어 — 아무것도 설정되지 않은 경우 폴백

**“없음 — 임베드 설정 따름”**을 선택하면 이 설정을 건너뛰고 임베드 코드의 로케일 값을 따릅니다.

다크 모드 및 CSS 변수

v1.6.8

위젯은 방문자가 채팅 헤더에서 활성화할 수 있는 내장 다크 모드 토글을 지원합니다. 위젯 UI 전체가 CSS 사용자 정의 속성으로 테마 처리되어 두 모드 모두에서 일관된 외관을 보장합니다.

주요 CSS 변수

변수	설명
`--cw-primary`	기본 브랜드 색상 (테마 색상 설정에서 가져옴)
`--cw-primary-rgb`	투명도 효과에 사용되는 기본 색상의 RGB 구성 요소
`--cw-bg`	위젯 배경 색상
`--cw-bg-secondary`	보조 배경 (입력 필드, 폼 요소)
`--cw-surface`	카드, 툴팁, 인용 스니펫의 서피스 색상
`--cw-text`	기본 텍스트 색상
`--cw-text-secondary`	보조/음소거 텍스트 색상
`--cw-border`	구분선 및 입력 외곽선의 테두리 색상

다크 모드가 전환되면 위젯은 루트 컨테이너에 cw-dark 또는 cw-light 클래스를 적용하고, 모든 CSS 변수가 자동으로 업데이트됩니다. 그라데이션 헤더, 메시지 말풍선, 문의 폼, 인용 칩 모두 현재 모드를 따릅니다.

미리보기

변경한 후, 설정 페이지 오른쪽의 실시간 미리보기 패널을 사용하면 저장하기 전에 사이트에서 위젯이 어떻게 표시될지 정확하게 확인할 수 있습니다.

위젯 커스터마이징

위젯 커스터마이징

설정

테마 색상

환영 메시지

위젯 위치

아바타

인사말 모드

정적(Static)

방문자 언어 일치(Match Visitor, locale)

조직 기본 언어(Org-Main)

언어 선택기

기본 언어

다크 모드 및 CSS 변수

주요 CSS 변수

미리보기

팁