채팅 버튼 설정 v2

웹채팅v2(통합채팅 버튼)을 설치하기 위한 소스를 확인하고, 수정할 수 있습니다.

[서비스설정] > [기본 설정] > [채팅 버튼 설정 v2]를 클릭하면 새 창이 열립니다. 이 화면에서 원하는 대로 채팅 버튼을 설정한 후, 오른쪽 상단의 [소스보기]에 있는 스크립트를 홈페이지에 삽입하고, [적용하기]를 해주면 1분 후 반영됩니다. 스크립트가 이미 삽입된 상태라면, 수시로 버튼 설정을 변경하고 적용만 해주시면 됩니다. 😎

홈페이지에 채널별 버튼을 노출할지 통합 버튼을 노출할지 선택해 주세요. ‘해피톡’ 탭에서 ‘통합채팅 버튼 노출’을 비활성화하면 채널별 버튼을, 활성화하면 통합 버튼을 노출할 수 있습니다.

카카오톡과 네이버톡톡 버튼은 채널 연동 후 설치 가능합니다.

1. 채널별 버튼

채널별 버튼: 카카오톡, 네이버톡톡, 웹채팅 등 우리 회사에서 운영하는 채팅 상담 채널마다 각각의 채팅 버튼을 노출합니다. 각 탭에서 채널별 채팅 버튼 노출 여부를 설정할 수 있어요. 통합채팅과 다르게, 채팅 버튼 클릭 시 바로 채팅창으로 연결됩니다.

각 채널별 버튼 노출 여부와 PC, 모바일을 구분하여 설정할 수 있습니다. 카카오톡 채널과 네이버톡톡은 적용할 채널 아이디를 선택해 주세요. 아래부터 웹채팅 - 카카오톡 채널 - 네이버톡톡 순서로 버튼 위치가 자동으로 설정돼요.

해피톡(웹채팅)은 기본 설정에서 테마 등 채팅창 화면 구성을 먼저 해주셔야 합니다. 테마 중 '기본형'과 '단순형'의 차이는 기본 설정 중 소제목과 제목 정렬, 채팅창 크기 유무 차이입니다. '단순형'에는 소제목과 제목 정렬이 없고, 채팅창 크기는 고정되어 있어요.
제목 외에는 채팅창 배경 색상, 글자 색상(제목, 소제목과 버튼 내 글자 색상 포함), 프로필 이미지 아이콘을 설정할 수 있습니다.

기본 설정에서 배경 색상을 변경하면, 버튼 디자인에서 버튼 타입을 '기본형'으로 사용 시 버튼 색상도 함께 변경됩니다.

배너형 테마는 채팅창 상단에 배너이미지를 넣어 디자인할 수 있어요. 이 테마로 적용하면 반드시 배너 이미지를 넣어야 합니다. 배너 이미지를 적용할 때에는 설정할 배너 높이까지 고려하여 만들어 주세요. 오버레이 배경을 사용하여 색상을 보정할 수 있어요. 오버레이 배경 투명도를 최대로 할 경우에는 적용한 이미지가 없어지겠죠.

사용자의 눈의 피로도를 줄이기 위한 다크모드 버전으로도 적용 가능합니다.

같은 고객식별번호로 인입된 고객의 경우, 이전 대화 기록을 직접 확인할 수 있는 기능 추가 여부를 설정할 수 있어요. 상담사 답변을 보지 못 한 상태에서 상담이 종료되더라도, 고객이 추후에라도 해당 상담 이력을 찾아서 확인할 수 있습니다.

웹채팅에서 고객식별번호는 브라우저 쿠키값으로 식별되며, 서로 다른 브라우저로 접속한 경우에는 같은 고객이더라도 고객식별번호가 변경됩니다.

