> 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. 모든 설정을 완료하였다면 저장 후 게시하기 버튼을 클릭하여, 사이트에 반영을 합니다.