# 채팅 버튼 설치하기

모든 설정을 마쳤다면 우리 홈페이지나 앱에 해피톡 채팅 상담 플로팅 버튼(이하 채팅 버튼)을 설치하실 수 있습니다.

{% hint style="success" %}
해피톡 채팅 버튼은 직접 제작한 홈페이지(워드프레스 포함)는 물론, 카페24 등 호스팅사를 통해 만든 홈페이지에도 설치 가능합니다.
{% endhint %}

{% hint style="success" %}
호스팅사를 이용하실 경우, 자체 스토어나 부가서비스를 통해 해피톡에 가입하면 더욱 간편하게 채팅 버튼을 설치하실 수 있습니다.
{% endhint %}

### **해피톡 채팅 버튼의 버전별 차이**

* **해피톡(웹채팅) v1**: 고객이 채팅 버튼을 클릭하면 새 창이 열려 채팅상담을 진행할 수 있습니다.

![그림 5-1. 해피톡 v1 버전 활용 예시](/files/PQKrSh1SisknrhNydreP)

* 단, v1 버전에서 버튼 이미지나 위치 등을 바꾸려면 매번 버튼 소스 코드를 수정해야 하는 번거로움이 있습니다. 다른 채널 노출이 어려워 해피톡 웹채팅밖에 사용할 수 없고요.\
  가급적 v2 버전을 활용하시는 것을 권해드립니다. 😉\\
* **해피톡(웹채팅) v2**: 고객이 채팅 버튼을 클릭하면 열려 있는 페이지에서 바로 채팅상담을 시작할 수 있습니다.

![그림 5-2-1. 해피톡 v2 버전 채팅 버튼](/files/EWOYpvZJRNYeJETxY2X9)

![그림 5-2-2. 해피톡 v2 버전 활용 예시](/files/ado8APXJuVe8t0ufKap0)

* v2 버전은 해피톡 채팅 버튼을 설치할 사이트에 한 번만 소스 코드를 삽입해 두면 이후부터 해피톡에서 바로 디자인을 바꿀 수 있습니다. 버튼은 물론 채팅 화면 디자인도 우리 회사에 맞춰 꾸밀 수 있고, 제공되는 기능도 더욱 다양합니다.

지금부터 채팅 버튼 설정 v2 기준으로 버튼 설치 방법을 안내해 드릴게요. ❣️

## 해피톡 채팅 버튼 설치하기(v2)

