위젯 커스터마이징
위젯 설정 들어가기
채팅 설정 > 연동 / 개발 > 연동 설정 > 웹사이트 연동
웹사이트 연동 상세 화면은 왼쪽에 설정 카드가 세로로 놓이고, 오른쪽에 지금 설정이 그대로 반영되는 미리보기가 붙어 있는 구조입니다. 카드 제목을 클릭하면 접히고 펼쳐집니다.
| 순서 | 카드 | 여기서 정하는 것 |
|---|---|---|
| 1 | 노출 · 문의 설정 | 런처를 어디에·언제 띄울지, 다른 채널 문의 버튼을 보여줄지 |
| 2 | 테마 · 브랜딩 | 테마 색상, 화면 모드, 버튼 아이콘, 봇·상담원 프로필, 런처 테두리 |
| 3 | 홈 | 위젯 홈 화면의 로고·커버·채널명·인사말 |
| 4 | 답변 속도 | 문의하기 전에 보이는 응답 시간 안내 |
| 5 | 대화방 | 메시지 글자 크기, 말풍선 색상, 채팅창 테두리 |
| 6 | 안내 말풍선 | 런처 옆에 뜨는 인사 말풍선 |
컨트롤을 건드리면 오른쪽 미리보기는 바로 바뀌지만, 실제로 반영되려면 그 묶음의 저장 버튼을 눌러야 합니다. 특히 노출 · 문의 설정 카드 안에는 저장 버튼이 세 개(런처 · 노출 / 노출 시간 / 다른 문의 방법) 있으니, 바꾼 묶음의 저장 버튼을 눌러야 합니다.
예외는 이미지입니다. 로고·커버·버튼 아이콘·봇 프로필·상담원 프로필은 파일을 고르거나 삭제하는 즉시 반영되고 저장 버튼과 무관합니다.
1. 노출 · 문의 설정
런처 노출·노출 시간·다른 문의 방법을 한 곳에서 관리해요
런처(웹사이트 우측 하단 채팅 버튼)를 어디에 · 언제 · 어떤 페이지에서 띄울지, 그리고 다른 채널로 가는 문의 버튼을 보여줄지를 정합니다. 카드 하나 안에 런처 · 노출, 노출 시간, 다른 문의 방법 세 묶음이 구분선으로 나뉘어 들어 있습니다.
런처 · 노출
위젯 메인 화면에 전화 걸기 버튼 노출
고객이 위젯 메인 화면에서 바로 전화를 걸 수 있게 합니다.
- 워크스페이스에서 음성(전화) 기능을 쓰고 있을 때
- 소유자(Owner) 또는 관리자(Admin) 권한으로 로그인했을 때
음성을 쓰지 않는 워크스페이스에는 항목이 아예 없고, 음성을 쓰더라도 상담원·뷰어 권한으로 접속하면 이 줄만 보이지 않습니다. 다른 항목은 그대로 보이기 때문에 음성이 꺼져 있다고 오해하기 쉽습니다.
위젯 숨김 페이지
특정 페이지 경로에서 위젯이 뜨지 않게 합니다.
- 최대 50개까지 등록
- 경로 패턴 입력 (예:
/checkout,/admin/*) - 와일드카드
*로 하위 경로를 한 번에 지정 - + 추가 로 줄을 늘리고, 줄 오른쪽 × 로 지웁니다
- 데스크톱·모바일 공통으로 적용됩니다(아래 디바이스 탭의 영향을 받지 않습니다)
Desktop / 모바일 웹 탭
아래 네 항목은 디바이스별로 따로 저장됩니다. 탭을 바꾸면 오른쪽 미리보기의 디바이스도 함께 바뀝니다.
- 버튼 숨기기 — 그 디바이스에서만 런처를 통째로 숨깁니다
- 위치 — 왼쪽 / 오른쪽
- 위치 조정 가로 · 세로 — 화면 가장자리로부터의 여백을 0~200px 슬라이더로 조정
- 런처 크기 — 아래 항목 참고
런처 크기
런처 버튼의 표시 크기입니다. 기본 / 작게 / 보통 / 크게 중에 고르거나, 옆 입력란에 30~200px 사이 값을 직접 넣을 수 있습니다.
- Desktop 탭의 '기본' 은 위젯 기본값 73px 를 씁니다.
- 모바일 웹 탭의 '기본' 은 PC와 같은 크기를 씁니다. 즉 모바일 탭의 값은 모바일에서만 적용되는 덮어쓰기이고, 비워 두면 데스크톱 크기를 그대로 따라갑니다.
노출 시간
위젯을 항상 띄울지, 상담 시간에만 띄울지 정합니다. 세 가지 중 하나를 고릅니다.
- 항상 노출 — 시간과 무관하게 언제나 노출합니다(기본값).
- 상담시간 따라가기 — 워크스페이스의 상담 시간 설정을 그대로 따릅니다. 요일표를 여기서 다시 만들 필요가 없습니다.
- 직접 설정 — 이 위젯만의 요일표와 휴일을 여기서 직접 만듭니다.
'항상 노출'이 아닐 때 함께 나오는 항목:
- 노출시간 밖 진행 중 대화 종료 — 노출 시간이 끝나면 진행 중이던 대화도 종료합니다(기본은 꺼짐 = 그대로 둠).
'직접 설정'에서만 나오는 항목:
- 자정 넘김 허용 —
22:00~02:00처럼 자정을 넘는 시간대를 허용합니다(기본은 켜짐). 끄면 종료 시각이 시작 시각보다 빠른 구간은 오류로 처리돼 저장되지 않습니다. - 요일별 시간표 — 월
일 각 요일을 켜고 끄며, 요일마다 시간대를 최대 6개까지 넣습니다. 24시간 체크박스를 켜면 그 요일은 00:0024:00 로 고정됩니다. 시간은 10분 단위로 고릅니다. - 휴일 설정 — 특정 날짜를 휴일로 지정합니다. 공휴일 포함 체크박스로 법정 공휴일을 한 번에 넣고, 개별 날짜만 빼거나 그날의 운영시간을 바꿀 수 있습니다.
상담 시간 설정 페이지는 값을 바꾸는 즉시 저장되지만, 이 카드의 요일표·휴일은 저장 버튼을 눌러야 반영됩니다.
다른 문의 방법
위젯 안에 다른 채널로 연결되는 버튼을 함께 보여줍니다.
- 다른 방법으로 문의 노출 을 켜면 아래에 채널 목록이 나타납니다.
- 노출할 채널을 체크하고, 드래그해서 순서를 바꿉니다. 이 순서가 위젯에 보이는 버튼 순서입니다.
- 대상은 카카오톡 · 네이버 톡톡 · 인스타그램 · 라인 · WhatsApp 연동입니다.
- 채널에 외부 진입 ID 가 없으면 체크할 수 없고
⚠ 외부 진입 ID 필요가 표시됩니다. 옆의 설정 을 눌러 해당 연동에서 먼저 입력하세요. - 연동할 채널이 하나도 없으면 목록 대신 안내 문구만 나옵니다.
2. 테마 · 브랜딩
테마 색상·런처 외형·봇 프로필을 한 번에 설정해요
위젯 전체에 걸리는 색과 사람(봇·상담원) 표시를 정합니다. 이 카드의 설정은 데스크톱·모바일 공통입니다.
테마 색상
말풍선·채팅 시작 버튼 등 주요 요소에 쓰이는 메인 색상입니다. 오른쪽의 색상 칩(색 사각형 + HEX 코드가 붙은 버튼)을 누르면 팔레트가 열립니다.
- 프리셋 12색 중 선택
- 색상 피커로 직접 선택
- HEX 코드(
#RRGGBB) 직접 입력 - 기본값은
#4589FF이며, 기본값으로 설정 으로 되돌릴 수 있습니다
테마
채팅창의 화면 모드입니다.
- 라이트 / 다크 / 시스템
- 시스템 을 고르면 방문자의 OS·브라우저 설정에 맞춰 자동으로 바뀝니다
버튼 아이콘
웹사이트 우측 하단 런처 버튼의 이미지를 직접 올린 파일로 바꿉니다.
- 지원 형식: PNG, JPG, WebP
- 권장 크기: 64×64px
- 최대 용량: 5MB
- 기본 아이콘으로 되돌리려면 올린 이미지를 삭제 합니다
봇 프로필 이미지 · 상담원 프로필 이미지
자동 응답을 보내는 봇과, 사람 상담원 메시지에 붙는 프로필 이미지입니다. 둘 다 PNG, JPG, WebP · 권장 128×128px · 최대 5MB 입니다.
- 상담원 프로필 이미지 는 바로 아래의 팀 멤버 프로필 이 꺼져 있을 때 상담원 메시지에 쓰입니다.
- 이미지를 올리지 않으면 테마 색상 배경에 기본 아이콘이 표시됩니다.
팀 멤버 프로필
상담에 참여한 팀 멤버의 이름·프로필을 채팅창에 노출할지 정합니다.
- 켜면 응답 메시지에 담당 멤버의 이름과 프로필 이미지가 함께 표시됩니다.
- 끄면 위에서 설정한 상담원 프로필 이미지가 대신 쓰입니다.
웹챗에서 AI 표시 숨기기
AI 봇 응답을 일반 상담원이 보낸 것처럼 보이게 합니다.
- 켜면 응답 메시지에서 AI 라벨이 노출되지 않습니다.
- 켰을 때만 아래에 봇 이름 입력란이 나타납니다(최대 50자). 비워 두면 웹챗에는 '상담원' 으로 표시됩니다 — 입력란에 흐리게 보이는 '상담봇'은 저장되는 값이 아니라 예시 문구입니다.
런처 버튼 테두리
런처 버튼 테두리의 두께·색상·스타일입니다.
- 두께: 0~10px 슬라이더
- 색상: 색상 칩을 눌러 프리셋 12색·색상 피커·HEX 코드 직접 입력
- 스타일: 기본 / 실선 / 점선 / 도트
- 두께가 0px 이거나 스타일이 기본 이면 위젯 기본 디자인이 적용됩니다
3. 홈
위젯 홈 화면에 표시되는 정보를 꾸며요
위젯을 열었을 때 처음 보이는 홈 화면을 꾸밉니다.
로고
채팅창 상단·홈 화면에 표시되는 워크스페이스 로고입니다.
- 지원 형식: PNG, JPG, WebP · 권장 128×128px · 최대 5MB
- 워크스페이스 기본 로고를 쓰려면 올린 이미지를 제거 합니다
커버
홈 화면 상단에 배경처럼 깔리는 이미지입니다.
- 지원 형식: PNG, JPG, WebP · 권장 820×312px · 최대 5MB
- 커버를 올리면 아래 두 항목이 함께 나타납니다.
- 커버 위치 — 위 / 중간 / 아래 중에 고르거나 슬라이더로 0~100% 사이를 직접 맞춥니다
- 커버 투명도 — 0~100% 를 5% 단위로 조정합니다
홈 화면 테마
홈 화면 상단의 배경 형태입니다.
- 풀커버형 — 커버 이미지를 크게 깔고 그 위에 인사말을 올립니다(기본값)
- 상단 이미지형 — 커버를 얇은 띠로 두고 그 아래에 내용을 둡니다
- 단색 배경형 — 이미지 없이 단색으로 채웁니다. 고르면 아래에 배경 색상 이 나타나며, 글자색은 대비에 맞춰 자동으로 조정됩니다
채널명
채팅창 상단에 노출되는 워크스페이스(브랜드) 이름입니다. 비워 두면 워크스페이스 이름이 그대로 쓰입니다.
인사말 · 인사말 설명
홈 화면 첫 화면에 노출되는 환영 문구와 그 아래 부연 설명입니다.
- 인사말 — 예: "안녕하세요 👋 무엇을 도와드릴까요?" (최대 200자, 이모지 사용 가능 · 한 줄 입력)
- 인사말 설명 — 예: "질문을 남겨주시면 상담팀이 빠르게 도와드릴게요." (최대 200자, 한 줄 입력)
- 두 항목 모두 입력란 아래에서 글꼴을 따로 지정할 수 있습니다.
- 크기 — 기본 / 15px / 20px / 24px / 28px, 또는 직접 입력(10~48px)
- 굵기 — 기본 / Regular 400 / Medium 500 / Semibold 600 / Bold 700, 또는 직접 입력(100~900)
- 색상 — 색상 피커·HEX 코드 직접 입력
중복 문의 막기
같은 방문자가 이미 진행 중인 문의를 갖고 있으면 새 문의 생성을 막습니다. 중복 응대를 줄이고 한 스레드에서 이어 대화하도록 유도합니다.
4. 답변 속도
고객이 문의를 하기 전, 답변이 얼마나 걸릴지 알려주세요.
홈 화면에서 문의 버튼 아래에 보이는 응답 시간 안내 문구입니다. 다섯 가지 중 하나를 고릅니다.
| 선택 | 고객에게 보이는 문구 |
|---|---|
| 빠름 | 몇 분 이내 답변드려요 |
| 보통 | 2시간 이내 답변드려요 |
| 지연 | 문의량이 많아 답변이 지연되고 있어요 |
| 커스텀 | 직접 입력한 시간으로 안내합니다 |
| 표시 안 함 | 안내를 표시하지 않습니다 |
커스텀 을 고르면 숫자와 단위를 직접 넣습니다. 단위는 분(최대 59) 또는 시간(최대 72)이며, 범위를 벗어난 값은 자동으로 최대치까지만 들어갑니다.
5. 대화방
채팅창 테두리와 메시지 글자 크기를 설정해요
고객이 실제로 대화하는 채팅 화면의 글자와 색을 정합니다.
메시지 글자 크기
상담원 메시지와 고객 메시지의 글자 크기를 따로 정합니다.
- 작게(13px) / 보통(15px) / 크게(17px) 중에 고르거나
- 옆 입력란에 12~22px 사이 값을 직접 넣습니다
말풍선 색상
- 고객 말풍선 배경 — 비워 두면 테마 색상이 그대로 쓰입니다
- 고객 말풍선 글자 — 기본
#FFFFFF - 상담원 말풍선 배경 — 기본
#F3F6FB - 상담원 말풍선 글자 — 기본
#000000
채팅창 테두리
채팅창 바깥 테두리의 두께·색상·스타일입니다. 옵션은 런처 버튼 테두리와 같습니다.
6. 안내 말풍선
런처 옆 인사 말풍선을 설정해요
방문자가 위젯을 열기 전에, 런처 옆에 먼저 떠서 말을 거는 인사 말풍선입니다.
- 말풍선 문구 — 최대 100자. 입력란 아래에서 크기 · 굵기 · 색상 글꼴을 지정할 수 있습니다
- 말풍선 표시 지연 — 위젯이 로드된 뒤 말풍선이 뜨기까지의 시간(0~60000ms). 설치 코드에서
ZeroTalk.init({ greeting: { delay } })를 직접 넘겼다면 그 값이 이깁니다. 위젯을 여는 데 시간이 오래 걸린 방문자에게는, 이미 떠 있는 말풍선을 다시 숨겨 깜빡이게 만들지 않으려고 그 한 번만 지연을 건너뜁니다 - 온라인 상태 문구 — 지금 응대 가능할 때 붙는 문구 (예: "지금 응답할 수 있어요")
- 오프라인 상태 문구 — 응대가 어려울 때 붙는 문구.
{time}자리에 다음 응답 가능 시간이 들어갑니다 (예:{time} 이후에 답해드려요). 계산할 다음 시간이 없으면{time}부분은 문구에서 통째로 빠집니다 - 인사 말풍선 표시 — 말풍선을 띄울지 말지. 기본값은 꺼짐이라, 켜야 방문자에게 보입니다
- 버블 위치 — 말풍선을 위젯 상단 / 하단 중 어느 쪽에 붙일지. 모바일에서만 적용됩니다
- 인사 말풍선 테두리 — 두께·색상·스타일. 옵션은 런처 버튼 테두리와 같습니다
런처가 숨겨져 있으면(디바이스별 버튼 숨기기, 노출 시간 밖) 말풍선도 함께 숨겨집니다.
설치 스크립트에서 hideGreeting 을 넘기고 있다면 이 토글이 통째로 무시됩니다 — hideGreeting: true 면 항상 숨김, hideGreeting: false 면 대시보드에서 꺼 두어도 항상 표시됩니다. 반면 greeting 옵션(text 등)은 표시 여부와 무관하며, greeting.text 는 위 말풍선 문구 를 덮어쓰기만 합니다 — 위젯 커스터마이징(개발자) 참고.
개발자용 설정과의 관계
이 페이지의 설정은 대시보드에서 저장되어 모든 방문자에게 적용됩니다. 같은 항목을 설치 스크립트의 ZeroTalk.init() 옵션으로도 넘길 수 있고, 그때는 스크립트에 넘긴 값이 대시보드 설정을 덮어씁니다. 옵션 목록은 위젯 커스터마이징(개발자) 문서를 참고하세요.