현재 위치
  1. 게시판
  2. 유용한 웹 팁

유용한 웹 팁

쇼핑몰 운영에 도움이 되는 정보들입니다.

게시판 상세
제목 쇼핑몰에서 1:1 채팅창 (톡플러스 Tocplus) 사용하기
작성자 별모아디자인 (ip:)
  • 평점 0점  
  • 작성일 2019-01-16
  • 추천 추천하기
  • 조회수 436



< 1:1 채팅 서비스 무료신청 & 쇼핑몰 화면에 삽입하기 >



예제 이미지




현재 사용중인 사이트 구경하기  https://tocplus.co.kr/reference.do



톡플러스 1:1 채팅창을 쇼핑몰 화면에 노출시키고싶으시면

아래 순서대로 해주시기 바랍니다.



1. 무료 채팅 서비스 톡플러스 홈페이지 http://tocplus.co.kr 에 접속한다.



2. 회원가입 버튼을 클릭하여 가입을 하면 다음 페이지에서

'오픈마켓이나 쇼핑몰, 혹은 자체 제작 홈페이지' 항목의 '선택' 버튼을 클릭한다.



3. 쇼핑몰에 노출될 채팅창의 색상과 위치 등을 원하는대로 설정하고 '완료' 버튼을 클릭한다.



4. 태그 생성 결과 페이지에 생성된 고유의 태그가 보인다.

태그를 한 번 클릭하면 전체 선택이 된다.

그 상태에서 태그에 마우스를 대고 오른쪽 버튼을 눌러 복사를 누르면

태그가 복사가 된다.


(아래는 예시이니 아래 소스를 복사하지는 마세요.^^;

톡플러스에 회원가입하면 회원마다 고유의 태그를 받게되니 그 태그를 복사해주세요.

아래와 비슷한 형식의 태그입니다.

나중에 태그를 다시 확인하고싶으시면 https://tocplus.co.kr 에서 왼쪽 메뉴 중

'대화창 부착' 메뉴로 들어가시면 됩니다. )



<!-- Tocplus 15.1 -->
<script type="text/javascript">
tocplusTop=1150;
tocplusLeft=5;
tocplusMinimizedImage='http://kr07.tocplus007.com/img/minimized_ko.gif';
tocplusWidth=180;
tocplusHeight=220;
tocplusUserName='손님';
tocplusFrameColor='#e6e6e6';
tocplusFloatingWindow=true;
var tocplusHost = (("https:" == document.location.protocol) ? "https://" : "http://");
document.write(unescape("%"+"3Cscript src='" + tocplusHost + "kr07.tocplus007.com/chatLoader.do?userId=twolamps2' type='text/javascript'"+"%"+"3E"+"%"+"3C/script"+"%"+"3E"));
</script>
<!-- End of Tocplus -->




5. 태그를 복사한 상태에서


카페24 쇼핑몰 관리자에 페이지 https://eclogin.cafe24.com/Shop/ 에 접속하여


상단메뉴 중 '디자인관리'에 들어가서 '디자인 수정하기' 버튼을 클릭하면


스마트 디자인 편집창이 뜬다.



6. 쇼핑몰 메인화면에만 채팅창을 노출시키고싶을 경우 :


스마트 디자인 편집창 왼쪽의 '메인화면' 이라는 글자를 클릭하면

편집창 오른쪽에 메인화면의 html 소스가 나타난다.


소스 제일 상단에

<!--@layout(/layout/basic/main.html)-->

혹은 <!--@layout(/layout/basic/layout.html)-->

라는 소스가 보이는데 그 소스 바로 아래에


채팅창 태그를 붙여준다. 그리고 편집창 상단 왼쪽의 '저장' 버튼을 반드시 클릭해준다.

이렇게 해주면 쇼핑몰 메인화면에만 채팅창이 노출이 된다.



쇼핑몰의 모든 화면에 채팅창을 노출시키고싶을 경우 : 


메인화면에 태그를 붙이지말고 스마트디자인 편집창 왼쪽의 '공통 레이아웃' 이라는 글자를 클릭하여

오른쪽에 html 소스에서 상단쪽에 <body> 라는 태그가 있는데

<body> 바로 아래에 채팅창 태그를 붙여준 후 편집창 왼쪽 상단의 '저장'버튼을 클릭해준다.

이렇게 해주면 쇼핑몰의 모든 화면에 채팅창이 노출이 된다.

만약 스마트디자인 편집창 왼쪽에 '메인 레이아웃''공통 레이아웃' 둘 다 있을 경우는

둘 다 각각 <body> 태그 아래에 채팅창 소스를 넣어준다.

메인 레이아웃은 없고 '공통 레이아웃'만 있을 경우는 공통 레이아웃에만 소스를 넣어주면 된다.




7. 모바일 쇼핑몰에도 채팅창 삽입하기 :

PC쇼핑몰 뿐 아니라 모바일 쇼핑몰에도 대화창을 삽입하면

쇼핑몰 고객들이 스마트폰으로도 언제 어디서나 쉽게 상담요청을 할 수 있습니다.

관리자 페이지 상단 메뉴 중 '모바일 쇼핑몰'을 클릭한 후 '디자인 수정하기' 버튼을 클릭하여

스마트디자인 편집창이 뜨면 위의 6번 설명과 동일한 방법으로 해주면

모바일 쇼핑몰에서도 채팅창을 노출시킬 수 있다.




