# 플로팅 챗 적용하기

플로팅챗은 고객사 웹사이트에 챗봇 버튼을 표시하여, 사용자가 웹페이지 안에서 바로 챗봇을 이용할 수 있도록 하는 기능입니다.

플로팅챗을 웹사이트에 적용하는 방식은 크게 두 가지입니다.

<table><thead><tr><th width="144">적용 방식</th><th>설명</th></tr></thead><tbody><tr><td>JS 파일 적용</td><td>자바스크립트(JS) 파일을 다운로드하여 고객사 웹페이지에 직접 삽입하는 방식</td></tr><tr><td>팝업 URL 적용</td><td>ChatBot 팝업 URL을 복사하여 고객사 웹페이지의 버튼, 링크, 팝업 등에 연결하는 방식</td></tr></tbody></table>

## 방법 1. JS 파일을 다운로드하여 적용하기

자바스크립트(JS) 파일을 다운로드한 뒤, 고객사 웹페이지에 삽입하여 플로팅챗을 적용하는 방식입니다.

이 방식은 웹사이트 화면에 플로팅챗 버튼을 직접 노출하고, 사용자가 버튼을 클릭하여 채팅창을 열 수 있도록 할 때 사용합니다.

### 1단계: 관리자 페이지 접속

관리자 페이지에 접속합니다.

<figure><img src="/files/NUrJh0KJAp8vxapFDAu9" alt="" width="563"><figcaption></figcaption></figure>

### 2단계: 다운로드 버튼 클릭

`ChatBot 설정 관리` 메뉴를 클릭해, 적용할 챗봇의 JS `다운로드` 버튼을 클릭합니다.

<figure><img src="/files/BbIgxlbratHfCZO3MeRN" alt=""><figcaption></figcaption></figure>

### 3단계: 자바스크립트 다운로드

자바스크립트(JS) 파일을 다운로드합니다.

<figure><img src="/files/oafDDyx1REHNJnEcne4W" alt="" width="563"><figcaption></figcaption></figure>

### 4단계: 고객사 웹페이지 적용

다운로드한 JS 파일을 고객사 웹페이지에 적용합니다.

{% hint style="danger" icon="asterisk" %}
**유의사항**

* 플로팅챗 설정을 변경한 경우, JS 파일을 다시 다운로드하여 교체해야 합니다.
* 챗봇 데이터를 추가 생성하거나 데이터만 편집한 경우에는 JS 파일을 다시 다운로드하지 않아도 됩니다.
* 고객사 웹사이트에 기존 JS 파일이 연결되어 있는 경우, 새 파일 적용 전 기존 JS 파일을 백업하는 것을 권장합니다.
* 새 JS 파일 적용 후에도 기존 화면이 보이는 경우, 브라우저 또는 서버 캐시를 갱신해야 할 수 있습니다.
  {% endhint %}

### 추가사항: 임직원 정보 연동하기

채팅 이력에서 임직원 정보를 확인해야 하는 경우, 플로팅챗 JS 파일을 로드하기 전에 사용자 정보를 변수로 입력할 수 있습니다. 임직원 정보 연동을 적용하면 채팅 이력에서 사용자의 아이디와 이름을 확인할 수 있습니다.

```html
<script>
  window.ibId = "고객사 직원 아이디";
  window.ibName = "고객사 직원 이름";
</script>
```

## 방법 2. 팝업 URL로 챗봇 열기

ChatBot 팝업 URL을 복사하여 고객사 웹페이지의 버튼, 링크, 팝업 등에 연결하는 방식입니다.

이 방식은 플로팅 버튼을 직접 삽입하지 않고, 특정 버튼이나 링크를 클릭했을 때 챗봇을 팝업 형태로 열고 싶을 때 사용합니다.

### 1단계: 관리자 페이지 접속

관리자 페이지에 접속합니다.

<figure><img src="/files/NUrJh0KJAp8vxapFDAu9" alt="" width="563"><figcaption></figcaption></figure>

### 2단계: 플로팅 설정 버튼 클릭

`ChatBot 설정 관리` 메뉴를 클릭해, 적용할 챗봇의 플로팅 `설정` 버튼을 클릭합니다.

<figure><img src="/files/FEPjo7VVgj0BG44tKWb2" alt=""><figcaption></figcaption></figure>

### 3단계: 팝업 URL 복사

플로팅챗 설정 화면에서 `ChatBot 팝업 URL`을 복사합니다.

<figure><img src="/files/6Zxd3qxWZE3DOa05TSYE" alt="" width="375"><figcaption></figcaption></figure>

### 4단계: 고객사 웹페이지 적용

고객사 웹페이지의 버튼, 링크, 팝업 실행 영역에 복사한 URL을 적용합니다.

**HTML 적용 예시**

HTML에서 버튼 또는 링크 클릭 시 팝업창을 열도록 설정할 수 있습니다.

```html
<a href="ChatBot 팝업 URL"
   onclick="window.open(this.href, 'CHATIST 팝업', 'width=620,height=720'); return false;">
  팝업창 버튼
</a>
```

**JavaScript 적용 예시**

JavaScript에서 `window.open()`을 사용하여 팝업창을 열 수 있습니다.

```html
<script>
  window.open('ChatBot 팝업 URL', 'CHATIST 팝업', 'width=620,height=720');
</script>
```

{% hint style="danger" icon="asterisk" %}
**유의사항**

* 플로팅챗을 최신 버전으로 반영하려면 `저장` 버튼을 눌러야 합니다.
* 팝업 URL은 챗봇을 외부 웹페이지에서 직접 열기 위한 주소입니다.
* 고객사 웹사이트의 팝업 차단 설정이나 브라우저 정책에 따라 팝업 동작 방식이 달라질 수 있습니다.
  {% endhint %}


---

# 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://ixpert-product.gitbook.io/chatist/manual/chatist/undefined-3/undefined-1.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.