> For the complete documentation index, see [llms.txt](https://docs.mavibot.ai/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.mavibot.ai/doc/ru/chatbot/live-chat.md).

# Онлайн-чат на сайте

Установив онлайн-чат на свой сайт, вы сможете собирать данные клиентов и автоматизировать общение с посетителями прямо на сайте.

Вы также можете подключить к чату свою команду продаж, чтобы менеджеры могли присоединяться к диалогам с клиентами. Общение может вестись либо через веб-интерфейс MaviBot, либо через наши мобильные приложения для Android и iOS.

## Как создать сайт с Live Chat

Чтобы создать чат, перейдите в раздел «Мессенджеры» и нажмите кнопку «Live chat».

<div data-with-frame="true"><figure><img src="/files/6e6bc7b4f8d464ac002f40d52e03f14a27ed01fb" alt=""><figcaption></figcaption></figure></div>

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

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

## Настройки

### Оформление

<div data-with-frame="true"><figure><img src="/files/f6632f00894e1c6152d45c535ce54831f1ff737c" alt="" width="563"><figcaption></figcaption></figure></div>

1. **Заголовок чата**

Это поле задаёт название онлайн-чата — оно будет отображаться в самом верху окна чата.&#x20;

2. **Подзаголовок чата**

Это поле находится под заголовком чата и позволяет уточнить роль или назначение онлайн-чата на вашем сайте.

3. **Заданная подпись виджета**

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

4. **Приветственное сообщение чата**

Это поле содержит текст приветственного сообщения бота

<div data-with-frame="true"><figure><img src="/files/7754ea7d686386e675455523c27a0a6d926cd1d5" alt=""><figcaption></figcaption></figure></div>

5. **Выравнивание текста**

С помощью панели выравнивания текста вы можете выровнять заголовок и подзаголовок чата по левому краю, по правому краю или по центру — как в стандартных текстовых редакторах.

<div data-with-frame="true"><figure><img src="/files/1bee0224cf9d4fa873ba143f050148a736aad16a" alt="" width="177"><figcaption></figcaption></figure></div>

6. Кнопка чата

<div data-with-frame="true"><figure><img src="/files/9be7d5a9c5c3166859ce7aea8062ebe9e8c6aa97" alt="" width="375"><figcaption></figcaption></figure></div>

Эта кнопка предназначена для открытия онлайн-чата при нажатии.&#x20;

Вы можете выбрать, как кнопка онлайн-чата будет отображаться на разных устройствах: на десктопной версии сайта&#x20;

Доступно несколько вариантов отображения. Вы можете расположить кнопку как справа, так и слева.

7. Цветовая палитра

Чтобы настроить онлайн-чат по своему вкусу, вы можете не только изменить цвет, но и добавить интересные узоры на фон и в шапку чата.

<div data-with-frame="true"><figure><img src="/files/16c8d4bffbaf0c22109b5e0ff5948c00cc450fcc" alt="" width="563"><figcaption></figcaption></figure></div>

Вы также можете выбрать цвет и яркость узоров, а также других элементов онлайн-чата. Для этого включите флажок «Расширенные настройки».

Вы также можете настроить дополнительные расширенные цветовые параметры онлайн-чата.

8. Аватар онлайн-чата

<div data-with-frame="true"><figure><img src="/files/20f12ff3ded5c2cbb86d1d6c651fc655b46f9d9c" alt="" width="563"><figcaption></figcaption></figure></div>

Эта опция позволяет изменить аватар помощника в онлайн-чате. Аватар можно добавить либо по URL, либо загрузив файл.

При необходимости вы также можете скрыть аватар чата, включив этот флажок.

9. **Логотип MaviBot**

Настройки позволяют отображать логотип MaviBot.

<div data-with-frame="true"><figure><img src="/files/06c05fec631fad1014a46849c5b267349aa8c4e8" alt="" width="369"><figcaption></figcaption></figure></div>

### Настройки

<div data-with-frame="true"><figure><img src="/files/d95c983cc1bb2f881cd6b2a08f5e4dc994def102" alt="" width="563"><figcaption></figcaption></figure></div>

1. **Текст внутри поля ввода**

По умолчанию в этом поле указан текст: «Введите сообщение и нажмите Enter».

Вы можете изменить этот текст или оставить значение по умолчанию.

2. **Надпись в мобильной версии**

По умолчанию текст установлен как: «Выберите предпочитаемый способ связи».

3. **Сообщение при назначении оператора клиенту**&#x20;

Если вы укажете в этом поле #{operatorName}, будет отображаться имя оператора, указанное в разделе «Сотрудники».

Назначить оператора можно вручную, нажав кнопку «Взять клиента» или «Передать клиента» во время диалога с клиентом. Также можно настроить автоматическое распределение клиентов между операторами в разделе «Сотрудники».&#x20;

<div data-with-frame="true"><figure><img src="/files/87ff45b9d6bf03faace30d6622c29b57b2948173" alt="" width="563"><figcaption></figcaption></figure></div>

4. **Сообщение при офлайн-операторах**

По умолчанию будет отображаться следующее сообщение:
&#x20;«Сейчас нет операторов онлайн. Оставьте нам сообщение, и мы свяжемся с вами как можно скорее.»

Статус «Онлайн» для бота берётся из раздела «Сотрудники». Возможные статусы: Онлайн, Перерыв и Оффлайн.

<div data-with-frame="true"><figure><img src="/files/d5dfac9d65699f7f6be29c8a351080cdcef7a1ef" alt="" width="563"><figcaption></figcaption></figure></div>

Вы также можете изменить свой статус в верхней панели в любом разделе проекта

5. **Звуковые уведомления в онлайн-чате**

Эти настройки позволяют включать или отключать звуковые оповещения об открытии чата и новых сообщениях в онлайн-чате для посетителей сайта.

6. **Показывать мессенджер**

<div data-with-frame="true"><figure><img src="/files/cfaf6ffa5b5dfb83abc295bcde6ad689952e0590" alt="" width="367"><figcaption></figcaption></figure></div>

Вы можете выбрать, какие мессенджеры будут отображаться на сайте при наведении на виджет онлайн-чата (иконку).

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

7. **Показывать только мессенджеры**

Если включить этот переключатель, на сайте будут отображаться только кнопки мессенджеров. *Все остальные функции онлайн-чата будут отключены!*

<div data-with-frame="true"><figure><img src="/files/785a1f372b5d3fe1dbd55945517c02ab257def01" alt="" width="563"><figcaption></figcaption></figure></div>

8. **Текст мессенджера**

По умолчанию установлено: «Написать в».

<div data-with-frame="true"><figure><img src="/files/1ce8dc32181ab68e61da555cdbb6a7e3b08bfcca" alt="" width="563"><figcaption></figcaption></figure></div>

9. **Стартовое сообщение WhatsApp**&#x20;

Этот текст появится в поле ввода у пользователя в WhatsApp, когда он нажмёт кнопку на вашем сайте. Пользователю останется только нажать «Отправить».

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

<div data-with-frame="true"><figure><img src="/files/8ce72212fabeadcf23bc501d279de8d2f8b35e49" alt="" width="375"><figcaption></figcaption></figure></div>

10. **Пользовательские ссылки**

Кроме кнопок мессенджеров, теперь можно добавлять собственные кнопки с пользовательскими ссылками.

В настройках вы можете указать URL ссылки и добавить изображение.

<div data-with-frame="true"><figure><img src="/files/21fbb605ebc310fc21d66b5b02c8d1893c37c09a" alt="" width="563"><figcaption></figcaption></figure></div>

11. Загрузка файлов

Эта настройка позволяет получать вложения от посетителей сайта, например изображения.

<div data-with-frame="true"><figure><img src="/files/18754ad0d63ec50c63764407d70d0a6405deb62e" alt="" width="375"><figcaption></figcaption></figure></div>

{% hint style="warning" %}
Максимальный размер файла для входящих загрузок через онлайн-чат — 20 МБ.
{% endhint %}

12. **Данные пользователя**

В первом сообщении вы можете получить согласие на обработку персональных данных и/или собрать информацию о пользователе через форму сбора данных. Также можно задать или изменить адрес электронной почты через окно приветствия.

<div data-with-frame="true"><figure><img src="/files/9f9dd1c2f99aabe196e046b2a0c8e506ff97a673" alt="" width="375"><figcaption></figcaption></figure></div>

Заполнение формы может быть необязательным или обязательным при включении "*Сделать заполнение формы обязательным"* переключателя.

Пример первого сообщения со сбором данных.

<div data-with-frame="true"><figure><img src="/files/f5f086d4320d6c49d7a68a249c9b5a605c8cfa0d" alt="" width="375"><figcaption></figcaption></figure></div>

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

<div data-with-frame="true"><figure><img src="/files/15541ce34c8bbf94caba8b0e4681c2a332a455ae" alt="" width="375"><figcaption></figcaption></figure></div>

13. Запрос обратного звонка

Флажок «Запрос обратного звонка» появляется в настройках онлайн-чата, если в проекте включена телефония.

#### *Как это работает*

При заполнении формы пользователь может поставить галочку для запроса обратного звонка. В этом случае автоматически выбирается один из сотрудников, у которого включена телефония, и клиенту совершается звонок.

{% hint style="info" %}
Сотрудник назначается автоматически. При выборе сотрудника проверяются следующие условия:

* Статус: На смене
* Любая роль, включая администратора
* Для сотрудника включена (настроена) телефония

После звонка этот сотрудник будет назначен ответственным за пользователя.
{% endhint %}

14. Запрос согласия на обработку персональных данных&#x20;

<div data-with-frame="true"><figure><img src="/files/3dd230f7c54aed6c0bae4dbcf4d7cbd8ff430594" alt="" width="563"><figcaption></figcaption></figure></div>

По умолчанию эта опция отключена. При включении появится сообщение «Я даю согласие на обработку персональных данных» и кнопка **"Подтвердить"** появятся при первом запуске онлайн-чата.

Пример первого сообщения для получения согласия на обработку персональных данных:

15. Настройки кнопки запуска

<div data-with-frame="true"><figure><img src="/files/ff52004f4f03cf028656dbb6d1345925b86fd044" alt="" width="264"><figcaption></figcaption></figure></div>

Нажатие на ***"Добавить кнопку"*** открывает форму создания кнопки запуска:

<div data-with-frame="true"><figure><img src="/files/c7681284fdd86483e87d4eaf10d02b629662d4e3" alt="" width="563"><figcaption></figcaption></figure></div>

Кнопка может выполнять одну из следующих функций:

* **Ссылка**. Позволяет добавить URL для перехода на другую страницу вашего сайта или внешний веб-ресурс.
* **Электронная почта**. Клиент будет перенаправлен в свою почтовую службу, чтобы отправить сообщение на адрес электронной почты, указанный в настройках кнопки.
* **Телефон**. Запускается приложение для звонка, либо пользователю предлагается выбрать приложение для совершения звонка — в зависимости от используемого устройства. Звонок будет совершен на номер, указанный в настройках кнопки.
* **Сообщение (от администратора / пользователя)** — эта функция позволяет боту отправлять быстрые ответы при нажатии на кнопку.

Например, вы можете создать кнопку с названием «Адрес», а в поле «Сообщение» указать точный адрес и часы работы.

{% hint style="info" %}
Текст в поле «Сообщение» будет без переносов строк. Пожалуйста, учитывайте это при работе.
{% endhint %}

* **Разделять клиентов из разных доменов.** Эта настройка позволяет разделять диалоги, если один и тот же человек пишет в онлайн-чат, размещённый на разных доменах. По умолчанию это считается одним и тем же диалогом.

<div data-with-frame="true"><figure><img src="/files/b3d593367519e94e22f47b0698895e59597c8a05" alt="" width="375"><figcaption></figcaption></figure></div>

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

* **Кнопки в тексте будут отображаться в истории онлайн-чата (переключатель).** Включите эту опцию, чтобы показывать кнопки из текста конструктора воронки в истории онлайн-чата клиента.

16. Скрыть онлайн-чат

<div data-with-frame="true"><figure><img src="/files/89a23c8e28d19aceed383f000705175dffdc7306" alt="" width="207"><figcaption></figcaption></figure></div>

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

### Автоматические действия

Автоматические действия работают следующим образом: чтобы автоматическое действие сработало, для него необходимо задать конкретное условие-триггер.

<div data-with-frame="true"><figure><img src="/files/500a8b9831a8723b2e0e36ec4bfc1e831de333f5" alt="" width="375"><figcaption></figcaption></figure></div>

Сначала задайте условия, при которых должно выполняться пользовательское действие. Вы можете добавить условия по времени суток, стране посетителя, городу, URL текущей страницы и так далее.

<div data-with-frame="true"><figure><img src="/files/bbf6ac0d7da7916118f1c3cf721e2254b057dd51" alt="" width="563"><figcaption></figcaption></figure></div>

Подробнее об условиях:

<div data-with-frame="true"><figure><img src="/files/e59fa620c41a9c971173bcbb0ebca55d20469ad7" alt="" width="563"><figcaption></figcaption></figure></div>

1. **Текущее время.** Настройте автоматический запуск онлайн-чата в зависимости от периода времени, когда клиент взаимодействует с чатом (например, в «счастливые часы» после 16:00 посетитель вашей посадочной страницы может получить скидку).
2. **Выполнять это действие только один раз в день для пользователя.** Это условие можно применять в разных случаях: например, чтобы отправлять партнерские или другие ссылки в сообщениях от администратора/пользователя (например, доступ к новым материалам курса); для системы лояльности или накопительной системы; и так далее.
3. **Город пользователя /** Страна пользователя.  Задав это условие, вы можете нацелиться на определённую группу пользователей, которым будет полезна ваша услуга — например, когда для покупки товара или услуги требуется физическое присутствие клиента.

В этом случае вы можете задать условие как равно или не равно. Например, если нужно указать город или страну (или список стран), для которых автоматическое действие не должно срабатывать, выберите «не равно».&#x20;

4. **День недели**.
   &#x20;Это условие служит триггером для автоматических действий в зависимости от дня недели. Вы можете выбрать флажки рядом с днями недели, задать условие равно или не равно и выбрать автоматическое действие, которое будет выполняться онлайн-чатом.

Например, можно указать все рабочие дни ваших операторов/менеджеров, чтобы затем обеспечить их дальнейшую связь с клиентами.&#x20;

5. **URL текущей страницы**. Автоматическое действие сработает в зависимости от того, содержит/не содержит ли URL или равен/не равен указанной ссылке.
6. **Сообщение пользователя**. Чтобы автоматическое действие сработало при этом условии, поле должно содержать определённое слово от пользователя.

<div data-with-frame="true"><figure><img src="/files/f8354d346ea43414d7c7deed59d978a347f21c0d" alt="" width="563"><figcaption></figcaption></figure></div>

6. **Время на странице**. Это условие похоже на время суток; однако если база клиентов распределена по разным часовым поясам, вам нужно, чтобы это автоматическое действие срабатывало в одно и то же локальное время для каждого часового пояса.
7. **Время с момента закрытия окна MAviBot**. Это условие задаётся аналогично времени суток или времени на странице, но зависит от действия пользователя по закрытию окна Salebot.
8. **Время с момента первого сообщения посетителя.** Автоматическое действие сработает через указанный период (в секундах) после первого сообщения клиента в онлайн-чате.
9. **Время без ответа оператора с момента первого сообщения пользователя**. Это условие тоже задаётся в секундах и срабатывает независимо от того, ответил ли оператор клиенту или нет.

При необходимости условия можно объединять, чтобы автоматическое действие срабатывало по нескольким критериям:

<div data-with-frame="true"><figure><img src="/files/e7b6625947bc27941ce5a06e40a0852a335dbb5a" alt="" width="563"><figcaption></figcaption></figure></div>

Далее выберите, какое действие онлайн-чат должен выполнять автоматически:

<div data-with-frame="true"><figure><img src="/files/3273fc54a7624b6a190438e2886aae470d9f0609" alt="" width="563"><figcaption></figcaption></figure></div>

1. **Автоматическое открытие чата**. Это действие автоматически открывает онлайн-чат для пользователя. Дополнительная настройка не требуется.
2. **Автоматическое приглашение в чат**. Это автоматическое действие отправляет пользователю заранее заданное сообщение, введённое в соответствующем поле. При необходимости вы также можете скрыть поле ввода сообщения с помощью одноимённого флажка.
3. **Скрыть значок онлайн-чата на сайте**. Это действие можно использовать, например, после окончания рабочего времени ваших администраторов.
4. **Показать значок онлайн-чата**. Как и предыдущее действие, оно позволяет отображать значок чата для клиентов в определённый период времени (или при выполнении других необходимых условий).
5. **Отправить сообщение от имени администратора**. Это действие отправляет сообщение в онлайн-чате от имени администратора.
6. **Отправить форму**. Это действие используется для сбора данных клиента. Вы можете настроить текст формы, выбрать необходимые поля ввода (например, имя, номер телефона, электронную почту, чекбокс или любое другое поле ввода, которое вы настроите вручную).

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

### Баннеры

<div data-with-frame="true"><figure><img src="/files/a882d0c23bc58eed3053ec2b1e864ed2d81ebf01" alt=""><figcaption></figcaption></figure></div>

Во вкладке «Баннеры» вы можете добавить кликабельные баннеры в стартовое окно чата. Перейдём к настройкам.

1. Нажмите на **"Добавить баннер"**.

<div data-with-frame="true"><figure><img src="/files/0287743dcf2719bec6b2fa801fcf3017683531e1" alt="" width="260"><figcaption></figcaption></figure></div>

2. Загрузите изображение.

<div data-with-frame="true"><figure><img src="/files/9cc4171447f88f71a92c1114f69800f80096dfd6" alt=""><figcaption></figcaption></figure></div>

{% hint style="warning" %}
Размер изображения фиксирован.

Рекомендуемый формат изображения: если вы добавляете заголовок и подзаголовок, используйте размер баннера **345x194 пикселей** или **соотношение сторон 16:9**.
{% endhint %}

Чтобы баннер был кликабельным (и клиент мог перейти по ссылке, нажав на него), укажите URL в соответствующем поле.

<div data-with-frame="true"><figure><img src="/files/08dbf07c0062436c4613c176f5e4114f6c257edc" alt="" width="563"><figcaption></figcaption></figure></div>

Затем, при необходимости, укажите заголовок и подзаголовок баннера.

<div data-with-frame="true"><figure><img src="/files/e020eae045b3af5826e1f31cfbda962517541f71" alt="" width="563"><figcaption></figcaption></figure></div>

Введите заголовок и подзаголовок, затем нажмите **"Сохранить"**.

<div data-with-frame="true"><figure><img src="/files/917dc9cc976b2a0a9767ad7f18a70098582e0de6" alt="" width="563"><figcaption></figcaption></figure></div>

После этого баннер появится в виджете онлайн-чата.

<div data-with-frame="true"><figure><img src="/files/73eb7795bf19ec37bf46ead7e9029a0daf4854f2" alt="" width="563"><figcaption></figcaption></figure></div>

Чтобы отключить баннер (перестать показывать его в онлайн-чате), переведите переключатель в неактивное положение.

<div data-with-frame="true"><figure><img src="/files/d2f5c3c196605d3b5bec77e82eb54c318948751a" alt="" width="563"><figcaption></figcaption></figure></div>

Чтобы отредактировать или удалить баннер, нажмите **Редактировать**.

### Оценка качества

<div data-with-frame="true"><figure><img src="/files/df964f98537b5831adc88a4db2c066fbd9e9c928" alt="" width="375"><figcaption></figcaption></figure></div>

В онлайн-чате есть дополнительный раздел настроек под названием «Контроль качества». Чтобы включить эту функцию, перейдите на соответствующую вкладку в настройках.

<div data-with-frame="true"><figure><img src="/files/5fa78efe7ea58c2c7e2f85c07b48e26f28bde498" alt="" width="563"><figcaption></figcaption></figure></div>

Функциональность предлагает выбор из трёх шкал оценки качества: пятибалльной, трёхбалльной и двухбалльной.

<div data-with-frame="true"><figure><img src="/files/de74f30f81dfbeff85256e758b0891e842f5cf66" alt="" width="563"><figcaption></figcaption></figure></div>

Введите текст, который будет отображаться перед оценкой, в соответствующем поле.

<div data-with-frame="true"><figure><img src="/files/0759fa0e27f2963f9f62ee293c3147c13a21d6b6" alt=""><figcaption></figcaption></figure></div>

В этом поле нет значения по умолчанию. Если оставить его пустым, на баннере оценки качества появится следующий текст.

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

<div data-with-frame="true"><figure><img src="/files/b768d3316e187b4fc5f77e06ff1cf0d87e49fec4" alt="" width="375"><figcaption></figcaption></figure></div>

Для этого просто введите свой текст для названия поля, а также текст-подсказку внутри поля обратной связи. По умолчанию (см. пример выше) назначение и текст каждого поля уже заданы для вашего удобства.

Вы также можете включить флажок, чтобы сделать комментарий клиента в отзыве обязательным.

<div data-with-frame="true"><figure><img src="/files/abf3688ae54af1dda364efdd2fa31039f74c6631" alt="" width="363"><figcaption></figcaption></figure></div>

Далее вы можете заполнить текст сообщения с отзывом, которое будет отправлено клиенту после положительной или отрицательной оценки. Чтобы посмотреть, как выглядит итоговое сообщение онлайн-чата после отправки оценки, нажмите в чате кнопку отправки оценки.

<div data-with-frame="true"><figure><img src="/files/46a6a8ca0511869ddc88097d835f28c8fee7ff2e" alt="" width="313"><figcaption></figcaption></figure></div>

#### Флажок «Пользователь может оценить чат»

<div data-with-frame="true"><figure><img src="/files/850e2165d7575c0849a8a91d4bc92b386cbf23f7" alt="" width="563"><figcaption></figcaption></figure></div>

В разделе «Клиенты» оператор может завершить диалог во время общения с пользователем. Если этот флажок включён, пользователь сможет оставить оценку.

{% hint style="success" %}
Оператор не видит оценку, которую клиент поставил диалогу.
&#x20;Все оценки качества будут доступны в разделе «Аналитика».
{% endhint %}

Оператор может нажать кнопку «Завершить диалог» во время общения с пользователем. После этого откроется форма подтверждения действия оператора:

<div data-with-frame="true"><figure><img src="/files/47253cd9d1a8ec203a124be2ec7b5c02f71693fa" alt="" width="375"><figcaption></figcaption></figure></div>

<div data-with-frame="true"><figure><img src="/files/9aed51aa85abb06b16539c068a9b510c5a114b85" alt="" width="375"><figcaption></figcaption></figure></div>

Если в каналах подключена почтовая служба, появятся варианты отправки сообщений по электронной почте.

После завершения диалога оператором пользователю отправляется форма оценки качества, а сама оценка фиксируется в аналитике.

Если клиент не оставит оценку, в статистике будет указано «Пользователь не оставил оценку».

## Как добавить онлайн-чат на ваш сайт

Чтобы встроить онлайн-чат на сайт, просто скопируйте скрипт из вкладки Code и вставьте его в HTML вашего сайта.

<div data-with-frame="true"><figure><img src="/files/8135a6911c378ea7097b5b52aaefbf35fe4201b8" alt=""><figcaption></figcaption></figure></div>

Скопируйте код онлайн-чата.

<div data-with-frame="true"><figure><img src="/files/6346a3ca53a6e882a44351ff9689054d1329e8cf" alt=""><figcaption></figcaption></figure></div>

Затем перейдите в **"Сайты"** раздел и нажмите на плитку сайта, на котором вы хотите разместить виджет онлайн-чата.

<div data-with-frame="true"><figure><img src="/files/dccfca631fd7e7a356c33896ff4cf035cb9dd0fc" alt="" width="563"><figcaption></figcaption></figure></div>

Затем перейдите в **Редактирование сайта**.

<div data-with-frame="true"><figure><img src="/files/d991e9945eebda0908487c95e79a0b8ca3815c87" alt="" width="563"><figcaption></figcaption></figure></div>

И перейдите в настройки сайта.

<figure><img src="/files/0f0ff53eef0f01b49ddaecdcff75d97e619a4dac" alt="" width="563"><figcaption></figcaption></figure>

В **Цвета, шрифты и HTML** разделе вставьте скопированный код онлайн-чата в **поле HTML-кода head** .

<div data-with-frame="true"><figure><img src="/files/81445a3073a346255963f890dedbb02477021ea9" alt="" width="563"><figcaption></figcaption></figure></div>

{% hint style="info" %}
**Вставьте этот код на каждую страницу вашего сайта внутри тега `<head>` .**
{% endhint %}

&#x20;Теперь онлайн-чат успешно подключён к вашему сайту.

## Отправка формы для заполнения клиентом

В онлайн-чате также есть функция, позволяющая отправлять клиентам форму для сбора информации о пользователе и добавления его в систему для дальнейшего взаимодействия.

<div data-with-frame="true"><figure><img src="/files/acb7d89cc11ae5b2442100715410882e057f8134" alt="" width="375"><figcaption></figcaption></figure></div>

Такая форма отправляется с помощью **online\_chat\_send\_form()** функции, которая принимает следующие параметры:

1. **name;**
2. **phone;**
3. **privacy;**
4. **callback** (этот параметр работает только если телефония интегрирована в проект);
5. age;
6. email\_group\_ID (если вы укажете этот параметр вместе с электронной почтой, будет создан email-клиент и привязан к пользователю чата);
7. wa\_group\_ID (если вы укажете этот параметр вместе с номером телефона, будет создан контакт WhatsApp и привязан к пользователю чата).
8. *Если указан несуществующий группа, форма будет отправлена, но клиент не будет создан.*

{% hint style="danger" %}

#### Важно

Все параметры вводятся одной строкой через запятую.

*Пример записи в калькуляторе:* online\_chat\_send\_form("name,email,email\_group\_ID")
{% endhint %}

Уведомление, которое появится в чате после отправки формы

<div data-with-frame="true"><figure><img src="/files/cf3bcff069097f6d0a5e6653bbffd00074541e14" alt="" width="371"><figcaption></figcaption></figure></div>

{% hint style="info" %}
Данные, отправленные через форму, сохраняются в переменных клиента.
&#x20;Подробнее об этих переменных вы можете посмотреть ниже в профиле онлайн-клиента.
{% endhint %}

#### <mark style="color:красный;">!</mark> online\_chat\_send\_form(arguments, texts)

У неё два обязательных аргумента.

arguments - строка параметров

texts - название формы

Например, в калькуляторе вы можете ввести это так: **online\_chat\_send\_form("name,phone", "Привет, пожалуйста, заполните форму**.**")**.

<div data-with-frame="true"><figure><img src="/files/995a83eb11f5644c8a91f0d648c175bdb2ff2df1" alt=""><figcaption></figcaption></figure></div>

Пример ответа онлайн-чата.

<div data-with-frame="true"><figure><img src="/files/0b08fc7cd8aadb1a8248e1b5797073856114c04e" alt="" width="375"><figcaption></figcaption></figure></div>

## **Отправка сообщений в чат**

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

`if(window.ChatBotPro) { window.ChatBotPro.sendMessageFromUser("Message") }`

Например, когда пользователь нажимает кнопку, от его имени будет отправлено сообщение.

**Настройки подсказки**

Вы можете настроить бота на реакцию на это сообщение.

Код вставляется в HTML-раздел настроек сайта.

<div data-with-frame="true"><figure><img src="/files/2082758f4341f863c70c8a2c582223134ab9dde3" alt=""><figcaption></figcaption></figure></div>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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://docs.mavibot.ai/doc/ru/chatbot/live-chat.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.