# 채팅 버튼 설치하기 모든 설정을 마쳤다면 우리 홈페이지나 앱에 해피톡 채팅 상담 플로팅 버튼(이하 채팅 버튼)을 설치하실 수 있습니다. {% hint style="success" %} 해피톡 채팅 버튼은 직접 제작한 홈페이지(워드프레스 포함)는 물론, 카페24 등 호스팅사를 통해 만든 홈페이지에도 설치 가능합니다. {% endhint %} {% hint style="success" %} 호스팅사를 이용하실 경우, 자체 스토어나 부가서비스를 통해 해피톡에 가입하면 더욱 간편하게 채팅 버튼을 설치하실 수 있습니다. {% endhint %} ### **해피톡 채팅 버튼의 버전별 차이** * **해피톡(웹채팅) v1**: 고객이 채팅 버튼을 클릭하면 새 창이 열려 채팅상담을 진행할 수 있습니다. ![그림 5-1. 해피톡 v1 버전 활용 예시](https://2578084196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOkMtWCNnFer9u5uKjhmn%2Fuploads%2Fgit-blob-3fd0d71a6775699667e6018db46c43dd4912fe3b%2F05-01.png?alt=media) * 단, v1 버전에서 버튼 이미지나 위치 등을 바꾸려면 매번 버튼 소스 코드를 수정해야 하는 번거로움이 있습니다. 다른 채널 노출이 어려워 해피톡 웹채팅밖에 사용할 수 없고요.\ 가급적 v2 버전을 활용하시는 것을 권해드립니다. 😉\\ * **해피톡(웹채팅) v2**: 고객이 채팅 버튼을 클릭하면 열려 있는 페이지에서 바로 채팅상담을 시작할 수 있습니다. ![그림 5-2-1. 해피톡 v2 버전 채팅 버튼](https://2578084196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOkMtWCNnFer9u5uKjhmn%2Fuploads%2Fgit-blob-13afaf4876a981ba78c2aa4297962a67a4d6507a%2F05-02-%EC%B1%84%ED%8C%85-%ED%99%88-%EB%B2%84%ED%8A%BC.png?alt=media) ![그림 5-2-2. 해피톡 v2 버전 활용 예시](https://2578084196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOkMtWCNnFer9u5uKjhmn%2Fuploads%2Fgit-blob-999617a52c7165b108c873f2191efb7fcf9a6ce6%2F05-02-02.png?alt=media) * v2 버전은 해피톡 채팅 버튼을 설치할 사이트에 한 번만 소스 코드를 삽입해 두면 이후부터 해피톡에서 바로 디자인을 바꿀 수 있습니다. 버튼은 물론 채팅 화면 디자인도 우리 회사에 맞춰 꾸밀 수 있고, 제공되는 기능도 더욱 다양합니다. 지금부터 채팅 버튼 설정 v2 기준으로 버튼 설치 방법을 안내해 드릴게요. ❣️ ## 해피톡 채팅 버튼 설치하기(v2) * 해피톡에 [로그인](https://happytalk.io/auth/login)한 다음, [**\[서비스 설정\] > \[기본 설정\] > \[채팅 버튼 설정 v2\]**](https://happytalk.io/site_manager/chats/onepass)를 클릭하세요. 새 창이 열립니다. ![그림 5-3. 해피톡 채팅 버튼 설정하기](https://2578084196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOkMtWCNnFer9u5uKjhmn%2Fuploads%2Fgit-blob-9d9faa3fb681a7d4eac491e67d985e6f43ac9f2e%2F05-03.png?alt=media) * 홈페이지에 채널별 버튼을 노출할지 통합 버튼을 노출할지 선택해 주세요.\ \&#xNAN;**‘해피톡’** 탭에서 ‘통합채팅 버튼 노출’을 비활성화하면 채널별 버튼을, 활성화하면 통합 버튼을 노출할 수 있습니다. {% hint style="warning" %} 카카오톡과 네이버톡톡 버튼은 [채널 연동](https://happybook-basic.happytalk.io/get-started/channel-integration) 후 설치 가능합니다. {% endhint %} ### **‘채널별 버튼’과 ‘통합 버튼’의 차이점** * **채널별 버튼**: 카카오톡, 네이버톡톡, 웹채팅 등 **우리 회사에서 운영하는 채팅 상담 채널마다 각각의 채팅 버튼을 노출**합니다. 각 탭에서 채널별 채팅 버튼 노출 여부를 설정하실 수 있고, 원하는 채팅 버튼과 채팅창 디자인을 설정 가능합니다. ![그림 5-4-1. 채널별 채팅 버튼 설정](https://2578084196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOkMtWCNnFer9u5uKjhmn%2Fuploads%2Fgit-blob-c6f4d5236868177d032c03308698497b73d5e8db%2F05-04-01.png?alt=media) ![그림 5-4-2. 채널별 버튼 적용 예시](https://2578084196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOkMtWCNnFer9u5uKjhmn%2Fuploads%2Fgit-blob-73bc59c7925b9a6109b97c4462cbdc7c91a0a70e%2F05-04-02.png?alt=media) * **통합 버튼**: 하나의 채팅 버튼으로 다양한 채팅 채널을 연결합니다. ‘채팅 홈’을 활용해 헬프데스크(FAQ), 공지사항 등 다양한 기능을 추가할 수도 있고요😀 {% hint style="info" %} 채팅 홈에 대한 자세한 소개는 [해피톡 블로그](https://blog.happytalk.io/timeline/200626_happyhome/)에서 확인하실 수 있습니다. {% endhint %} * 통합 버튼을 활용하려면 '해피톡' 탭에서 **‘통합채팅 버튼 노출'을 활성화**하셔야 합니다. 그다음 원하는 노출 채널, 버튼 및 채팅창 디자인을 적용해 주세요. ![그림 5-5. 통합 버튼 설정](https://2578084196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOkMtWCNnFer9u5uKjhmn%2Fuploads%2Fgit-blob-e1397d2938bcea9570029079dccc89f64a3c7e49%2F05-05.png?alt=media) {% hint style="info" %} **실제 홈페이지에 소스를 삽입하기 전 참고하세요!** 실제 홈페이지에 소스를 삽입하기 전, 오른쪽 상단의 '미리보기'를 클릭하고 URL을 입력해\ 우리 홈페이지에 버튼과 채팅 화면이 어떻게 보일지 확인하시는 것을 추천합니다. 😎 {% endhint %} ![그림 5-6-1. 오른쪽 상단의 ‘미리보기’ 버튼](https://2578084196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOkMtWCNnFer9u5uKjhmn%2Fuploads%2Fgit-blob-f58ef7182505dcc05bc3a9679121fa990b77f231%2F05-06-01.png?alt=media) ![그림 5-6-2. 미리보기로 채팅 버튼 확인하기](https://2578084196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOkMtWCNnFer9u5uKjhmn%2Fuploads%2Fgit-blob-a27f25c45132f4239955053b1eba7151501090aa%2F05-06-02.gif?alt=media) * 모든 항목을 원하는 대로 설정하고 미리보기도 마치셨다면 오른쪽 상단의 '적용하기'를 클릭해 변경 내용을 저장해 주세요. ![그림 5-7. 채팅 버튼 설정 적용하기](https://2578084196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOkMtWCNnFer9u5uKjhmn%2Fuploads%2Fgit-blob-12c3ff0a57a285317c5fb53c8782f092dec7f7d0%2F05-07.png?alt=media) * **‘적용하기’** 옆 ‘소스보기’를 클릭한 다음 채팅 버튼 소스를 복사해 주세요. ![그림 5-8. 채팅 버튼 소스 복사하기](https://2578084196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOkMtWCNnFer9u5uKjhmn%2Fuploads%2Fgit-blob-2caabb9196215c72ef4f15453ea1c1f316039344%2F05-08.png?alt=media) * 복사한 소스를 **홈페이지 html 소스 중 \ 위쪽**에 넣어주세요.\ 아래는 위사 호스팅사의 홈페이지에 해피톡 채팅 버튼을 설치한 소스 예시입니다. ![그림 5-9. 해피톡 채팅 버튼 소스 삽입하기](https://2578084196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOkMtWCNnFer9u5uKjhmn%2Fuploads%2Fgit-blob-68b5ec91b43e7cbd29abb42b326c2ae2e17903c4%2F05-09.png?alt=media) * 약 1분 후, 실제 홈페이지에 접속해 채팅 버튼이 잘 들어갔는지 확인하면 끝! 😎\ 앞으로 해피톡 디자인은 소스를 수정할 필요 없이 해피톡 채팅 버튼 설정에서 바로 바꿀 수 있습니다. {% hint style="info" %} **‘\ 위쪽...?’ 소스를 삽입하는 것이 어려우시다면?**\ \ 회사 개발자분께 도움을 요청하시는 것을 권해드립니다. [해피톡 채팅상담](http://bit.ly/happybook-basic-chat)에서 관련 내용을 문의하실 수 있습니다. {% endhint %} ### **해피톡 채팅 버튼 설정 한눈에 보기** gif 이미지로 해피톡 채팅 버튼 설정을 간단히 살펴보세요. 😊 ![그림 5-10. 해피톡 채팅 버튼 설정 한눈에 보기](https://2578084196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOkMtWCNnFer9u5uKjhmn%2Fuploads%2Fgit-blob-eace557b5b2f259de78ccf26ec6ab7e85e45470a%2F05-10.gif?alt=media) ### **카페24, 고도몰, 위사 이용 중이라면?** * **카페24, 고도몰, 위사 가입 고객사 분들은 채팅 버튼 대행설치 신청이 가능합니다.**\ 버튼 설치가 어렵다면 여기서 [대행신청서](https://docs.google.com/forms/d/e/1FAIpQLSdnPxMINgfnJog0-IuUn7TNdWnzYrDck_w2sNgkAaGP_uCGYQ/viewform)를 작성해 주세요. 작업 완료까지 1\~2일 정도 소요될 수 있습니다.\\ * **카페24** 가입 고객사 분들은 주문연동 설정을 할 때 자동으로 홈페이지에 채팅 버튼 스크립트가 삽입됩니다. \[서비스설정] > \[확장 서비스 관리] - \[쇼핑몰 주문정보 연동]에서 주문연동 설정 후 \[설정 페이지로 이동]을 클릭하세요. 별도의 소스 작업 없이 바로 버튼 적용 가능합니다. ![그림 5-11. 카페24 쇼핑몰 주문정보 연동으로 해피톡 채팅 버튼 노출하기](https://2578084196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOkMtWCNnFer9u5uKjhmn%2Fuploads%2Fgit-blob-f5f1e832febb48fa7dc6fff3e9f03cce39d8e450%2F201110-5-11.png?alt=media) ## **해피톡 v1 채팅 버튼 설치하기** 우리 회사 서비스 구조상 팝업 형태의 v1 버전 채팅상담을 달아야 한다면 이렇게 설치하세요. * [**\[서비스설정\] > \[기본 설정\] > \[채팅 버튼 설정\]**](https://happytalk.io/site_manager/manage/dev_support)에서 ‘해피톡’ 탭을 클릭하면 제공되는 채팅 버튼 소스를 사이트 내에 삽입해 이용 가능합니다. ![그림 5-12. 해피톡 v1 채팅 버튼 설치하기](https://2578084196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOkMtWCNnFer9u5uKjhmn%2Fuploads%2Fgit-blob-2dbbbdb9dabeed6bedd766a53a189766ebed739e%2F201110-5-12.png?alt=media)