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