부가기능설정(통합채팅 버튼 사용 시 ‘채팅 홈 옵션 설정’)으로 모바일에서 채팅 버튼 호출방식을 선택할 수 있습니다. ✅ 채팅 버튼 호출을 '현재창'으로 할 경우, 채팅 버튼 클릭 시 채팅창을 현재 창에서 노출하는 건데요. 안드로이드(Android) 스마트폰에는 사용자가 뒤로 가기를 할 수 있는 버튼이 있습니다.
예를 들어, 네이버 검색을 통해 회사 홈페이지에 들어온 고객이 웹채팅을 이용하다 뒤로 가기 버튼을 누르면 이전 페이지인 네이버 검색결과로 돌아가게 됩니다.\
✅ 채팅 버튼 호출을 ‘새창’으로 할 경우, 모바일 기기에서 채팅 버튼 클릭 시 채팅창을 새 창으로 노출시킵니다. 이때 고객이 뒤로 가기(back) 버튼을 클릭할 경우 채팅창만 닫히고 홈페이지에서 이탈하지 않습니다. 대신 채팅창을 새 창에서 노출하여 채팅창 오른쪽 상단에 X(종료) 버튼 왼쪽에 _(최소화) 버튼은 없는 점 참고 부탁드립니다.

버튼 디자인을 원하는 대로 수정할 수 있어요. 기본형은 총 4가지 종류의 기본 이미지를 제공합니다. 버튼 색상은 기본 설정의 배경 색상과 동일하게 자동 적용됩니다. 버튼 타입을 기본형으로 사용할 경우, 채팅창 활성화 시 하단에 최소화 버튼(X)으로 노출돼요.

커스텀형은 직접 제작한 버튼 디자인을 넣을 수 있어요. 업로드 이미지는 '정사각형'으로 제공됩니다.

버튼 타입을 비노출형으로 설정하면, 해피톡에서 설정하는 버튼 외에 고객사의 홈페이지 내에서 특정 버튼을 클릭하면 채팅창이 노출되도록 설정할 수 있습니다. 해당 부분은 개발자 지원이 필요하며, 버튼 클릭을 javascript로 실행하면 됩니다. (소스보기를 통해 스크립트는 반드시 삽입해 주셔야 합니다.)

· happytalk.open(); // 해피톡 웹채팅 호출 · happytalk.close(); // 해피톡 웹채팅 닫기 호출 · happytalk.linkToKakao(); // 카카오톡 호출 · happytalk.linkToNaver(); // 네이버톡톡 호출

2. 통합채팅 버튼

통합채팅 버튼: 하나의 채팅 버튼으로 다양한 채팅 채널을 연결합니다. ‘채팅 홈’을 활용해 헬프데스크(FAQ), 공지사항 등 다양한 기능을 추가할 수도 있고요😀 통합채팅 버튼을 활용하려면 '해피톡' 탭에서 ‘통합채팅 버튼 노출'을 활성화하셔야 합니다. 그 다음 원하는 노출 채널, 버튼 및 채팅창 디자인을 적용해 주세요.

통합채팅 버튼에서 노출 채널을 선택할 수 있습니다. 웹채팅 - 카카오톡 채널 - 네이버톡톡 순서대로 화면에 우선 적용돼요.

통합채팅 버튼으로 사용하면, 버튼 클릭 시 바로 채팅창으로 연결되지 않고 '채팅 홈' 화면이 먼저 나오게 됩니다. 이 '채팅 홈'에 채팅 상담 연결, 공지사항, 헬프데스크(FAQ) 등으로 구성할 수 있어요. 채팅 홈 설정(기본 설정), 버튼 디자인, 채팅창 크기 등은 1. 채널별 버튼을 참고해 주세요.

채팅 홈 테마를 '배너형'으로 설정하면 채팅 홈 상단에 배너 디자인을 적용할 수 있는데요. 이때 배너 디자인은 채팅 홈 설정에서 적용한 배경 색상에 맞추는 게 좋습니다. 😊

통합채팅 버튼으로 활성화 시 '채팅 홈 옵션 설정'이 추가되는데요. 근무시간, 상담가능 상담원, 상담 응답속도, 헬프데스크는 통합채팅 버튼에서만 사용할 수 있습니다.

근무시간을 '노출'로 설정 시 [서비스설정] > [기본 설정] > [기본 조건 설정] > 근무 시간 관리에 적용한 근무시간이 노출됩니다.
상담가능 상담원을 '노출'로 설정 시 현재 응대 가능한 상담사 수가 노출됩니다.
상담 응답속도를 설정하면, 응대 속도를 고객에게 안내할 수 있습니다.

