> For the complete documentation index, see [llms.txt](https://help.qshop.ai/customer_support/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.qshop.ai/customer_support/guide/tip/fixed/floating.md).

# 플로팅 콘텐츠

플로팅 콘텐츠는 사이트의 오른쪽에 고정이 되어 따라오는 기능으로 문의하기, 전화걸기 등 다양한 형태로 이용을 \
할 수 있습니다.

자세한 설정 방법은 아래 가이드를 참고 부탁드립니다.

## 1. 플로팅 콘텐츠 활성화하기

1-1. 글로벌 메뉴바 오른쪽의 \[사이트 전체 설정] 아이콘을 클릭합니다.

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

1-2. 기본 탭의 \[플로팅 콘텐츠 설정]을 클릭합니다.

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

1-3. 플로팅 콘텐츠 설정항목의 \[플로팅 콘텐츠 사용] 토글을 활성화 합니다.

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

1-4. (선택)\[더보기 버튼]을 활성화 하여, 더보기 기능을 추가할 수 있으며 설정 아이콘을 클릭하여\
더보기 버튼의아이콘, 색상 등을 설정할 수 있습니다.

{% hint style="info" %}
더보기 버튼 설정 시 플로팅 콘텐츠가 기본적으로 접혀있는 상태로 노출이 됩니다.
{% endhint %}

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

1-5. (선택)\[플로팅 콘텐츠 배경] 을 사용하면, 플로팅 콘텐츠가 활성화 되었을 시 배경이 불투명하게 처리가 됩니다.

{% hint style="info" %}
플로팅 콘텐츠 배경 기능은 \[더보기 버튼] 사용 시 선택적으로 사용이 가능합니다.
{% endhint %}

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

## 2. 버튼 설정하기

플로팅 콘텐츠에 사용이 될 버튼을 추가하고, 아이콘, 색상, 클릭이벤트 등을 설정할 수 있습니다.

2-1. \[+버튼 추가하기]를 클릭하여 새로운 버튼을 추가합니다.

2-2. 생성 된 버튼의 설정 아이콘을 통해, 아이콘의 모양, 타이틀 문구, 색상 등을 설정 할 수 있습니다.

각 항목의 자세한 내용은 아래 표를 참고 부탁드립니다.

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

<table><thead><tr><th width="122">항목</th><th>설명</th></tr></thead><tbody><tr><td><strong>아이콘</strong></td><td>[아이콘 선택]버튼을 클릭하여, 플로팅 콘텐츠로 사용 할 아이콘을 선택합니다.</td></tr><tr><td><strong>타이틀</strong></td><td><p>생성한 버튼의 용도에 맞는 이름을 입력합니다. 입력 된 이름은 버튼의 왼쪽에 표시가 됩니다.</p><ul><li>[타이틀 숨김] 기능 사용 시 타이틀은 보여지지 않고 아이콘만 노출이 됩니다</li></ul></td></tr><tr><td><strong>색상</strong></td><td>타이틀, 아이콘, 배경의 색상을 설정합니다.</td></tr><tr><td><strong>클릭 이벤트</strong></td><td><p>전화걸기, 내부 링크연결 등 다양한 용도로 버튼의 클릭 이벤트 설정을 할 수 있습니다.</p><ul><li>전화 걸기, 문자 보내기 등 일부 기능은 모바일에서만 작동이 됩니다.</li></ul></td></tr></tbody></table>

2-3. 사용하지 않는 버튼은 삭제하기 아이콘을 클릭하여 제거를 할 수 있습니다.

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

2-4. 모든 설정을 완료하였다면 저장 후 게시하기 버튼을 클릭하여, 사이트에 반영을 합니다.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://help.qshop.ai/customer_support/guide/tip/fixed/floating.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.