# Создание виджета для сторонних сайтов

Раздел **«Чат-боты»** позволяет создавать и размещать ботов на сторонних сайтах или в мессенджерах.  
Для работы на сайте используется **тип бота «Виджет»**. Он встраивается в HTML-код страницы и взаимодействует с посетителями через всплывающее окно чата.

---

### 1. Как открыть раздел

[![image.png](https://docs.ai-assistant.is74.ru/uploads/images/gallery/2025-10/scaled-1680-/image.png)](https://docs.ai-assistant.is74.ru/uploads/images/gallery/2025-10/image.png)

1. Перейдите в левое меню платформы.
2. Откройте раздел **«Чат-боты»**.
3. Нажмите кнопку **«Добавить чат-бота»** в правом верхнем углу.

[![image.png](https://docs.ai-assistant.is74.ru/uploads/images/gallery/2025-10/scaled-1680-/eUSimage.png)](https://docs.ai-assistant.is74.ru/uploads/images/gallery/2025-10/eUSimage.png)

Откроется модальное окно создания бота.

---

### 2. Шаг 1. Основные параметры

[![image.png](https://docs.ai-assistant.is74.ru/uploads/images/gallery/2025-10/scaled-1680-/oCsimage.png)](https://docs.ai-assistant.is74.ru/uploads/images/gallery/2025-10/oCsimage.png)

Заполните поля:

- **Название** — будет отображаться в списке чат-ботов.
- **Описание** — кратко опишите назначение бота, например: *«Консультирует по услугам центра»*.
- **Тип бота** — выберите **«Виджет»** из выпадающего списка.

> По умолчанию выбран тип **Telegram**. Для создания Telegram-бота см. [отдельную инструкцию](https://docs.ai-assistant.is74.ru/books/instrukcii-po-razdelam/page/instrukciia-po-sozdaniiu-telegram-bota).

Нажмите **«Далее»**, чтобы перейти к настройкам.

---

### 3. Шаг 2. Настройки бота

[![image.png](https://docs.ai-assistant.is74.ru/uploads/images/gallery/2025-10/scaled-1680-/393image.png)](https://docs.ai-assistant.is74.ru/uploads/images/gallery/2025-10/393image.png)

На этом шаге задаются параметры работы бота.

- **Имя бота** — имя, которое будет отображаться пользователям в чате как отправитель сообщений.
- **Подключение сценария к боту** — выберите сценарий и стартовый блок. Подключить сценарий можно и позже через окно редактирования.
- **Параметры диалога** — установите *максимальное время диалога*.  
    Это время, после которого сессия автоматически завершается и отображается в аналитике (по умолчанию — 12 часов).

После заполнения нажмите **«Добавить чат-бота и сгенерировать код»**.

---

### 4. Получение и размещение кода

После сохранения система автоматически сгенерирует HTML-код для вставки виджета на сайт.[![image.png](https://docs.ai-assistant.is74.ru/uploads/images/gallery/2025-10/scaled-1680-/61cimage.png)](https://docs.ai-assistant.is74.ru/uploads/images/gallery/2025-10/61cimage.png)

**Как вставить код:**

1. Скопируйте код, нажав **«Копировать код»**.
2. Вставьте его **перед закрывающим тегом `</body>`** в HTML-коде страницы сайта.
3. Сохраните изменения на сайте.

---

### 5. Проверка работы и взаимодействие с пользователем

После добавления виджет будет отображаться на сайте как всплывающее окно чата.  
Пользователи смогут общаться с ботом в реальном времени.

[![image.png](https://docs.ai-assistant.is74.ru/uploads/images/gallery/2025-10/scaled-1680-/Jlrimage.png)](https://docs.ai-assistant.is74.ru/uploads/images/gallery/2025-10/Jlrimage.png)

Если во время работы сценария произойдёт ошибка, в чате появится сообщение об ошибке и кнопка **«Перезапустить чат»**.  
Нажатие кнопки перезапускает диалог без необходимости обращаться к разработчику.

[![image.png](https://docs.ai-assistant.is74.ru/uploads/images/gallery/2025-10/scaled-1680-/ye5image.png)](https://docs.ai-assistant.is74.ru/uploads/images/gallery/2025-10/ye5image.png)

---

### 6. Редактирование и удаление чат-бота

[![image.png](https://docs.ai-assistant.is74.ru/uploads/images/gallery/2025-10/scaled-1680-/Rgjimage.png)](https://docs.ai-assistant.is74.ru/uploads/images/gallery/2025-10/Rgjimage.png)

- Чтобы изменить настройки, нажмите **иконку шестерёнки ⚙️** в списке чат-ботов.  
    Откроется модальное окно настроек.
    
    [![image.png](https://docs.ai-assistant.is74.ru/uploads/images/gallery/2025-10/scaled-1680-/wxVimage.png)](https://docs.ai-assistant.is74.ru/uploads/images/gallery/2025-10/wxVimage.png)
- Здесь можно:
    
    
    - изменить название, описание, сценарий или имя бота;
    - сгенерировать новый код вставки;
    - удалить бота с помощью кнопки **«Удалить чат-бота»**.

> Настройка доступна только пользователям, имеющим права на создание и редактирование чат-ботов.

---

### 7. Список чат-ботов

[![image.png](https://docs.ai-assistant.is74.ru/uploads/images/gallery/2025-10/scaled-1680-/FCCimage.png)](https://docs.ai-assistant.is74.ru/uploads/images/gallery/2025-10/FCCimage.png)

В списке отображаются все созданные чат-боты проекта.  
Для каждого указываются:

- **Название и тип** (Telegram или Виджет);
- **Статус подключения**;
- **Сценарий**, с которым связан бот.

Если возникла ошибка подключения, бот останется в списке. Настройки можно отредактировать, чтобы устранить причину и сгенерировать новый код.

---

### 8. Пример использования

Виджет-бот можно разместить:

- на главной странице сайта компании — для консультаций посетителей;
- на странице обратной связи — для записи на приём или оформления заявки;
- в интернет-магазине — для помощи при выборе товара.

</body>