목차
채팅 버튼 설정 v2란 ?
웹채팅v2(통합채팅 버튼)을 설치하기 위한 소스를 확인하고, 수정할 수 있습니다.
경로
설정 > 기본 설정 > 채팅 버튼 설정 v2
1. 기본 설정
기본 설정에서는 채팅창 화면 구성과 상담 관련 정보를 설정할 수 있습니다.
좌측 메뉴에서 기본 설정을 선택하면 설정 화면이 표시됩니다.
1) 채팅 화면 종류
기본 화면
•
해피톡 채팅 화면이 기본으로 표시됩니다.
•
상담 정보와 FAQ 등이 함께 표시됩니다.
•
일반적인 상담 환경에 적합합니다.
•
상담 현황 정보와 부가 기능을 설정할 수 있습니다.
상담 현황 정보 설정
인사 / 안내 메시지
•
채팅창 상단에 표시되는 안내 메시지를 설정할 수 있습니다
상담 응답 상태 표시
•
상담 연결 상태를 표시할 수 있습니다.
근무시간 표시
•
상담 가능 시간을 표시할 수 있습니다.
근무시간은 다음 메뉴에서 설정한 시간이 표시됩니다.
근무시간 설정 경로
•
설정 → 기본 조건 설정 → 근무 시간 관리
대기 정보 표시
•
현재 상담 대기 정보를 표시할 수 있습니다.
대기 정보는 상담 현황에 따라 자동으로 표시됩니다
대기 정보 설정 경로
•
설정 → 고급 설정 > 자동 메시지 관리(상담 대기)
상담사 수 표시
•
상담 가능한 상담사 수를 표시할 수 있습니다.
상담 가능한 상담사 수가 없거나 근무시간이 아닌 경우 표시되지 않습니다.
부가 기능 설정
채팅 상담 시 사용할 기능을 설정할 수 있습니다.
채팅 시스템 언어 설정
•
채팅창에 표시되는 시스템 언어를 설정할 수 있습니다.
* 지원 언어 : 한국어, 영어, 일본어
파일 전송 설정
채팅 상담 중 전송 가능한 파일 형식을 설정할 수 있습니다.
* 설정 항목: 이미지 / 일반 파일(동영상,기타)
이전 대화 기록 표시
이전 상담 기록 표시 여부를 설정할 수 있습니다.
* 설정 항목 : 노출 / 비노출
이전 대화 메시지 설정
이전 상담 기록 표시 방식 설정
* 설정 항목: 시스템 안내문구, 마지막 메시지, 상담방 정보
(선택한 방식으로 이전 대화 목록이 표시됩니다.)
공지사항 및 헬프데스크 표시
•
채팅창 공지사항 노출 여부를 설정할 수 있습니다.
* 설정 항목: 노출, 비노출
•
헬프데스크에 등록된 항목을 설정할 수 있습니다.
* 설정 항목: 노출, 비노출
채널별 화면
•
우리 회사에서 운영하는 채팅 상담 채널마다 각각의 채팅 버튼이 노출됩니다.
•
채팅 버튼 클릭 시, 바로 채팅창으로 연결됩니다.
•
부가 기능에 관련된 설정을 할 수 있습니다.
노출 기기 설정
•
기기별로 채팅 화면 노출 여부를 설정할 수 있습니다.(PC,모바일)
2) 채널 노출 설정
채팅 버튼에서 노출할 채널을 설정할 수 있습니다.
해피톡 채널
•
해피톡 채널을 ON/OFF 할 수 있습니다.
(단, 한개 이상의 채널이 연동되어야 함)
외부 채널
•
외부 채널을 함께 노출할 수 있습니다.(카카오톡,네이버톡톡)
채널 연동이 완료되어야 노출됩니다.
버튼 추가 기능(커스텀 버튼)
•
외부 링크 버튼을 추가할 수 있습니다.
*필수 입력 값 : 아이콘, 버튼명, URL
2. 디자인 설정
디자인 설정에서는 채팅창과 채팅 버튼 디자인을 설정할 수 있습니다.
좌측 메뉴에서 디자인 설정을 선택합니다.
채팅창 디자인
•
채팅창 상단 영역 디자인을 설정할 수 있습니다.
채팅창 스타일
•
다음 스타일을 선택할 수 있습니다.
* 스타일 종류 : 기본형, 단순형, 배너형, 다크모드
타이틀 & 정렬 설정
1.
타이틀 :
채팅창 상단에 표시되는 제목을 설정할 수 있습니다.
* 설정 항목: 제목, 소제목
2.
정렬 : 텍스트 정렬을 설정할 수 있습니다.
*설정 항목 : 좌측, 가운데, 우측 정렬
색상 설정(기본,커스텀)
1.
기본 : 채팅창 색상을 설정할 수 있습니다.
* 설정 항목: 테마, 고객 말풍선, 고객 텍스트색상
2.
커스텀 : 세부 색상을 직접 설정할 수 있습니다.
*설정 항목 : 채팅창 배경, 상담사 말풍선, 상담사 텍스트, 고객 말풍선, 고객 텍스트
서체 크기 설정
•
채팅창 텍스트 크기를 설정할 수 있습니다.
* 설정 항목:작게, 중간, 크게
프로필 이미지 & 채팅창 크기 설정
•
채팅창 상단에 표시되는 프로필 이미지를 설정할 수 있습니다.
•
원하는 채팅창 크기로 설정할 수 있습니다.
3. 버튼 설정
홈페이지에 노출되는 채팅 버튼의 모양과 위치를 설정하는 메뉴입니다.
PC와 모바일 버튼을 각각 설정할 수 있습니다.
버튼 모양 설정
버튼 모양 선택
채팅 버튼의 모양을 선택할 수 있습니다.
* 설정 항목 : 기본형, 커스텀형, 비노출
기본형
•
기본 채팅 아이콘 버튼이 표시됩니다.
•
가장 일반적으로 사용하는 버튼 형태입니다.
커스텀형
•
원하는 버튼 이미지를 등록하여 사용할 수 있습니다.
브랜드 디자인에 맞는 버튼을 사용할 때 활용합니다.
(유료 플랜에서만 커스텀이 가능해요)
비노출
•
채팅 버튼이 홈페이지에 표시되지 않습니다.
단축 URL로는 채팅 이용이 가능합니다.
버튼 크기 설정
버튼 크기
채팅 버튼 크기를 설정할 수 있습니다.(버튼 크기가 클수록 고객 쉽게 인지 가능)
* 설정 범위: 최소 40px ~ 최대 100px
버튼 모서리 설정
모서리 둥글기
버튼 모서리 둥글기를 설정할 수 있습니다.
* 설정 범위: 0 ~ 100 ( 0 : 사각형 버튼 / 100 : 둥근 버튼)
버튼 위치 설정
버튼 정렬
채팅 버튼 위치를 설정할 수 있습니다.(홈페이지에 따라 버튼 위치 선택 가능)
* 설정 항목: 오른쪽 / 왼쪽 정렬
버튼 위치 조정
버튼 위치를 직접 조정할 수 있습니다.
*설정 항목 : 좌측 또는 우측 간격 / 하단 간격
(예: 오른쪽 20px / 아래 20px) → 일반적인 버튼 위치입니다.
버튼 설정 시 주의사항1.
미리보기와 실제 화면 차이
a.
해상도에 따라 미리보기 와 실제 노출 위치가 다를 수 있어요
2.
채팅창 위치 기준
a.
채팅창은 버튼위치를 기준으로 표시돼요
3.
기존 버튼 코드 중복 설치
a.
기존 채팅 버튼 코드가남아있으면 버튼이 중복 노출될 수 있어요
(기존 카드를 삭제시켜 주세요)
4.
버튼이 보이지 않는 경우
a.
버튼 모양이 비노출로 설정되어 있는지 확인해주세요
•
적용하기 버튼을 눌렀는지 확인해주세요
•
홈페이지에 스크립트가 설치되어 있는지 확인헤주세요
4. 버튼 설치
채팅 버튼을 홈페이지에 설치할 수 있습니다.
설치 방법
설치용 스크립트를 복사하여 홈페이지에 삽입합니다.
스크립트는 홈페이지 <body> 태그 안에 삽입해야 합니다.
기존 설치 사이트
이미 설치된 사이트는 적용하기 버튼만 눌러도 변경 사항이 반영됩니다.
스크립트를 다시 설치할 필요는 없습니다.
5. 적용하기
설정을 변경한 후에는 반드시 적용하기 버튼을 눌러야 합니다.
적용하기를 누르지 않으면 변경 사항이 사이트에 반영되지 않습니다.
호스팅몰 고객사 버튼 설정
카페24/고도몰/위사/후이즈몰 고객사는 홈페이지에 채팅 버튼을 설치할 수 있습니다.
1) 공통 준비사항 (모든 호스팅몰 공통)
버튼 스크립트 준비
•
해피톡 **채팅 버튼/채팅창 설정(Editor)**에서 버튼 디자인/위치를 설정한 뒤,
•
*버튼 설치(또는 소스보기)**에서 스크립트를 복사합니다.
설치 위치
•
대부분의 호스팅몰은 홈페이지 </body> 태그 바로 위에 스크립트를 삽입합니다.
•
PC / 모바일 레이아웃 모두 삽입이 필요한 경우가 많습니다.
적용 확인
•
설정 변경 후 적용하기를 누른 뒤, 실제 홈페이지에서 노출 여부를 확인하세요.
•
기존 스크립트가 남아 있으면 중복 노출될 수 있습니다. (기존 코드 삭제 후 설치)
2) 카페24
카페24는 설치 방식이 2가지입니다.
(권장) 주문정보 연동 → 자동 삽입 / (예외) 수동 삽입
2-1. (권장) 주문정보 연동으로 자동 설치
주문정보 연동 설정
주문정보 연동 설정
•
서비스설정 → 확장 서비스 관리 → 쇼핑몰 주문정보 연동
주문 연동을 설정하면, 홈페이지에 채팅 버튼 스크립트가 자동 삽입됩니다. (소스 삽입 없이 설치 가능)
버튼 설정 진입
주문정보 연동 화면에서 **[버튼 설정 페이지로 이동]**을 클릭합니다.
•
이 경로로 진입하면, 카페24 고객사는 별도의 “채팅 버튼 설정(v2)” 메뉴가 없어도 설정이 가능합니다.
2-2. 주문정보 연동 메뉴 접속이 안 되는 경우
카페24 앱스토어에서 해피톡 관리하기로 재접속해야 합니다.
•
카페24 앱스토어 → 해피톡(카카오 상담톡, 챗봇, 주문연동…) → 관리하기 버튼 클릭
* 2주간 미접속 시 세션 만료될 수 있습니다.
2-3. 카카오 상담톡 URL 복사 (필요 시)
카페24에서는 카카오 상담톡 URL을 아래 경로에서 복사합니다.
•
쇼핑몰 주문정보 연동 → 채팅 버튼 설정 클릭 → 카카오톡 채널(플러스친구) 선택 → URL 복사하기
2-4. (예외) 수동 설치가 필요한 경우
“자동 삽입”이 안되거나, 고객사가 직접 삽입해야 하는 상황에만 진행합니다.
디자인 편집 진입
•
카페24 쇼핑몰 관리자 로그인
•
디자인관리 → 디자인 보관함 → 디자인 편집 ‘수정’
삽입 위치
•
PC/모바일 모두
◦
메인 레이아웃 / 공통 레이아웃 내 </body> 위에 삽입 후 저장
가능한 경우 자동 삽입 방식(주문정보 연동)을 우선 권장합니다.
2-5. 커스텀 파라미터 적용(필요한 고객사만)
카페24에서 커스텀 파라미터를 쓰려면 아래 조건을 확인합니다.
케이스 A) 카페24에 해피톡 버튼이 아직 없거나, 해피톡 시스템 통해 삽입되는 경우
1.
해피톡 디자인 설정 화면에서 버튼 설정 후 저장/적용(1회는 필수)
2.
카페24에서 공통 JS에 happytalkCusParams 변수를 생성하고 커스텀 파라미터를 입력
케이스 B) 카페24 디자인에 스크립트가 직접 삽입되어 있는 경우
1.
카페24 디자인에 삽입된 기존 스크립트 제거
2.
해피톡 디자인 설정 화면에서 버튼 설정 후 저장/적용(1회는 필수)
3.
공통 JS에 happytalkCusParams 변수 생성 및 입력
주의•
“기존에 시스템으로 버튼이 삽입된 고객사”도 버튼 설정 저장/적용을 1회 해야 커스텀 파라미터 적용이 가능합니다.
3. 고도몰
3-1. 버튼 설정/스크립트 복사
•
해피톡 Editor에서 버튼 설정 후
•
*버튼 설치(소스보기)**에서 스크립트 복사
3-2. 삽입 위치
PC
•
디자인 → 디자인 스킨 리스트 → 전체 레이아웃 → 하단 레이아웃
•
</body> 위 삽입 후 저장
모바일
•
모바일샵 → 디자인 스킨 리스트 → 하단 레이아웃
•
</body> 위 삽입 후 저장
•
직접 채팅 버튼을 설치하고자 하는 고도몰 가입 고객사분들은, [서비스설정] > [기본 설정] > [채팅 버튼 설정 v2] 에서 원하는 버튼으로 설정한 후, '소스보기'를 통해 버튼 스크립트를 복사해 주세요.
8-31-1. 고도몰 디자인 페이지 수정
고도몰 채팅 버튼 소스 삽입 예시
4) 위사
4-1. 버튼 설정/스크립트 복사
•
해피톡 Editor에서 버튼 설정 후
•
*버튼 설치(소스보기)**에서 스크립트 복사
4-2. 삽입 위치
•
위사 관리자 → 디자인 → HTML 편집 → 하단 공통 페이지
•
스크립트 삽입 후 저장
•
PC/모바일 동일 경로로 적용(운영 환경에 따라 모바일도 별도 적용 필요)
위사 채팅 버튼 소스 삽입 예시
5) 후이즈몰
5-1. 버튼 설정/스크립트 복사
•
해피톡 Editor에서 버튼 설정 후
•
*버튼 설치(소스보기)**에서 스크립트 복사
5-2. 삽입 위치
•
후이즈몰 관리자 → 부가서비스 → 카카오 서비스 연동 → 상담톡 버튼 설정
•
사용여부: 사용
•
채팅버튼소스: 스크립트 붙여넣기 → 확인후이즈몰 채팅 버튼 소스 삽입 예시
