구글 블로그 Tawk.to 온라인 채팅 위젯 설치 방법

Tawk.to는 방문자와 웹 사이트 내에서 실시간으로 소통할 수 있는 100% 무료 온라인 라이브 채팅 서비스입니다.

웹 사이트 방문자를 실시간으로 모니터링할 수 있고, 방문자와 라이브 채팅하고 실시간으로 응답할 수 있는 고객 지원 센터를 만들 수 있습니다.

물론 이 블로그에도 Tawk.to를 사용하고 있습니다. 좌측 하단에서 블로그 관리자와 라이브 채팅을 할 수 있습니다. (모바일 사용자에게는 보이지 않도록 설정되었습니다.) 이 포스팅에서는 구글 블로그에 온라인 라이브 채팅 위젯, Tawk.to를 설치 방법에 대해 살펴보겠습니다.

(2021년 8월 12일 Tawk.to 비활성화)

구글 블로그 Tawk.to 위젯 설치 방법

Tawk.to에서 제공하는 API을 활용하면 구글 블로그(Blogger)에서도 채팅 위젯을 쉬운 방법으로 추가할 수 있습니다. 위젯 색상 및 디자인 맞춤 설정이 자유롭고 스마트폰 앱과 연동하여 강력하고 다양한 기능을 무료로 사용할 수 있습니다.

계정 만들기

먼저 블로그에 Tawk.to를 사용하려면 우선 이메일 계정을 만들어야 합니다. Tawk.to 홈페이지에 접속하여 페이지 중앙의 회원가입 버튼을 클릭하거나 아래의 링크 주소를 통해 접속합니다.

https://dashboard.tawk.to/signup

사용할 이름, 이메일, 비밀번호를 입력하고 'Signup for free'를 클릭합니다.

STEP 1. 언어 설정하기

회원가입 첫 단계는 언어 설정입니다. 기본 언어는 영어입니다.

언어를 한국어로 바꾼 뒤 다음 버튼을 누릅니다.

STEP 2. 속성 만들기

속성 이름, 사이트 URL, 위젯 이름을 입력합니다.

속성 이름과 위젯 이름은 필수 입력이고 사이트 URL 입력은 선택사항입니다.

나중에 다시 설정 할 수 있고 마음대로 변경할 수 있습니다.

사이트 이름 : 채팅 위젯 및 방문자 모니터링 등 기능을 관리하는 속성 이름을 정합니다.
사이트 URL : 채팅 위젯을 추가할 사이트의 URL을 입력합니다.
위젯 이름 : 채팅 위젯의 이름을 정합니다.

STEP 3. 관리자 설정하기

관리자를 설정하고 접근 권한 수준을 설정합니다.

블로그를 혼자 관리한 다면 건너 뛰거나 다음 버튼을 누릅니다.

동료나 팀원이 있다면 어드민 또는 상담원을 설정하고 이메일을 추가합니다.

어드민 : 모든 속성을 변경하고 맞춤 설정할 수 있습니다.
상담원(에이전트) : 채팅과 티켓에만 응답할 수 있습니다.

STEP 4. 위젯 설치하기

중앙의 스크립트 코드를 복사하여 블로그나 웹 사이트의 </body> 태그 위에 배치합니다.

복사한 코드를 블로그에 삽입하기 위해

Blogger 대시보드 > 테마 > HTML 편집 으로 이동합니다.

맨 밑으로 스크롤을 내려 </body> 태그 위쪽에 붙여넣기 후 배치합니다.

그 다음 테마를 저장합니다.

아래 사진과 같이 블로그 홈 화면 좌측 하단에 채팅 메시지 아이콘이 나타났다면 적용이 완료된 것 입니다.

이메일 인증하기 (선택사항)

로그아웃 후 재로그인 하는 경우 이메일 인증 페이지가 나타납니다. 이메일 주소 인증은 필수는 아닙니다. 비밀번호나 계정을 잊어버린 경우 이메일로 찾을 수 있으므로 등록해 두는 것이 좋습니다.

위젯의 모습 변경하기

블로그에 스크립트 코드를 삽입을 완료했습니다. 이제 채팅 위젯의 색상, 크기, 아이콘, 채팅 문구 등을 맞춤 설정하는 방법에 대해 알아보겠습니다.

먼저 Tawk.to 대시보드 > Add-ons > Chat widget으로 이동합니다.

Chat widget 페이지에서 채팅 위젯의 설정을 변경할 수 있습니다.

위젯 디자인을 변경하려면 페이지 중앙 > 고급으로 이동합니다.

