# スタイル

{% hint style="info" %}
スタイルを設定・修正した後、保存ボタンをクリックしてチャットボットに適用してください。
{% endhint %}

## **スタイル設定とは？**

スタイル設定では、チャットボットのテーマカラーや、サイト画面に表示されるチャットボットウィジェットのデザイン・配置を設定できます。

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

### **1. テーマ設定**

チャットボットのテーマカラー（色）を指定できます。

* 適用範囲：基本ウィジェット使用時の背景色、ユーザーの吹き出しの背景色、送信ボタンのアクティブカラー、フィードバック（良いです／残念です）ボタンの色、リンクボタンの色、会話リスト内の「新しい会話」ボタンの色などに適用されます。

{% hint style="info" %}
設定したテーマが背景に適用される要素のテキストおよびアイコンは、自動的にブラックまたはホワイトに切り替わります。
{% endhint %}

### **2. ウィジェット設定**

{% hint style="info" %}
チャットボットウィジェットは、ユーザーがチャットを開始できるように画面の端に固定表示されるボタンで、クリックするとチャットウィンドウが開きます。
{% endhint %}

ウィジェット設定では、そのデザイン、サイズ、配置などを設定できます。

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

a. ウィジェット画像: チャットボットウィジェットの画像を以下の3つの方法で設定できます：

* アイコン変更：ジェラートで提供する基本アイコンを選択し、ウィジェット画像を設定します（テーマカラーが反映されます）
* ファイルアップロード：任意の画像ファイルをアップロードして設定します。\ <sub>- 形式：JPG、JPEG、PNG ／ 容量：最大5MB ／ サイズ：横・縦160px以上推奨</sub>\ <sub>- 推奨サイズ：200×200（1:1の比率）</sub>
* プロフィール画像を使用：選択すると、プロフィールに設定した画像と同じ画像が使用されます。

b. ウィジェットサイズ : サイト上に表示されるウィジェットの大きさを設定し、プレビューで変更後のサイズを確認できます。\ <sub>- 設定可能サイズ：40～100px</sub>

c. PC画面での位置 : 「右下」を選択するとPC画面の右下、「左下」を選択すると左下に、設定したピクセル数だけ離れた位置に表示されます。

d. モバイルWeb画面での位置 : 「右下」を選択するとモバイル画面の右下、「左下」を選択すると左下に、設定したピクセル数だけ離れた位置に表示されます。

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で「右下」を選択した場合／モバイルWebで「左下」を選択した場合</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/ja/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.