# 플로팅 콘텐츠

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

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

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

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

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2Fn88oHxZJbajdyYV44brP%2F1.png?alt=media&#x26;token=fcd26618-ac77-42a2-91a5-1ce1619897c6" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2F4sQlMzIYVyBq7G2CTid7%2F2.png?alt=media&#x26;token=fb4b4951-850a-4368-a01a-0d8efa77fcb1" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FTZmveUhYxgVsBjDWFDVn%2F3.png?alt=media&#x26;token=d18c52a1-5459-4569-87ac-74746e635672" alt=""><figcaption></figcaption></figure>

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

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

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FkRaBaLSZi6WhcE0NW8eP%2F4.png?alt=media&#x26;token=6727eff3-de3a-4819-a5fe-f406288e7ce0" alt=""><figcaption></figcaption></figure>

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

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

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FarblqoOt1lmfxa7ZqN7M%2F5.png?alt=media&#x26;token=c487d011-855c-4f5b-9475-f243c7e5deda" alt=""><figcaption></figcaption></figure>

## 2. 버튼 설정하기

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

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

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

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

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2F8nMn14IW1zRyAE7mVVri%2F6.png?alt=media&#x26;token=22a931b0-93a6-4b1e-91de-0d3b6a6280a9" 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="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2Fb4uWXOdPPVr9j0e05W7Q%2F7.png?alt=media&#x26;token=04620514-93b3-4dd3-b538-46a897b86e25" alt=""><figcaption></figcaption></figure>

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