# チャットボットウィジェットのカスタマイズ

## **チャットボットウィジェットのカスタマイズ**

このドキュメントでは、埋め込みチャットボットウィジェットのUIを自社サイトに合わせてカスタマイズするための公開関数 `toggle()` と `layoutUpdate(widget)` の使い方を説明します。

ジェラート管理画面で提供されているウィジェット設定を使わずに、サイト側でチャットボットウィジェットをカスタマイズする場合にご利用ください。

{% hint style="info" %}
2つの関数は初期化（init）の後、必要なタイミングで呼び出してください。
{% endhint %}

チャットボットウィジェットをカスタマイズするには、まずジェラートが提供するチャットボットウィジェットを非表示にする必要があります。現在、この機能は別途お問い合わせいただいた後に適用可能です。

> 機能に関するご質問や追加の確認事項がある場合は、<gelatto_sales@plateer.com> までご連絡ください。

### **カスタマイズ注意事項**

* チャットボットウィジェットのサイズと位置をカスタマイズした後、管理画面「ジェラート作成 > スタイル/ウィジェット設定」に値を反映してください。

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

{% hint style="danger" %}
**チャットボットウィジェットをカスタマイズしても、管理画面でのウィジェット設定は必須です。**

チャットボットの会話画面（対話インターフェース）の位置は、ウィジェットのサイズと位置を基に調整されます。
{% endhint %}

{% hint style="warning" %}
linkToStartAutoOpen:true の場合、ボタンのレンダリング速度が遅いと、やや不自然に動作することがあります。

linkToStartAutoOpen:false（デフォルト）の場合は影響ありません。

<sub>\*linkToStartAutoOpen：gelatto.init() で提供されるリンク、またはチャットボットの回答内リンクをクリックした際、遷移先ページで自動的に会話画面を開くための設定値です。</sub>
{% endhint %}

***

## 提供関数

### **要約**

<table><thead><tr><th width="300.56640625">関数</th><th>説明</th></tr></thead><tbody><tr><td><code>gelatto.toggle()</code></td><td><ul><li>チャットボットウィジェットUIの表示/非表示を切り替え</li><li>フォーカスやスクロールを含むUI状態を安全に切り替え</li><li>デスクトップ/モバイル環境の両方に対応し、適切に切り替え処理を実行</li></ul></td></tr><tr><td><code>gelatto.layoutUpdate(widget:必須)</code></td><td><ul><li>現在の画面（デバイス/ビューポート）に合わせて、チャットボット会話画面とウィジェットボタンのレイアウトをレスポンシブ基準で再計算し、即時に反映します。</li><li><code>(widget)</code> 引数は必須です。</li></ul></td></tr></tbody></table>

{% hint style="warning" %}
**必須事項**

* `gelatto.layoutUpdate(widget)` 関数は、`(widget)` オプションを引数として渡し、即時に適用する必要があります。
* 2つの関数はいずれも初期化（init）後に呼び出してください。
  {% endhint %}

### toggle()

* **説明**：チャットボットユーザー会話画面（コンテナ）の開閉状態を切り替えます。
* **内容**
  * 閉じる → 開く：チャットボットユーザー会話画面（コンテナ）を表示し、フォーカス/スクロールを処理
  * 開く → 閉じる：チャットボットユーザー会話画面（コンテナ）を非表示にする

| 項目      | 説明 |
| ------- | -- |
| 入力パラメータ | なし |
| 戻り値     | なし |

**使用例**

```javascript
// JavaScript
// チャットボットウィジェットボタンのクリックなど、ユーザーアクションにバインド
document.getElementById('openChatBtn').addEventListener('click', () => {
  if (window.gelatto && window.gelatto.toggle) {
     gelatto.toggle();
  }
});
```

### layoutUpdate(widget)

* **説明**：チャットボットユーザー会話画面（コンテナ）とチャットボットウィジェットボタン（フローティングボタン）の位置/サイズを、現在のビューポート（デスクトップ/モバイル）に合わせて再設定します。
* **内容**
  * ビューポートに応じてモバイル/デスクトップを分岐
  * チャットボットユーザー会話画面（コンテナ）の最大サイズ、角丸、下部オフセットを計算 / 展開・縮小状態に応じてサイズを切り替え
  * チャット画面の位置・余白を再計算

<table><thead><tr><th width="272.83203125">項目</th><th>説明</th></tr></thead><tbody><tr><td>入力パラメータ</td><td><code>widget</code>（必須）：チャットボットレイアウト位置の計算に使用するオプションオブジェクト</td></tr><tr><td>戻り値</td><td>void</td></tr></tbody></table>

**widget オプションフィールドの例**

<table><thead><tr><th width="170.5859375">フィールド名</th><th width="144.0390625">タイプ</th><th>説明</th></tr></thead><tbody><tr><td>posType</td><td>string</td><td><code>'RIGHT_BOTTOM'</code> | <code>'LEFT_BOTTOM'</code> (デスクトップ位置)</td></tr><tr><td>posSide</td><td>number</td><td>デスクトップ横マージン(px)</td></tr><tr><td>posBottom</td><td>number</td><td>デスクトップ縦マージン(px)</td></tr><tr><td>mobilePosType</td><td>string</td><td><code>'RIGHT_BOTTOM'</code> | <code>'LEFT_BOTTOM'</code> (モバイル位置)</td></tr><tr><td>mobilePosSide</td><td>number</td><td>モバイル専用横マージン(px)</td></tr><tr><td>mobilePosBottom</td><td>number</td><td>モバイル専用縦マージン(px)</td></tr><tr><td>size</td><td>number</td><td>円形フローティングボタン直径(px)</td></tr></tbody></table>

**使用例**

```javascript
// JavaScript
// 新しいチャットボットの位置/余白を即時に反映したいとき
gelatto.layoutUpdate({
  posType: 'LEFT_BOTTOM',
  posSide: 24,
  posBottom: 24,
  mobilePosType: 'RIGHT_BOTTOM',
  mobilePosSide: 16,
  mobilePosBottom: 16,
  size: 56
});
```

{% hint style="warning" %}
**必須事項**

* 初期レンダリング後の動的なレイアウト変更時に呼び出し、最新のレイアウトを維持してください。
* 管理画面の設定値と同じ値を渡し、必要な部分だけ修正してください。
* SPAルーティング環境では、画面遷移時に開いている状態を閉じるなど、一貫性を保つ必要があります
  {% endhint %}

***

## **よくある質問（FAQ）**

<details>

<summary>layoutUpdate(widget) 関数を呼び出しましたが、位置が変わりません。</summary>

widget フィールド値が無効である可能性があります（例：'20px' → 20）、またはUIがまだレンダリングされていない可能性があります。

</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/getting-started/installation/chattobottowijettonokasutamaizu.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.