채팅 버튼 설정 v2
웹채팅v2(통합채팅 버튼)을 설치하기 위한 소스를 확인하고, 수정할 수 있습니다.
Last updated
웹채팅v2(통합채팅 버튼)을 설치하기 위한 소스를 확인하고, 수정할 수 있습니다.
Last updated
[서비스설정] > [기본 설정] > [채팅 버튼 설정 v2]를 클릭하면 새 창이 열립니다. 이 화면에서 원하는 대로 채팅 버튼을 설정한 후, 오른쪽 상단의 [소스보기]에 있는 스크립트를 홈페이지에 삽입하고, [적용하기]를 해주면 1분 후 반영됩니다. 스크립트가 이미 삽입된 상태라면, 수시로 버튼 설정을 변경하고 적용만 해주시면 됩니다. 😎
홈페이지에 채널별 버튼을 노출할지 통합 버튼을 노출할지 선택해 주세요. ‘해피톡’ 탭에서 ‘통합채팅 버튼 노출’을 비활성화하면 채널별 버튼을, 활성화하면 통합 버튼을 노출할 수 있습니다.
채널별 버튼: 카카오톡, 네이버톡톡, 웹채팅 등 우리 회사에서 운영하는 채팅 상담 채널마다 각각의 채팅 버튼을 노출합니다. 각 탭에서 채널별 채팅 버튼 노출 여부를 설정할 수 있어요. 통합채팅과 다르게, 채팅 버튼 클릭 시 바로 채팅창으로 연결됩니다.
각 채널별 버튼 노출 여부와 PC, 모바일을 구분하여 설정할 수 있습니다. 카카오톡 채널과 네이버톡톡은 적용할 채널 아이디를 선택해 주세요. 아래부터 웹채팅 - 카카오톡 채널 - 네이버톡톡 순서로 버튼 위치가 자동으로 설정돼요.
해피톡(웹채팅)은 기본 설정에서 테마 등 채팅창 화면 구성을 먼저 해주셔야 합니다. 테마 중 '기본형'과 '단순형'의 차이는 기본 설정 중 소제목과 제목 정렬, 채팅창 크기 유무 차이입니다. '단순형'에는 소제목과 제목 정렬이 없고, 채팅창 크기는 고정되어 있어요.
제목 외에는 채팅창 배경 색상, 글자 색상(제목, 소제목과 버튼 내 글자 색상 포함), 프로필 이미지 아이콘을 설정할 수 있습니다.
기본 설정에서 배경 색상을 변경하면, 버튼 디자인에서 버튼 타입을 '기본형'으로 사용 시 버튼 색상도 함께 변경됩니다.
배너형 테마는 채팅창 상단에 배너이미지를 넣어 디자인할 수 있어요. 이 테마로 적용하면 반드시 배너 이미지를 넣어야 합니다. 배너 이미지를 적용할 때에는 설정할 배너 높이까지 고려하여 만들어 주세요. 오버레이 배경을 사용하여 색상을 보정할 수 있어요. 오버레이 배경 투명도를 최대로 할 경우에는 적용한 이미지가 없어지겠죠.
사용자의 눈의 피로도를 줄이기 위한 다크모드 버전으로도 적용 가능합니다.
같은 고객식별번호로 인입된 고객의 경우, 이전 대화 기록을 직접 확인할 수 있는 기능 추가 여부를 설정할 수 있어요. 상담사 답변을 보지 못 한 상태에서 상담이 종료되더라도, 고객이 추후에라도 해당 상담 이력을 찾아서 확인할 수 있습니다.
웹채팅에서 고객식별번호는 브라우저 쿠키값으로 식별되며, 서로 다른 브라우저로 접속한 경우에는 같은 고객이더라도 고객식별번호가 변경됩니다.
부가기능설정(통합채팅 버튼 사용 시 ‘채팅 홈 옵션 설정’)으로 모바일에서 채팅 버튼 호출방식을 선택할 수 있습니다. ✅ 채팅 버튼 호출을 '현재창'으로 할 경우, 채팅 버튼 클릭 시 채팅창을 현재 창에서 노출하는 건데요. 안드로이드(Android) 스마트폰에는 사용자가 뒤로 가기를 할 수 있는 버튼이 있습니다.
예를 들어, 네이버 검색을 통해 회사 홈페이지에 들어온 고객이 웹채팅을 이용하다 뒤로 가기 버튼을 누르면 이전 페이지인 네이버 검색결과로 돌아가게 됩니다.\
✅ 채팅 버튼 호출을 ‘새창’으로 할 경우, 모바일 기기에서 채팅 버튼 클릭 시 채팅창을 새 창으로 노출시킵니다. 이때 고객이 뒤로 가기(back) 버튼을 클릭할 경우 채팅창만 닫히고 홈페이지에서 이탈하지 않습니다. 대신 채팅창을 새 창에서 노출하여 채팅창 오른쪽 상단에 X(종료) 버튼 왼쪽에 _(최소화) 버튼은 없는 점 참고 부탁드립니다.
버튼 디자인을 원하는 대로 수정할 수 있어요. 기본형은 총 4가지 종류의 기본 이미지를 제공합니다. 버튼 색상은 기본 설정의 배경 색상과 동일하게 자동 적용됩니다. 버튼 타입을 기본형으로 사용할 경우, 채팅창 활성화 시 하단에 최소화 버튼(X)으로 노출돼요.
커스텀형은 직접 제작한 버튼 디자인을 넣을 수 있어요. 업로드 이미지는 '정사각형'으로 제공됩니다.
버튼 타입을 비노출형으로 설정하면, 해피톡에서 설정하는 버튼 외에 고객사의 홈페이지 내에서 특정 버튼을 클릭하면 채팅창이 노출되도록 설정할 수 있습니다. 해당 부분은 개발자 지원이 필요하며, 버튼 클릭을 javascript로 실행하면 됩니다. (소스보기를 통해 스크립트는 반드시 삽입해 주셔야 합니다.)
· happytalk.open(); // 해피톡 웹채팅 호출 · happytalk.close(); // 해피톡 웹채팅 닫기 호출 · happytalk.linkToKakao(); // 카카오톡 호출 · happytalk.linkToNaver(); // 네이버톡톡 호출
통합채팅 버튼: 하나의 채팅 버튼으로 다양한 채팅 채널을 연결합니다. ‘채팅 홈’을 활용해 헬프데스크(FAQ), 공지사항 등 다양한 기능을 추가할 수도 있고요😀 통합채팅 버튼을 활용하려면 '해피톡' 탭에서 ‘통합채팅 버튼 노출'을 활성화하셔야 합니다. 그 다음 원하는 노출 채널, 버튼 및 채팅창 디자인을 적용해 주세요.
통합채팅 버튼에서 노출 채널을 선택할 수 있습니다. 웹채팅 - 카카오톡 채널 - 네이버톡톡 순서대로 화면에 우선 적용돼요.
통합채팅 버튼으로 활성화 시 '채팅 홈 옵션 설정'이 추가되는데요. 근무시간, 상담가능 상담원, 상담 응답속도, 헬프데스크는 통합채팅 버튼에서만 사용할 수 있습니다.
상담가능 상담원을 '노출'로 설정 시 현재 응대 가능한 상담사 수가 노출됩니다.
상담 응답속도를 설정하면, 응대 속도를 고객에게 안내할 수 있습니다.
통합채팅 버튼에서 이전 대화 기록을 '노출'로 설정할 경우, 채팅창 내 뿐만아니라 채팅 홈 화면에서 근무시간 안내 왼쪽에 아이콘이 노출되어 확인할 수 있습니다. 상담 평가 받기 기능을 사용하고, 상담 평가를 하지 않은 상담방이 있다면 고객이 나중에라도 평가를 할 수 있습니다. 고객 화면에서 상담 내역도 직접 삭제할 수 있어요.
모든 항목을 원하는 대로 설정하고 미리보기도 마치셨다면 오른쪽 상단의 '적용하기'를 클릭해 변경 내용을 저장해 주세요.
‘적용하기’ 옆 '소스보기’를 클릭한 다음 채팅 버튼 소스를 복사해 주세요.
복사한 소스를 홈페이지 html 소스 중 </body> 위쪽에 넣어주세요. 약 1분 후, 실제 홈페이지에 접속해 채팅 버튼이 잘 들어갔는지 확인하면 끝! 😎 앞으로 채팅 버튼은 소스를 수정할 필요 없이 해피톡 채팅 버튼 설정 v2에서 바로 바꿀 수 있습니다.
카페24 가입 고객사 분들은 주문연동 설정을 할 때 자동으로 홈페이지에 채팅 버튼 스크립트가 삽입되어 직접 설정해보시기를 추천드립니다. 어렵지 않아요. 😀
[쇼핑몰 주문정보 연동] 메뉴 접속이 안 되시나요?
카페24 가입 고객사 분들은 [채팅 버튼 설정]과 [채팅 버튼 설정 v2] 메뉴가 없습니다. [채팅 버튼 설정 v2] 메뉴는 [확장 서비스 관리] > [쇼핑몰 주문정보 연동] > 버튼 설정 페이지로 이동으로 접속 가능해요. 카카오 상담톡 채팅 URL은 [쇼핑몰 주문정보 연동] 메뉴에서 '채팅 버튼 설정'을 클릭하고, 카카오톡 채널(플러스친구) 아이디 선택 후 'URL 복사하기' 해주시면 됩니다.
카페24 채팅버튼v2 관련하여 커스텀 파라미터 적용 하실 수 있습니다. [카페24에 해피톡 버튼이 삽입되어 있지 않거나 카페24에 해피톡 버튼이 해피톡 시스템을 통해서 삽입 되어 있는 경우] 1) 해피톡에서 버튼 설정 후 저장 버튼 클릭
2) 카페24에서 공통으로 사용할 수 있는 javascript 파일에 변수명이 happytalkCusParams인 변수 생성 및 커스텀 파라미터 입력
[카페24에 해피톡 버튼이 스크립트 형태로 삽입 되어 있는 경우] 1) 기존에 카페24 디자인에 삽입된 스크립트 제거 2) 해피톡에서 버튼 설정 후 저장 버튼 클릭
3) 카페24에서 공통으로 사용할 수 있는 javascript 파일에 변수명이 happytalkCusParams인 변수 생성 및 커스텀 파라미터 입력
주의 : 기존에 해피톡 시스템을 통해 버튼이 삽입된 고객사도 버튼 설정에 대하여 저장이 1회 진행 되어야 커스텀 파라미터를 적용할 수 있습니다!
고도몰5 기준으로 안내드려요. PC는 디자인 > 디자인 스킨 리스트 > 전체 레이아웃 > 하단 레이아웃에서 </body> 안에 삽입하고, 디자인 페이지 저장해 주세요. 모바일도 동일하게 모바일샵 > 디자인 스킨 리스트 > 하단 레이아웃에 넣어주면 됩니다.
위사 쇼핑몰 관리자 접속 후, 디자인 > HTML 편집 > 하단공통페이지 편집에서 복사한 스크립트를 넣고 저장해 주세요. 동일한 경로로 모바일에도 설치해주면 됩니다.
후이즈몰 부가서비스 > 카카오 서비스 연동 > 상담톡 버튼 설정에서 사용여부를 '사용'으로 체크하고, 복사한 스크립트를 '채팅버튼소스'에 붙여넣은 후 확인을 눌러주면 됩니다.
카카오톡과 네이버톡톡 버튼은 후 설치 가능합니다.
통합채팅 버튼으로 사용하면, 버튼 클릭 시 바로 채팅창으로 연결되지 않고 '채팅 홈' 화면이 먼저 나오게 됩니다. 이 '채팅 홈'에 채팅 상담 연결, 공지사항, 헬프데스크(FAQ) 등으로 구성할 수 있어요. 채팅 홈 설정(기본 설정), 버튼 디자인, 채팅창 크기 등은 을 참고해 주세요.
근무시간을 '노출'로 설정 시 에 적용한 근무시간이 노출됩니다.
공지사항을 '노출'로 설정할 경우, 헬프데스크 상단에 에 가장 최근에 등록한 고객 공지사항이 노출됩니다. ✅ 채널별 버튼에서는 공지사항 노출 여부 설정이 따로 없고, 채팅창 왼쪽 상단에 종 모양 아이콘 클릭 시 공지사항을 확인할 수 있습니다. 공지사항(종 모양 아이콘)은 기본 설정의 제목 정렬이 왼쪽일 경우에는 오른쪽 상단으로 이동됩니다.
헬프데스크를 '노출'로 설정할 경우, 에 등록한 문서가 업로드됩니다. 고객이 채팅 상담 전에 자주 묻는 질문(FAQ)를 먼저 찾을 수 있도록 셀프 CS 기능을 적용해 보세요. 고객에게 해당 문서에 대한 피드백(내용이 부족해요/도움이 됐어요)도 받을 수 있습니다. 🥰 채팅 홈 화면에는 5개까지 노출할 수 있고, 검색 시 해당 검색어가 포함된 문서가 나오게 됩니다. 자세한 설정 방법은 을 참고해 주세요. 💙
채팅 버튼 호출 등 나머지 설정 방식은 을 참고해 주세요.
카페24, 고도몰, 위사 가입 고객사 분들은 채팅 버튼 대행설치 신청이 가능합니다. 버튼 설치가 어렵다면 를 작성해 주세요. 작업 완료까지 1~2일 정도 소요될 수 있습니다.
먼저 에서 주문연동을 설정해 주세요. 멀티 쇼핑몰별로 택배사와 각 채널을 연동하면, 적용 후 해당 채팅 버튼으로 고객 인입 시 [채팅] > [연동주문정보]에서 고객의 주문정보를 확인할 수 있습니다. 쇼핑몰별로 카카오톡 채널, 네이버톡톡 채널은 하나씩만 연동할 수 있습니다. 그다음 [버튼 설정 페이지로 이동]을 클릭하세요. 별도의 소스 삽입 작업 없이 바로 버튼 설치가 가능합니다. 나머지 버튼 설정은 과 을 참고해 주세요.
카페24 가입 고객사분들은 앱스토어 > 해피톡(카카오 상담톡, 챗봇, 주문연동을 하나로) > 관리하기로 2주간 미접속 시 세션이 만료됩니다. 위 이미지의 경로로 관리하기를 통해 다시 접속해 주세요.
부득이하게 채팅 버튼 개별 설치가 필요한 경우, 에서 로그인 후 [디자인관리] > [디자인 보관함]에서 디자인 편집 '수정'을 통해 접속해 주세요. PC와 모바일 모두 메인 레이아웃, 공통 레이아웃에서 </body> 내에 소스를 넣고 저장해 주세요. 앞서 안내드린 경로에서 스크립트 자동 삽입이 가능하오니 되도록 개별 설치는 권장하지 않습니다.
버튼 설정 관련하여 추가 궁금한 점이 있으면, 언제든지 로 문의 주세요. 😊
직접 채팅 버튼을 설치하고자 하는 고도몰 가입 고객사분들은, 에서 원하는 버튼으로 설정한 후, '소스보기'를 통해 버튼 스크립트를 복사해 주세요.
직접 채팅 버튼을 설치하고자 하는 위사 가입 고객사분들은, 에서 원하는 버튼으로 설정한 후, '소스보기'를 통해 버튼 스크립트를 복사해 주세요.
직접 채팅 버튼을 설치하고자 하는 후이즈몰 가입 고객사분들은, 에서 원하는 버튼으로 설정한 후, '소스보기'를 통해 버튼 스크립트를 복사해 주세요.