Desktop Widget : 데스크탑에서 표시되는 위젯의 모양을 선택 할 수 있습니다.
Mobile Widget : 모바일 표시되는 위젯의 모양을 선택 할 수 있습니다.
Widget Color : 위젯의 색상을 변경합니다.

데스크탑(PC) 채팅 위젯

Desktop Widget의 기본 모양은 메시지 모양의 아이콘 입니다.

채팅 위젯을 클릭했을 때 나타나는 팝업 창의 가로, 세로 크기를 변경할 수 있습니다.

가로 : 280 이상 값을 입력하세요.
세로 : 330 이상 값을 입력하세요.

6가지 방향으로 위젯을 위치시킬 수 있습니다.

Attention Grabber는 채팅 위젯이 여기 있어요~! 알리는 역할을 합니다.

Gallery 버튼을 눌러 선택 할 수 있고 직접 이미지 파일을 업로드할 수도 있습니다.

모바일(Mobile) 채팅 위젯

모바일 채팅 위젯의 모양을 두 가지 중 원하는 모양으로 선택합니다.

위젯 색상, 텍스트 색상

머릿글과 Header Text을 바꾸면 채팅 위젯 색상이 바뀝니다. 관리자와 방문자 텍스트 색상도 변경 가능합니다.

	머릿글	Header Text
카카오톡	#FAE100	#3B1E1E
페이스북	#01A6FF	#FFFFFF
텔레그램	#33AADE	#F4F9FD
Whatsapp	#0DC143	#FFFFFF

또한 읽기:

위젯의 콘텐츠 변경하기

온라인 상태이거나 자리비움 상태 또는 오프라인 상태일 때의 팝업 창에 표시되는 상태 메시지(머릿글)을 수정할 수 있습니다. 또한 채팅을 시작하기전 사전 채팅 폼을 제출하도록 양식을 작성할 수 있습니다.

온라인

현재 채팅할 준비가 되어있습니다. 라이브 채팅을 시작하기 위해 무엇이든 말씀해주세요.

자리비움

잠시 화장실 좀 다녀오겠습니다!

오프라인

아래 양식을 작성해주시면 최대한 빨리 상담해 드리도록 하겠습니다.

사전 채팅 폼

채팅 가능한 다음 상담원과 대화를 시작하기 위해 아래 양식을 작성해 주시기 바랍니다.

위젯의 동작 설정

Notification Settings (알림 설정)

Hide estimated wait time : 예상 답변 대기 시간 숨기기.
Disable sound notification : 알림 사운드 비활성화.
Disable message preview : 메시지 미리보기 비활성화.
Disable agent typing notification : 상담원 타이핑 입력 알림 비활성화.
Disable visitor typing function : 방문자 타이핑 입력 알림 비활성화.
Disable browser tab notification : 브라우저 탭(창) 알림 비활성화.

Visibility Settings (가시성 설정)

오프라인일 때 위젯 숨기기 : 오프라인일 때 위젯을 아예 숨김.
로드 시에 위젯 숨기기 : 페이지가 모두 로드 된 후 위젯을 늦게 로드함.
모바일일 때 위젯 숨기기 : 데스크탑(PC)에서는 표시하고 모바일 에서는 표시하지 않음.

Feature Settings (기능 설정)

Disable emoji selection : 그림, 이모티콘 선택 비활성화.
Disable file upload : 파일 업로드 비활성화.
Disable chat rating : 채팅 만족도 평가 비활성화.

위젯 삭제

Blogger에서 삭제

Blogger 대시보드 > 테마 > HTML 편집 에서 </body> 태그 위의 Tawk.to 스트립트 코드를 제거합니다.

<!--Start of Tawk.to Script-->
<script type="text/javascript">
var Tawk_API=Tawk_API||{}, Tawk_LoadStart=new Date();
(function(){
var s1=document.createElement("script"),s0=document.getElementsByTagName("script")[0];
s1.async=true;s1.src='https://embed.tawk.to/xxxxxxxxxxxxxxxxxxxxxxxx/xxxxxxxxx';
s1.charset='UTF-8';s1.setAttribute('crossorigin','*');
s0.parentNode.insertBefore(s1,s0);
})();
</script>
<!--End of Tawk.to Script-->

Tawk.to에서 삭제

Tawk.to 대시보드 > Add-ons > Chat widget으로 이동한 후 페이지 최하단의 Delete Widget을 클릭합니다.

Delete Confirmation 팝업 창이 뜨고 삭제를 누르면 위젯이 제거됩니다.

구글 블로그 만들기