> For the complete documentation index, see [llms.txt](https://groobee.gitbook.io/gelatto/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://groobee.gitbook.io/gelatto/ai-chatbot/create-gelatto/style.md).

# 스타일

{% hint style="info" %}
스타일을 설정 및 수정한 후 저장 버튼을 눌러 챗봇에 적용해 주세요.
{% endhint %}

## **스타일 설정이란?** <a href="#style" id="style"></a>

스타일 설정에서는 챗봇의 테마 색상 및 사이트 화면에 노출될 챗봇 위젯의 디자인 및 위치를 설정할 수 있습니다.&#x20;

<figure><img src="https://2817860811-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUd5i76OwaMgIsfGeZkeQ%2Fuploads%2F7qKpEPEdsC8o6NGExO2r%2Fimage.png?alt=media&amp;token=25ccd8d3-5e54-45fa-9386-a5cb65e32f34" alt=""><figcaption></figcaption></figure>

### **1. 테마 설정**

챗봇의 테마(색상)을 지정할 수 있습니다.&#x20;

* 적용 범위 : 기본 위젯 사용 시 배경색, 사용자 질문 말풍선 배경색, 질문 발송 버튼 활성화 색, 피드백(좋아요/싫어요) 버튼 색, 링크 버튼 색, 대화 목록의 새로운 대화 버튼 색

{% hint style="info" %}
설정한 테마가 배경으로 적용되는 요소의 텍스트 및 아이콘은 자동으로 블랙 또는 화이트로 변경됩니다.
{% endhint %}

### **2. 위젯 설정**

{% hint style="info" %}
챗봇 위젯은 사용자가 챗봇과 대화를 시작할 수 있도록 화면 한쪽에 고정되어 있는 버튼이며, 클릭 시 대화창이 열립니다.&#x20;
{% endhint %}

위젯 설정에서는 챗봇 위젯의 디자인과 사이즈, 위치 등을 설정할 수 있습니다.

<figure><img src="https://2817860811-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUd5i76OwaMgIsfGeZkeQ%2Fuploads%2Fv1XVVMeonWRys1X0neYR%2F%E1%84%89%E1%85%AE%E1%84%8C%E1%85%A5%E1%86%BC%201.png?alt=media&amp;token=e42ee0ae-fa7e-4c9b-94a7-03de3c988391" alt=""><figcaption></figcaption></figure>

a. 위젯 이미지: 챗봇 위젯의 이미지를 설정하며 세 가지 방법으로 설정할 수 있습니다.

* 아이콘 변경: 젤라또에서 제공하는 기본 아이콘을 선택하여 위젯 이미지 설정 (테마 설정 색상 반영)
* 파일 업로드: 원하는 이미지의 파일을 업로드하여 설정\ <sub>- 형식: JPG, JPEG, PNG / 용량: 최대 5MB / 사이즈 : 가로, 세로 최소 160px 이상</sub>\ <sub>- 200x200 (1:1 비율) 권장</sub>
* 프로필 이미지 사용: 선택 시 프로필 이미지에 업로드한 이미지와 동일한 이미지로 반영

b. 위젯 사이즈: 사이트에 노출되는 위젯의 크기를 설정하며, 미리보기에서 변경 크기를 확인할 수 있습니다.\ <sub>- 40 \~ 100px까지 설정 가능</sub>

c. PC 위치: 오른쪽 하단 선택 시 PC 화면의 오른쪽, 아래에서 설정한 픽셀만큼, 왼쪽 하단 선택 시 PC 화면의 왼쪽, 아래에서 설정한 픽셀만큼 떨어져 위치합니다.&#x20;

d. 모바일 웹 위치: 오른쪽 하단 선택 시 모바일 웹 화면의 오른쪽, 아래에서 설정한 픽셀만큼, 왼쪽 하단 선택 시 모바일 웹 화면의 왼쪽, 아래에서 설정한 픽셀만큼 떨어져 위치합니다.&#x20;

e. 답변 링크 이동 시 대화창 설정: 대화창 자동 열기를 선택하면, 챗봇 답변에 링크 형식의 요소를 클릭했을 시 펼쳐지는 새 페이지에서 챗봇 대화창이 자동으로 열린 상태로 표시됩니다.

{% hint style="info" %}
답변 링크 이동 시 대화창 설정은 모달형 유형에서만 설정할 수 있습니다.
{% endhint %}

{% hint style="success" %}
PC와 모바일 웹에서 챗봇 위젯의 위치를 별도로 설정할 수 있습니다. \
모바일 웹 환경에서 하위에 메뉴 바 등을 고려하여 위치를 별도로 설정하여 사용할 수 있습니다.
{% endhint %}

{% hint style="warning" %}
위젯 설정 위치 적용은 실제 환경에서 확인해 주세요.
{% endhint %}

<details>

<summary>위치 참고 이미지</summary>

<figure><img src="https://2817860811-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUd5i76OwaMgIsfGeZkeQ%2Fuploads%2Fps0cvon2krtNcWtZ5zUj%2Fimagepposition.png?alt=media&amp;token=31cb7805-59d3-4ab7-b020-a3f65cd40017" alt=""><figcaption><p>pc 위치 오른쪽 하단 설정 시 / 모바일웹 위치 왼쪽 하단 설정 시</p></figcaption></figure>

</details>