* 해피톡에 [로그인](https://happytalk.io/auth/login)한 다음, [**\[서비스 설정\] > \[기본 설정\] > \[채팅 버튼 설정 v2\]**](https://happytalk.io/site_manager/chats/onepass)를 클릭하세요. 새 창이 열립니다.

![그림 5-3. 해피톡 채팅 버튼 설정하기](/files/EGfqCSN5ZtITRgarJIa4)

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

{% hint style="warning" %}
카카오톡과 네이버톡톡 버튼은 [채널 연동](https://happybook-basic.happytalk.io/get-started/channel-integration) 후 설치 가능합니다.
{% endhint %}

### **‘채널별 버튼’과 ‘통합 버튼’의 차이점**

* **채널별 버튼**: 카카오톡, 네이버톡톡, 웹채팅 등 **우리 회사에서 운영하는 채팅 상담 채널마다 각각의 채팅 버튼을 노출**합니다. 각 탭에서 채널별 채팅 버튼 노출 여부를 설정하실 수 있고, 원하는 채팅 버튼과 채팅창 디자인을 설정 가능합니다.

![그림 5-4-1. 채널별 채팅 버튼 설정](/files/5R7ReL6QUXqvG6AFJNZt)

![그림 5-4-2. 채널별 버튼 적용 예시](/files/pQJ062KLBfVHUHdoGdy2)

* **통합 버튼**: 하나의 채팅 버튼으로 다양한 채팅 채널을 연결합니다. ‘채팅 홈’을 활용해 헬프데스크(FAQ), 공지사항 등 다양한 기능을 추가할 수도 있고요😀

{% hint style="info" %}
채팅 홈에 대한 자세한 소개는 [해피톡 블로그](https://blog.happytalk.io/timeline/200626_happyhome/)에서 확인하실 수 있습니다.
{% endhint %}

* 통합 버튼을 활용하려면 '해피톡' 탭에서 **‘통합채팅 버튼 노출'을 활성화**하셔야 합니다. 그다음 원하는 노출 채널, 버튼 및 채팅창 디자인을 적용해 주세요.

![그림 5-5. 통합 버튼 설정](/files/8PdC6Y5pXqvqKwZbBUu0)

{% hint style="info" %}
**실제 홈페이지에 소스를 삽입하기 전 참고하세요!**

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

![그림 5-6-1. 오른쪽 상단의 ‘미리보기’ 버튼](/files/Z2igXGAqbPpBr3hz9voX)

![그림 5-6-2. 미리보기로 채팅 버튼 확인하기](/files/EJe6YP5SftIV0TpMjmVE)

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

![그림 5-7. 채팅 버튼 설정 적용하기](/files/YZqz1TYyzZbLBMfE08mF)

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

![그림 5-8. 채팅 버튼 소스 복사하기](/files/aJQbx2KIM5kSFd9nVdhy)

* 복사한 소스를 **홈페이지 html 소스 중 \</body> 위쪽**에 넣어주세요.\
  아래는 위사 호스팅사의 홈페이지에 해피톡 채팅 버튼을 설치한 소스 예시입니다.

![그림 5-9. 해피톡 채팅 버튼 소스 삽입하기](/files/ROGUaJPBkX6kEYPymYvY)

* 약 1분 후, 실제 홈페이지에 접속해 채팅 버튼이 잘 들어갔는지 확인하면 끝! 😎\
  앞으로 해피톡 디자인은 소스를 수정할 필요 없이 해피톡 채팅 버튼 설정에서 바로 바꿀 수 있습니다.

{% hint style="info" %}
**‘\</body> 위쪽...?’ 소스를 삽입하는 것이 어려우시다면?**\
\
회사 개발자분께 도움을 요청하시는 것을 권해드립니다. [해피톡 채팅상담](http://bit.ly/happybook-basic-chat)에서 관련 내용을 문의하실 수 있습니다.
{% endhint %}

### **해피톡 채팅 버튼 설정 한눈에 보기**

gif 이미지로 해피톡 채팅 버튼 설정을 간단히 살펴보세요. 😊

![그림 5-10. 해피톡 채팅 버튼 설정 한눈에 보기](/files/rPZjM3exLbkjxBTreSWG)

### **카페24, 고도몰, 위사 이용 중이라면?**

* **카페24, 고도몰, 위사 가입 고객사 분들은 채팅 버튼 대행설치 신청이 가능합니다.**\
  버튼 설치가 어렵다면 여기서 [대행신청서](https://docs.google.com/forms/d/e/1FAIpQLSdnPxMINgfnJog0-IuUn7TNdWnzYrDck_w2sNgkAaGP_uCGYQ/viewform)를 작성해 주세요. 작업 완료까지 1\~2일 정도 소요될 수 있습니다.\\
* **카페24** 가입 고객사 분들은 주문연동 설정을 할 때 자동으로 홈페이지에 채팅 버튼 스크립트가 삽입됩니다.

  \[서비스설정] > \[확장 서비스 관리] - \[쇼핑몰 주문정보 연동]에서 주문연동 설정 후 \[설정 페이지로 이동]을 클릭하세요. 별도의 소스 작업 없이 바로 버튼 적용 가능합니다.

![그림 5-11. 카페24 쇼핑몰 주문정보 연동으로 해피톡 채팅 버튼 노출하기](/files/vPPFGk6y0pUvfTgPdU00)

## **해피톡 v1 채팅 버튼 설치하기**

우리 회사 서비스 구조상 팝업 형태의 v1 버전 채팅상담을 달아야 한다면 이렇게 설치하세요.

* [**\[서비스설정\] > \[기본 설정\] > \[채팅 버튼 설정\]**](https://happytalk.io/site_manager/manage/dev_support)에서 ‘해피톡’ 탭을 클릭하면 제공되는 채팅 버튼 소스를 사이트 내에 삽입해 이용 가능합니다.

![그림 5-12. 해피톡 v1 채팅 버튼 설치하기](/files/bhSUzfr41nmCrbVVCNt1)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://happybook-basic.happytalk.io/get-started/button-install.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.