공지사항을 '노출'로 설정할 경우, 헬프데스크 상단에 [서비스설정] > [상담 운영] > [공지사항 관리]에 가장 최근에 등록한 고객 공지사항이 노출됩니다. ✅ 채널별 버튼에서는 공지사항 노출 여부 설정이 따로 없고, 채팅창 왼쪽 상단에 종 모양 아이콘 클릭 시 공지사항을 확인할 수 있습니다. 공지사항(종 모양 아이콘)은 기본 설정의 제목 정렬이 왼쪽일 경우에는 오른쪽 상단으로 이동됩니다.

헬프데스크를 '노출'로 설정할 경우, [서비스설정] > [상담 운영] > [헬프데스크 설정] 에 등록한 문서가 업로드됩니다. 고객이 채팅 상담 전에 자주 묻는 질문(FAQ)를 먼저 찾을 수 있도록 셀프 CS 기능을 적용해 보세요. 고객에게 해당 문서에 대한 피드백(내용이 부족해요/도움이 됐어요)도 받을 수 있습니다. 🥰 채팅 홈 화면에는 5개까지 노출할 수 있고, 검색 시 해당 검색어가 포함된 문서가 나오게 됩니다. 자세한 설정 방법은 헬프데스크 설정을 참고해 주세요. 💙

통합채팅 버튼에서 이전 대화 기록을 '노출'로 설정할 경우, 채팅창 내 뿐만아니라 채팅 홈 화면에서 근무시간 안내 왼쪽에 아이콘이 노출되어 확인할 수 있습니다. 상담 평가 받기 기능을 사용하고, 상담 평가를 하지 않은 상담방이 있다면 고객이 나중에라도 평가를 할 수 있습니다. 고객 화면에서 상담 내역도 직접 삭제할 수 있어요.
채팅 버튼 호출 등 나머지 설정 방식은 1. 채널별 버튼을 참고해 주세요.

3. 미리보기 및 소스 삽입

실제 홈페이지에 소스를 삽입하기 전 참고하세요!

실제 홈페이지에 소스를 삽입하기 전, 오른쪽 상단의 '미리보기'를 클릭하고 URL을 입력해 우리 홈페이지에 버튼과 채팅 화면이 어떻게 보일지 확인하는 것을 추천합니다. 😎 ('https'만 미리보기가 가능합니다.)

https://design.happytalkio.com/

미리보기 외에 위 링크로 접속 시([채팅 버튼 설정 v2] 메뉴 주소에서 editor 부분을 삭제 후 접속) 적용한 채팅 버튼과 채팅 테스트를 할 수 있습니다. (오른쪽 상단에 적용하기 후 변경된 채팅 버튼이 적용됩니다.)

모든 항목을 원하는 대로 설정하고 미리보기도 마치셨다면 오른쪽 상단의 '적용하기'를 클릭해 변경 내용을 저장해 주세요.

‘적용하기’ 옆 '소스보기’를 클릭한 다음 채팅 버튼 소스를 복사해 주세요.

채팅창 내에 프로필명(상담사명)은 소스에 포함되어 있는 site_name(회사 이름) 입니다. 프로필명을 변경하고자 하면, 해피톡 고객센터에 요청해 주세요. 이미 소스를 홈페이지에 삽입한 상태라면, 직접 소스 내에서 수정해 주셔야 해요.

복사한 소스를 홈페이지 html 소스 중 </body> 위쪽에 넣어주세요. 약 1분 후, 실제 홈페이지에 접속해 채팅 버튼이 잘 들어갔는지 확인하면 끝! 😎 앞으로 채팅 버튼은 소스를 수정할 필요 없이 해피톡 채팅 버튼 설정 v2에서 바로 바꿀 수 있습니다.

4. 호스팅몰 고객사 버튼설정

카페24, 고도몰, 위사 가입 고객사 분들은 채팅 버튼 대행설치 신청이 가능합니다. 버튼 설치가 어렵다면 대행신청서를 작성해 주세요. 작업 완료까지 1~2일 정도 소요될 수 있습니다.

4-1. 카페24

