# Виджет для сайта

**Виджет** — это встраиваемый модуль онлайн-чата, размещаемый на сайте для взаимодействия посетителей с ИИ-агентом.

В интерфейсе сайта виджет отображается в виде кнопки. При нажатии открывается окно чата.

Если в настройках [добавлены дополнительные каналы связи](#id-5.-dobavlenie-kanalov-svyazi-multividzhet), виджет работает в формате мультивиджета. В этом случае при нажатии отображаются:

* иконка чата;
* иконки подключённых мессенджеров (ВКонтакте, WhatsApp, Telegram, MAX).

**Логика работы**

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

<figure><img src="/files/9OH6putg3FDhbX3TL87m" alt=""><figcaption></figcaption></figure>

<div><figure><img src="/files/PJa0Ni5nkAKQLeUvSuL6" alt=""><figcaption></figcaption></figure> <figure><img src="/files/BlgZurMQlBcB8eesvQv0" alt=""><figcaption></figcaption></figure></div>

## **Как создать виджет**

Чтобы создать Виджет:

1. Перейдите в раздел **Интеграции** -> **Чат на сайт.**
2. Во вкладке **Виджет для сайта** (открывается по умолчанию) нажмите на кнопку **Создать чат**.

<figure><img src="/files/1CayHCBFTuBQnHL1kIap" alt=""><figcaption></figcaption></figure>

## Как настроить виджет

Настройка виджета выполняется в правой секции интерфейса.

Все изменения отображаются в блоке предварительного просмотра ("Контейнер для генерации виджета" в центральной секции).

{% hint style="warning" %}
После любых настроек виджета необходимо[ **сохранить изменения** ](#sokhranenie-i-sbros-nastroek)и[ **встроить обновленный код виджета в код Вашего сайта.**](#kak-dobavit-vidzhet-na-vash-sait)

Изменения вступают в силу на сайте **ТОЛЬКО** после замены кода.
{% endhint %}

### 1. Настройка шапки виджета

Вы можете изменить:

* текст заголовка;
* цвет фона;
* цвет текста.

Цвет можно указать:

* вручную (HEX-код, например `#1F6BFF`);
* через встроенную палитру выбора цвета (для этого нажмите на квадратную иконку с отображением выбранного цвета рядом с полем ввода HEX-кода цвета).

Изменения сразу отображаются в области предварительного просмотра.

<div><figure><img src="/files/HskdvlrW2AtldvKIId7T" alt=""><figcaption></figcaption></figure> <figure><img src="/files/Qorp7XCso87nsSIkbahz" alt="" width="375"><figcaption></figcaption></figure></div>

### 2. Настройка окна чата

### Язык интерфейса

Выберите язык отображения даты и системных элементов:

* Русский
* Английский
* Белорусский
* Казахский
* Узбекский
* Таджикский
* Азербайджанский
* Армянский
* Грузинский

{% hint style="info" %}
Язык влияет только на интерфейс виджета, а не на язык ответов ИИ-агента.
{% endhint %}

<div><figure><img src="/files/RT9F7l52tOPGfNZRE0Sp" alt=""><figcaption></figcaption></figure> <figure><img src="/files/q0bcXjRKoLoDXEgCHRy0" alt=""><figcaption></figcaption></figure></div>

### Текст в поле ввода

Вы можете изменить текст-подсказку (placeholder) в поле ввода сообщения.\
Например:

> Задайте вопрос\
> Напишите ваше сообщение...\
> Чем можем помочь?

<div><figure><img src="/files/hgU8uvxfGzJwtGlXRday" alt=""><figcaption></figcaption></figure> <figure><img src="/files/VQEZlxhZOkmdrVdBQLrl" alt=""><figcaption></figcaption></figure></div>

### Стартовое сообщение

Это первое сообщение, которое пользователь видит при открытии чата.

Можно:

* оставить текст по умолчанию;
* указать собственное приветствие.

<div><figure><img src="/files/uSphki0DTCv7mHWcx3RF" alt=""><figcaption></figcaption></figure> <figure><img src="/files/SbjLmS1FNSOWHuou5luZ" alt=""><figcaption></figcaption></figure></div>

### Фон чата

Можно выбрать:

* цвет фона чата
* фоновое изображение в виде паттерна (монохромного повторяющегося рисунка на прозрачном фоне).

Для фонового изображения доступна настройка интенсивности:

* Тёмный
* Серый
* Светлый

Если выбрать «Не установлено» — паттерн применяться не будет.

<div><figure><img src="/files/cP3WYbA7uCvwsUcRs62m" alt=""><figcaption></figcaption></figure> <figure><img src="/files/zp9Ht8uvzAnez7Dg93mt" alt=""><figcaption></figcaption></figure></div>

### 3. Настройка сообщений

Вы можете отдельно настроить:

* цвет фона сообщений ИИ-агента;
* цвет текста ИИ-агента;
* цвет фона сообщений пользователя;
* цвет текста пользователя.

<div><figure><img src="/files/QymyzXjRcXZQdNlZwZzH" alt=""><figcaption></figcaption></figure> <figure><img src="/files/AiSG0vNeMb14YgU4igAM" alt=""><figcaption></figcaption></figure></div>

### 4. Настройка иконки чата

Можно изменить:

* форму иконки;
* цвет фона;
* цвет линии иконки.

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

### Стандартный цвет иконок мессенджеров

Если переключатель активирован — иконки WhatsApp, Telegram и других каналов будут отображаться в их стандартных цветах.

Если переключатель выключен — выбранный цвет будет применён ко **ВСЕМ** иконкам.

<div><figure><img src="/files/CdYfnbvJVv73OTzFVZ47" alt=""><figcaption><p>Активирован</p></figcaption></figure> <figure><img src="/files/tKCZZsdHIMpGdFEUtnGv" alt=""><figcaption><p>Не активирован</p></figcaption></figure></div>

### 5. Добавление каналов связи (мультивиджет)

Вы можете добавить ссылки на:

* WhatsApp (номер в международном формате, например, `+79123456789`)
* Telegram (`https://t.me/username`)
* VK (`https://vk.com/...`)
* MAX (`https://max.ru/...`)

Если каналы добавлены — при нажатии на кнопку пользователь увидит список способов связи.

Если каналы не указаны — будет открываться только чат с ИИ-агентом.

<div><figure><img src="/files/2lCwQZI8nz7JpQqXZXdt" alt="" width="375"><figcaption></figcaption></figure> <figure><img src="/files/MGnaG5ixwqK8qQZn4mXP" alt="" width="375"><figcaption></figcaption></figure></div>

### 6. Настройка автоприглашения

**Автоприглашение** — это всплывающее окно рядом с иконкой чата.

**Особенности автоприглашения:**

* появляется через заданное количество секунд после открытия страницы с виджетом;
* сопровождается звуком;
* открывает чат при нажатии;
* закрывается при нажатии на кнопку закрытия ("крестик").

Чтобы отключить автоприглашение — установите значение **0 секунд**.

<div><figure><img src="/files/LaXIKtu3VzwfEq9iNTpS" alt=""><figcaption></figcaption></figure> <figure><img src="/files/lMCN415MSL4ABV9NylVG" alt="" width="317"><figcaption></figcaption></figure></div>

### 7. Отступы от края экрана

Вы можете задать:

* отступ снизу (px);
* отступ справа (px).

Это помогает:

* избежать перекрытия с кнопками сайта;
* повысить удобство использования.

<figure><img src="/files/4jE6rS7QiVOEtKStHflK" alt="" width="344"><figcaption></figcaption></figure>

### 8. Стили формы персональных данных

Если в агенте есть функция с действием "[Форма персональных данных"](/functional/functions/sending-result/forma-personalnykh-dannykh.md), в настройках виджета вы можете персонализировать внешний вид формы, которая открывается внутри чата.

Подробнее про настройку стилей формы персональных данных вы можете узнать в статье: [Стили формы персональных данных в чате на сайт](/functional/integrations/chat-na-sait/stili-formy-personalnykh-dannykh-v-chate-na-sait.md).

## Сохранение и сброс настроек

После всех внесенных изменений обязательно нажмите кнопку **Сохранить**.

Кнопка **Сбросить** возвращает все изначальные настройки виджета.

<figure><img src="/files/YOwUnQzfaNoUxPqrT8p1" alt="" width="377"><figcaption></figcaption></figure>

## Предварительный просмотр виджета

Все изменения отображаются в блоке предварительного просмотра ("Контейнер для генерации виджета" в центральной секции).

<div><figure><img src="/files/qUg918hJ2kpJIsBQ0IlD" alt=""><figcaption></figcaption></figure> <figure><img src="/files/MCKb1c9unWORL4Ya6gDX" alt=""><figcaption></figcaption></figure></div>

{% hint style="warning" %}
Ссылки, открываемые из чата, запускаются в отдельном окне браузера.
{% endhint %}

## **Как добавить виджет на ваш сайт**

**Шаг 1.** Нажмите на кнопку **"Встроить на сайт"**:

<figure><img src="/files/p0GG7piCCp6qi020Q1Yt" alt="" width="375"><figcaption></figcaption></figure>

**Шаг 2.** Появится окно с код**о**м.

1. Выберите версию виджета:

* **Международная**
* **Для России**
* **Для Казахстана**

2. Нажмите кнопку **Копировать**

<div><figure><img src="/files/oLF27lQbKjfnZEaXes0w" alt=""><figcaption></figcaption></figure> <figure><img src="/files/uYGzVhumZr2GKQubZNa9" alt=""><figcaption></figcaption></figure></div>

**Шаг 3.** Вставьте код в тело вашего сайта перед закрывающим

```html
</body>
```

Виджет чата теперь активен на вашем сайте!

{% hint style="warning" %}
После любых настроек виджета необходимо[ **сохранить изменения** ](#sokhranenie-i-sbros-nastroek)и[ **встроить обновленный код виджета в код Вашего сайта.**](#kak-dobavit-vidzhet-na-vash-sait)

Изменения вступают в силу на сайте **ТОЛЬКО** после замены кода.
{% endhint %}

## Как открыть чат по кнопке на вашем сайте

Если на сайте есть кнопка, например **«Связаться с менеджером»**, и вы хотите, чтобы при её нажатии открывался чат — добавьте событие JavaScript:

{% code overflow="wrap" %}

```javascript
onclick="window.dispatchEvent(new Event('openChatWidgetNB'))"
```

{% endcode %}

Код вашей кнопки должен получить такой вид

{% code overflow="wrap" %}

```html
<button type="button" onclick="window.dispatchEvent(new Event('openChatWidgetNB'))">
  Связаться с менеджером
</button>
```

{% endcode %}


---

# 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://doc.nextbot.ru/functional/integrations/chat-na-sait/vidzhet-dlya-saita.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.