# 시작하기 - 실시간 채팅 위젯 설정

웹사이트를 더 매력적이고 사용자 친화적으로 만들고 싶으신가요? 실시간 채팅 위젯이 바로 필요한 도구입니다. 방문자가 즉시 질문에 대한 답을 얻고, 만족도가 높아지며, 충성도 높은 리드로 전환되는 모습을 상상해보세요. 지금 시작해봅시다!

***

**목차**

* [실시간 채팅 위젯 생성](#실시간-채팅-위젯-생성)
* [임베드 코드로 실시간 채팅 위젯 배포](#임베드-코드로-실시간-채팅-위젯-배포)
* [설정을 통해 실시간 채팅 위젯 배포](#설정을-통해-실시간-채팅-위젯-배포)

***

## 실시간 채팅 위젯 생성

우선 첫 번째로! 실시간 채팅 위젯 생성은 쉽고 간단합니다. 웹사이트 스타일에 완벽하게 맞도록 위젯을 빠르게 설정하고 커스터마이징하는 방법을 알아보세요:

* \*\*사이트(Sites) > 채팅 위젯(Chat Widget)\*\*으로 이동하세요
* New를 클릭하면 다음 중 하나를 선택할 수 있습니다: 올인원 채팅, SMS / 이메일 채팅, 실시간 채팅, 왓츠앱

![채팅 위젯 타입 선택](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155046960745/original/mOIsnIXYbAQbClCbzToBCQd5Iosl9yEhPw.png?1747784067)

* 실시간 채팅(Live Chat)을 선택하세요
* 브랜드에 맞게 위젯을 커스터마이징하세요
* \*\*저장(Save)\*\*을 클릭하세요

![실시간 채팅 위젯 설정](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155046960759/original/SRZNNj26lxreHm5VbkHahfNcCrcphc350g.png?1747784131)

* Get Code > Copy를 클릭하세요
* 제공된 임베드 코드를 복사하세요

![임베드 코드 복사](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155046960766/original/VoU2x6UeSm_BfBCXsNEwBdH-IvD1n80R3Q.png?1747784179)

**더 자세히 알아보기**

* [올인원 채팅 위젯 사용 방법](/hyperclass-docs/and-sites/xml-sitemaps/how-to-use-the-all-in-one-chat-widget.md)
* [동일한 웹사이트에 여러 채팅 위젯 추가하는 방법](/hyperclass-docs/and-sites/xml-sitemaps/how-to-create-multiple-chat-widgets-in-a-single-sub-account.md)
* [실시간 채팅 기능](/hyperclass-docs/conversations/view-edit-ai-response-info-in-conversations/live-chat.md)
* [채팅 위젯 시작 가이드](/hyperclass-docs/and-sites/getting-started-with-chat-widget.md)
* [채팅 위젯 커스터마이징 개요](/hyperclass-docs/and-sites/overview-of-chat-widget-customizations.md)

**다음으로**, 새 위젯을 어떻게 배포할지 결정할 수 있습니다! 옵션들을 살펴보세요.

***

## 임베드 코드로 실시간 채팅 위젯 배포

웹사이트나 퍼널에 직접 스크립트를 추가하는 것이 이미 익숙하신가요? 완벽합니다! 사이트 편집기에 채팅 위젯을 직접 임베드하는 것은 매우 간단합니다. 다음 빠른 단계를 따라해보세요:

* **사이트(Sites) > 웹사이트(Websites)** 또는 \*\*사이트(Sites) > 퍼널(Funnels)\*\*로 이동하세요
* 원하는 웹사이트나 퍼널을 찾아 편집을 위해 열어주세요

![웹사이트 편집](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155046960787/original/gl7U7-ugo-EDySww14EHX-4Gj2WR2rk96w.png?1747784281)

* 편집기에서 **추적 코드(Tracking Code)** 아이콘 (\</>)을 클릭하세요
* 복사한 채팅 위젯 코드를 붙여넣으세요
* \*\*저장(Save)\*\*을 클릭하세요

![추적 코드에 위젯 코드 추가](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155046960800/original/7j7RzpFPTEufQWAwRrPbk8r82cQKIsBZpg.png?1747784365)

**더 자세히 알아보기**

* [하이레벨 채팅 위젯 설치 방법](/hyperclass-docs/and-sites/how-to-install-highlevel-s-chat-widget.md)

잘하셨습니다! **다음으로**, 위젯이 원활하게 작동하는지 테스트해보는 것을 고려해보세요.

***

## 설정을 통해 실시간 채팅 위젯 배포

더 간단하게 처리하고 싶으신가요? 웹사이트 설정을 통해 위젯을 직접 배포하는 것은 매우 편리합니다. 특히 코드를 직접 다루는 것이 부담스럽다면 더욱 그렇죠. 함께 살펴보세요:

* **사이트(Sites) > 웹사이트(Websites)** 또는 \*\*사이트(Sites) > 퍼널(Funnels)\*\*로 이동하세요
* 원하는 웹사이트나 퍼널을 찾아 설정을 열어주세요

![웹사이트 설정](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155046960805/original/qO6x3foY4mdlFGpt9mJMtShG_K95UyCF2A.png?1747784390)

* **채팅 위젯(Chat Widget)** 섹션에서 생성한 실시간 채팅 위젯을 선택하세요

![채팅 위젯 선택](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155046960820/original/w-Ubwt6xqJS_-CIIhHTfhfcnFa96K3PU5g.png?1747784475)

* \*\*저장(Save)\*\*을 클릭하세요

![설정 저장](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155046960834/original/1BsYAyKDH_J3qdvsMEAcrssP0JqZCeQLFA.png?1747784529)

훌륭합니다! 모든 설정이 완료되었습니다. 다음으로는 고급 커스터마이징 옵션을 탐색하여 브랜드만의 독특한 채팅 경험을 만들어보는 것은 어떨까요?

***

*원문 최종 수정: 2025년 5월 20일* *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/getting-started/getting-started-setup-live-chat-widget.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.