> ## Documentation Index
> Fetch the complete documentation index at: https://docs.lovi.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Ug webwidget ja

# ウェブウィジェット構成

Lovi のウェブウィジェットを統合し、ウェブサイトのデザインと機能を完璧に一致させる方法を学びます。

<img src="https://mintcdn.com/lovi/O5wVbHgTE_jPQc6B/images/WidgetsList.png?fit=max&auto=format&n=O5wVbHgTE_jPQc6B&q=85&s=6975ebc2214376c1e59e012e4bf9a0ef" alt="ウィジェットリスト" width="1682" height="479" data-path="images/WidgetsList.png" />

これは賢いエージェントとウェブサイト訪問者の間の橋です。

**ウェブウィジェット** は画面の隅にあるフレンドリーな小さな泡で、"こんにちは！"と言います。統合するのは簡単です——ウェブサイトにコードスニペットを追加するだけです。そして、AI エージェントが 24/7 チャットする準備が整います。

### 🎛️ ウィジェットの概要

ウィジェットコマンドセンターです。ここで作成した各チャットバブルを表示できます。

* **なぜ複数？** 価格ページに "Sales Bot" を、ヘルプセンターに "Tech Support" ボットを配置したい場合があります。ここでそれらをすべて管理します。
* **各ウィジェットの主要アクション：**
  * **📋 スクリプトをコピー：** ウェブサイトに貼り付ける魔法のコードを取得します。
  * **⚙️ 構成：** 楽しい部分。色、メッセージ、動作を調整します。

### 🎨 ウィジェットをカスタマイズ（アートクラス）

**歯車アイコン ⚙️** をクリックして構成ラボに入ります。このウィジェットを本当に自分のものにしましょう。

#### 1. 基本

* **AI エージェント：** このチャットを強化する脳。
* **言語：** サイトが英語、スペイン語、フランス語を話す場合、ウィジェットに伝えます。

#### 2. フローティングメッセージ（フック 🪝）

ボットが隠れないように！アイコンの上に魅力的なメッセージを設定します。

#### 3. ルック＆フィール（ドレスアップ）

* **ヘッダー：** トップに何を表示するかを選択します。
* **色：** ブランドに**正確に**一致する吸管ツールを使用します。

#### 4. ゲートキーパー：データ収集フォーム 📝

チャットを開始する*前に*誰と話しているかを知りたいですか？**フォーム** を有効にします。

* 名前、メール、電話を尋ねます。
* 必須またはオプションにします。

#### 5. スマートデータ収集（アドバンス 🤓）

ウィジェットがウェブサイトのデータ（`localStorage`）を覗き見ることができます。

* **役立つ方法：** ログインしている場合、"こんにちは、ジョン！" と言います。

### 🛠️ 追加の調整とレイアウト

モバイル画面をチャットが占めるようにします。

### 🎨 カスタム CSS — デザイナーズガイド

プリセットの色やオプションでは物足りませんか？**カスタム CSS** フィールドを使えば、ウィジェットの外観を完全にコントロールできます。ここでは、スタイルを微調整したり、デフォルトのクラスを上書きしたり、アニメーションを追加したりする CSS ルールを書けます。

**見つけ方:** ウィジェット設定（⚙️ アイコン）を開き、**「カスタム CSS」** セクションを展開して、テキストエリアにコードを入力します。

#### ⚙️ 内部の仕組み

ここに書く内容は魔法ではなく、理解すればかなり予測可能です：

1. あなたの CSS はウィジェット設定と一緒に保存されます。
2. ウィジェットが訪問者のウェブサイトで読み込まれると、あなたの CSS は **ウィジェット自体の内部** に `<style>` タグとして挿入されます。
3. これは私たちのデフォルトスタイルの **後** に読み込まれるため、あなたのルールが最終的な決定権を持ちます（引き分けの場合に勝ちます）。

> **🎯 重要 — 適用範囲:** カスタム CSS は **ウィジェットチャットの内部にのみ影響** し、ウェブページの他の部分には影響しません。サイトのスタイルを変更するためには使えず、ウィジェットのみです。逆もまた然り：サイトのスタイルはウィジェット内に漏れ込まないので、きれいなキャンバスから始められます。

> **💪 ルールが適用されない？** 私たちのベーススタイルは具体的なため、あなたのルールが「引き分け」になって勝てないことがあります。変更が効かない場合は、プロパティの末尾に `!important` を追加するか（例：`border-radius: 0 !important;`）、より具体的なセレクターを使ってください。

#### 🧩 使用できるセレクター

これらはウィジェット各部の実際の「タグ」です。あなたの CSS で狙ってください：

| セレクター                                               | 何か                                                |
| --------------------------------------------------- | ------------------------------------------------- |
| `.widget_chat`                                      | ウィジェット全体のルートコンテナ                                  |
| `.widget_chat_window`                               | 開いているときのチャットウィンドウ                                 |
| `.widget_chat_window_header`                        | 上部のヘッダー（アバター、タイトル、ボタン）                            |
| `.widget_chat_window_body`                          | メッセージが表示されるエリア                                    |
| `.widget_row_message`                               | 各メッセージの行（ユーザーのものには `.widget_row_message_end` を使用） |
| `.widget_message_bot`                               | エージェントのメッセージの吹き出し                                 |
| `.widget_message_content`                           | 各吹き出し内のテキスト                                       |
| `.widget_message_botones` / `.widget_message_boton` | クイック返信ボタン                                         |
| `.widget_chat_window_footer`                        | 入力する下部バー                                          |
| `#inputMessage`                                     | メッセージを入力するテキストフィールド                               |
| `.widget_form_submit`                               | 送信ボタン                                             |
| `.widget_chat_formulario`                           | データ収集フォーム（名前、メールなど）                               |
| `.widget_chat_formulario_body_input_asterisk`       | 必須項目の赤いアスタリスク                                     |
| `.widget_chat_window_footer_legends`                | フッターの "Generated by lovi.ai" の署名                  |

#### 💡 実用的な例

**影付きでより角張ったボットの吹き出し:**

```css theme={null}
.widget_message_bot {
  border-radius: 6px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}
```

**メッセージのテキストを大きくする:**

```css theme={null}
.widget_message_content {
  font-size: 16px !important;
  line-height: 1.5;
}
```

**ブランドのグラデーション付きヘッダー:**

```css theme={null}
.widget_chat_window_header {
  background: linear-gradient(90deg, #6a11cb, #2575fc) !important;
}
```

**入力エリアにゆとりを持たせる:**

```css theme={null}
.widget_chat_window_footer {
  padding: 14px !important;
}
```

> **🧪 公開する前に必ずプレイグラウンドでテストしてください**（下記参照）。`}` を 1 つ忘れると、複数のスタイルが一度に壊れることがあります。

***

### 🧪 テストドライブ（プレイグラウンド）

ライブサイトにコードを貼り付ける前に、試してみましょう。