# 스타일

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

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

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

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

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

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

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

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

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

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

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

<figure><img src="/files/AMAZ8oSCvQDt1N6O3r3f" 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="/files/YgLVwsferlLq448T9C33" alt=""><figcaption><p>pc 위치 오른쪽 하단 설정 시 / 모바일웹 위치 왼쪽 하단 설정 시</p></figcaption></figure>

</details>


---

# 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://groobee.gitbook.io/gelatto/ai-chatbot/create-gelatto/style.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.