> ## 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.

# Настройка веб-виджета

> В этом разделе вы узнаете, как интегрировать и настроить веб-виджет Lovi, чтобы он идеально соответствовал дизайну и функциональности вашего сайта

<img src="https://mintcdn.com/lovi/O5wVbHgTE_jPQc6B/images/WidgetsList.png?fit=max&auto=format&n=O5wVbHgTE_jPQc6B&q=85&s=6975ebc2214376c1e59e012e4bf9a0ef" alt="Web Widget List" width="1682" height="479" data-path="images/WidgetsList.png" />

Это мост между вашим умным агентом и посетителями сайта.

**Веб-виджет** — это дружелюбный пузырёк в углу экрана, который говорит «Привет!». Интеграция проста: вы добавляете фрагмент кода на свой сайт, и вуаля! Ваш AI-агент готов общаться 24/7 без вашего участия.

### 🎛️ Обзор ваших виджетов

Это ваш командный центр виджетов. Здесь вы видите каждый созданный пузырёк чата.

* **Зачем больше одного?** Вы можете захотеть «Бота продаж» для страницы цен и «Бота техподдержки» для справочного центра. Здесь вы управляете всеми.
* **Ключевые действия для каждого виджета:**
  * **📋 Копировать скрипт:** Скопируйте код для вставки на ваш сайт.
  * **⚙️ Настроить:** Самая интересная часть. Настройте цвета, сообщения и поведение (мы перейдём к этому далее).
  * **🗑️ Удалить:** Удалите, если он больше не нужен.

***

### 🎨 Настройка виджета (Мастер-класс)

Нажмите на **значок шестерёнки ⚙️**, чтобы войти в лабораторию настройки. Сделаем этот виджет по-настоящему вашим.

#### 1. Основное

* **AI-агент:** Какой мозг управляет этим чатом? Выберите одного из ваших агентов из списка.
* **Языки:** Ваш сайт говорит на русском, английском и французском? Сообщите виджету, чтобы он не выглядел глупо.

#### 2. Всплывающее сообщение (Крючок 🪝)

Не позволяйте боту прятаться! Установите привлекательное сообщение, которое появляется над иконкой.

* *Скучно:* «Чат здесь.»
* *Лучше:* «Привет! Нужна помощь с заказом? 👋»

> **⚠️ Внимание:** Добавьте переводы для всех языков. Вы не хотите, чтобы англоязычные посетители видели пустой пузырёк!

#### 3. Внешний вид (Оденьтесь по моде)

* **Заголовок:** Выберите, что показывать вверху. Просто заголовок? Ваш логотип? Аватар робота в монокле? Решать вам.
* **Цвета:** Используйте пипетку 🖊️ для **точного** соответствия вашему бренду.
  * *Основной цвет:* Пузырьки сообщений и кнопка отправки.
  * *Цвет текста:* Убедитесь, что он читаемый! Жёлтый текст на белом фоне — преступление против зрения.

#### 4. Сборщик данных: Формы сбора информации 📝

Хотите знать, с кем общаетесь, *перед* началом чата? Включите **Форму**.

* Спросите **Имя, Email или Телефон**.
* Сделайте поля «Обязательными», если вы строги, или «Необязательными», если более лояльны.
* **GDPR / Конфиденциальность:** Добавьте ссылку на вашу политику, чтобы оставаться в рамках закона. 👮‍♂️

#### 5. Умный сбор данных (Продвинутый 🤓)

Это для технических специалистов. Виджет может заглянуть в данные вашего сайта (`localStorage`), чтобы проверить, авторизован ли пользователь.

* **Как это помогает:** Если пользователь авторизован, виджет может сказать *«Привет, Иван!»* вместо запроса имени.
* **Настройка:** Вы указываете нам «Ключ» (например, `user_email`), и мы автоматически получаем значение.

***

### 🛠️ Дополнительные настройки и расположение

Тонкая настройка:

* **Позиция:** Слева или Справа? (Справа — стандарт, Слева — для бунтарей).
* **Полный экран:** Хотите, чтобы чат занял весь мобильный экран? Включите это.
* **Встроенный (DOM-элемент):** Вместо плавающего пузырька, закрепите чат постоянно внутри `<div>` на странице. Отлично для страниц «Свяжитесь с нами».
* **Пользовательский CSS:** Если вы знаете код, можете написать собственные стили для переопределения наших. Небо — это предел.

***

### 🎨 Пользовательский 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`                           | Форма сбора данных (имя, email и т. д.)                                                    |
| `.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;
}
```

> **🧪 Всегда тестируйте в Playground** (см. ниже) перед публикацией. Забытая `}` может сломать несколько стилей сразу.

***

### 🧪 Тест-драйв (Playground)

Прежде чем вставить код на рабочий сайт, протестируйте в **Playground**.

* Цвета не конфликтуют?
* Агент ведёт себя вежливо?
* Форма работает?

**Когда вы довольны, скопируйте скрипт и запускайте! 🚀**