카페24 가입 고객사 분들은 주문연동 설정을 할 때 자동으로 홈페이지에 채팅 버튼 스크립트가 삽입되어 직접 설정해보시기를 추천드립니다. 어렵지 않아요. 😀
먼저 [서비스설정] > [확장 서비스 관리] > [쇼핑몰 주문정보 연동]에서 주문연동을 설정해 주세요. 멀티 쇼핑몰별로 택배사와 각 채널을 연동하면, 적용 후 해당 채팅 버튼으로 고객 인입 시 [채팅] > [연동주문정보]에서 고객의 주문정보를 확인할 수 있습니다. 쇼핑몰별로 카카오톡 채널, 네이버톡톡 채널은 하나씩만 연동할 수 있습니다. 그다음 [버튼 설정 페이지로 이동]을 클릭하세요. 별도의 소스 삽입 작업 없이 바로 버튼 설치가 가능합니다. 나머지 버튼 설정은 1. 채널별 버튼과 2. 통합채팅 버튼을 참고해 주세요.

[쇼핑몰 주문정보 연동] 메뉴 접속이 안 되시나요?

카페24 가입 고객사분들은 카페24 앱스토어 > 해피톡(카카오 상담톡, 챗봇, 주문연동을 하나로) > 관리하기로 2주간 미접속 시 세션이 만료됩니다. 위 이미지의 경로로 관리하기를 통해 다시 접속해 주세요.

카페24 가입 고객사 분들은 [채팅 버튼 설정]과 [채팅 버튼 설정 v2] 메뉴가 없습니다. [채팅 버튼 설정 v2] 메뉴는 [확장 서비스 관리] > [쇼핑몰 주문정보 연동] > 버튼 설정 페이지로 이동으로 접속 가능해요. 카카오 상담톡 채팅 URL은 [쇼핑몰 주문정보 연동] 메뉴에서 '채팅 버튼 설정'을 클릭하고, 카카오톡 채널(플러스친구) 아이디 선택 후 'URL 복사하기' 해주시면 됩니다.

부득이하게 채팅 버튼 개별 설치가 필요한 경우, 카페24 쇼핑몰 관리자에서 로그인 후 [디자인관리] > [디자인 보관함]에서 디자인 편집 '수정'을 통해 접속해 주세요. PC와 모바일 모두 메인 레이아웃, 공통 레이아웃에서 </body> 내에 소스를 넣고 저장해 주세요. 앞서 안내드린 경로에서 스크립트 자동 삽입이 가능하오니 되도록 개별 설치는 권장하지 않습니다.
카페24 채팅버튼v2 관련하여 커스텀 파라미터 적용 하실 수 있습니다. [카페24에 해피톡 버튼이 삽입되어 있지 않거나 카페24에 해피톡 버튼이 해피톡 시스템을 통해서 삽입 되어 있는 경우] 1) 해피톡에서 버튼 설정 후 저장 버튼 클릭

2) 카페24에서 공통으로 사용할 수 있는 javascript 파일에 변수명이 happytalkCusParams인 변수 생성 및 커스텀 파라미터 입력

[카페24에 해피톡 버튼이 스크립트 형태로 삽입 되어 있는 경우] 1) 기존에 카페24 디자인에 삽입된 스크립트 제거 2) 해피톡에서 버튼 설정 후 저장 버튼 클릭

3) 카페24에서 공통으로 사용할 수 있는 javascript 파일에 변수명이 happytalkCusParams인 변수 생성 및 커스텀 파라미터 입력

주의 : 기존에 해피톡 시스템을 통해 버튼이 삽입된 고객사도 버튼 설정에 대하여 저장이 1회 진행 되어야 커스텀 파라미터를 적용할 수 있습니다!

버튼 설정 관련하여 추가 궁금한 점이 있으면, 언제든지 해피톡 고객센터로 문의 주세요. 😊

4-2. 고도몰

직접 채팅 버튼을 설치하고자 하는 고도몰 가입 고객사분들은, [서비스설정] > [기본 설정] > [채팅 버튼 설정 v2] 에서 원하는 버튼으로 설정한 후, '소스보기'를 통해 버튼 스크립트를 복사해 주세요.

고도몰5 기준으로 안내드려요. PC는 디자인 > 디자인 스킨 리스트 > 전체 레이아웃 > 하단 레이아웃에서 </body> 안에 삽입하고, 디자인 페이지 저장해 주세요. 모바일도 동일하게 모바일샵 > 디자인 스킨 리스트 > 하단 레이아웃에 넣어주면 됩니다.