8. 쇼핑몰 화면에서 채팅창 위치를 원하는대로 수정하기 :


아래는 채팅창 예시 태그입니다.

아래 예시를 참고하여 고객님 고유의 채팅창 태그에서 수정해주시면 됩니다.


아래 소스에서 초록색 부분은 상단에서 1150px 아래에 위치시키도록하는 것이고

빨강색 부분은 왼쪽에서 5px 위치시킨다는 뜻입니다.


채팅창의 위치를 수정하고싶으시면 아래 소스의 숫자를 원하시는 숫자로 수정하여 주시면 됩니다.

예를들어 채팅창을 쇼핑몰 왼쪽이 아닌 오른쪽에서 5px의 위치에 넣고 싶으시면

 tocplusLeft=5; 를 tocplusRight=5; 로 수정해주시면 됩니다.



<!-- Tocplus 15.1 -->
<script type="text/javascript">
tocplusTop=1150;
tocplusLeft=5;
tocplusMinimizedImage='http://kr07.tocplus007.com/img/minimized_ko.gif';
tocplusWidth=180;
tocplusHeight=220;
tocplusUserName='손님';
tocplusFrameColor='#e6e6e6';
tocplusFloatingWindow=true;
var tocplusHost = (("https:" == document.location.protocol) ? "https://" : "http://");
document.write(unescape("%"+"3Cscript src='" + tocplusHost + "kr07.tocplus007.com/chatLoader.do?userId=twolamps2' type='text/javascript'"+"%"+"3E"+"%"+"3C/script"+"%"+"3E"));
</script>
<!-- End of Tocplus -->



--------------------------------------------------------------------------------------------



위의 설명대로 쇼핑몰 화면의 원하는 위치에

톡플러스 채팅창을 노출시키고 나면 반드시 아래 순서대로 해주세요.




< 쇼핑몰 운영자 톡플러스 메신저 설치 후 로그인 하기 >



쇼핑몰 운영자(상담원)는 반드시 PC와 모바일에 각각 톡플러스 메신저를 다운받아 설치해야하며

메신저에 로그인이 되어있어야 고객들과 상담이 가능하다.



1. PC용 톡플러스 메신저 다운로드 및 설치



PC용 톡플러스 메신저를 다운받아 컴퓨터에 설치해야한다.

MSN이나 네이트온 메신저처럼 시작 버튼 메뉴에서 바로 실행할 수 있는 프로그램이다.
방문객은 홈페이지에 있는 대화창에서, 상담원은 톡플러스 메신저에서 대화하도록 되어 있다.



https://tocplus.co.kr/help_messenger.do



위의 주소로 들어가서 PC용 톡플러스를 다운로드 버튼 클릭 후

실행 버튼을 클릭하여 컴퓨터에 설치한다.

톡플러스 로그인 화면이 뜨면 자동 로그인 되도록 체크한 후 로그인 한다.

(컴퓨터 왼쪽의 시작 버튼을 클릭하면 톡플러스가 설치된 것을 확인할 수 있다.

바탕화면에도 아이콘이 생성된다. 클릭하면 실행 가능하며 설정 변경도 가능하다. )



쇼핑몰 운영자가 톡플러스 메신저에 로그인 되어 있으면

쇼핑몰을 방문한 고객이 대화를 걸면 PC화면에 알림이 오고 대화가 가능하다.

컴퓨터를 켜고 윈도우가 시작되면 자동으로 로그인 되도록 기본 설정이 되어있으므로

매 번 로그인하지않아도 된다.

컴퓨터를 끄면 로그아웃되며 채팅창에는 상담원이 부재중이라는 메세지가 뜬다.

설정을 변경하고싶을 경우 메신저를 열어 환경설정 메뉴에서 변경 가능하다.





2. 모바일(안드로이드용) 톡플러스 메신저 다운로드 및 설치



안드로이드용은 구글 플레이에서 '톡플러스 실시간 상담' 앱을 클릭하여

스마트폰에 다운로드 및 설치 후 로그인한다.

스마트폰에서도 상담원이 반드시 메신저에 로그인 되어있어야

모바일에서도 고객들과 상담이 가능하다.

안드로이드용 메신저의 경우 무료회원은 하루 10건의 상담만 가능하며

유료회원(프리미엄 회원)일 경우 무제한으로 상담 가능하다.

안드로이드용을 사용하지않으면 상담원은 PC에서만 상담 가능하며

고객들은 모바일과 PC에서 대화 가능하다.



유료회원 (프리미엄 회원) 서비스 내용  및 요금안내 보기

https://tocplus.co.kr/premium.do





위의 설명들이 정확하지않을 수도 있으며

톡플러스  http://tocplus.co.kr  사이트에서 반드시 확인바랍니다.



톡플러스 자주하는 질문 FAQ 보러가기

https://tocplus.co.kr/faq.do







첨부파일
비밀번호 수정 및 삭제하려면 비밀번호를 입력하세요.
댓글 수정

비밀번호 :

/ byte

비밀번호 : 확인 취소

댓글 입력
댓글달기 이름 : 비밀번호 : 관리자답변보기

영문 대소문자/숫자/특수문자 중 2가지 이상 조합, 10자~16자

/ byte

왼쪽의 문자를 공백없이 입력하세요.(대소문자구분)

관리자에게만 댓글 작성 권한이 있습니다.