# 채팅 위젯 - 리드를 왓츠앱 채팅으로 연결하기

**참고사항**: 이 기능을 사용하려면 왓츠앱이 활성화되어 있고 전화번호가 등록되어 있어야 합니다. `Settings(설정) → WhatsApp(왓츠앱)` 메뉴에서 설정할 수 있습니다.

## 왓츠앱 채팅 위젯 활성화 방법

1. `Sites(사이트) → Chat Widget(채팅 위젯)`으로 이동합니다.
2. 채팅 위젯에서 Chat type(채팅 유형)으로 이동하여 WhatsApp Chat(왓츠앱 채팅) 옵션을 선택합니다.

![왓츠앱 채팅 선택](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155035806617/original/4hkhHLMmq2RG6G-LZ6OWev2otx3J-WkavA.jpeg?1730391118)

![채팅 유형 설정](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155035806628/original/cmYN5LaUTB0JQy1iKHnrBVPlRy2DdnPfpg.png?1730391126)

참고 - 왓츠앱 번호가 설정되지 않은 경우, 왓츠앱 번호 추가를 위한 설정 페이지로 이동됩니다. [왓츠앱 번호 추가 방법은?](https://github.com/benjaminhyperclass/hyperclass-help-ko/blob/main/docs/19-에이전시-뷰/기타/whatsapp-overview-sub-account-set-up-and-best-practices.md)

3. 왓츠앱 채팅 옵션을 선택한 후, 위젯 창에서 텍스트, 색상, 브랜딩, 이메일/전화번호 폼을 커스터마이징할 수 있습니다. 왓츠앱 채팅 유형으로 설정하면 기본적으로 왓츠앱의 초록색 계열 색상이 사용되지만, 사용자가 원하는 색상으로 변경할 수 있습니다.

![위젯 커스터마이징](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155035806841/original/QxF7yZxfaKSNme5dCrvNjia7EkGylNyrPQ.png?1730391349)

4. 설정이 완료되면, 마지막으로 왓츠앱 번호를 선택합니다. 이 번호로 고객이 채팅을 시작했을 때 메시지가 전달됩니다.

![왓츠앱 번호 선택](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155024655030/original/NtZbeNySAZAkKNIot2KiyiJwpbhw6fRNSg.png?1713404519)

5. 설정이 모두 완료되면 "Save(저장)" 버튼을 클릭합니다.

## 작동 방식

1. 랜딩 페이지(외부 서비스)의 헤더 코드에 코드를 추가하거나, 퍼널/웹사이트 설정에서 토글을 활성화하여 사용합니다.
2. 채팅 위젯이 삽입되면 브라우저 창에서 페이지가 로드될 때 랜딩 페이지에 표시됩니다.
3. 연락처가 페이지를 방문하여 폼을 작성하고 제출하면, 위젯 창에서 선택한 번호로 메시지와 함께 왓츠앱 웹 앱으로 연결됩니다.
4. 이후 대화(Conversations) 화면에서 알림을 받게 되며, 연락처와 메시지를 주고받을 수 있습니다.

***

*원문 최종 수정: Thu, 31 Oct, 2024 at 11:15 AM* *Hyperclass 사용 가이드 — hyperclass.ai*


---

# 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://hyperclass.gitbook.io/hyperclass-docs/and-sites/chat-widget-send-your-leads-to-whatsapp-chat.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.
