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

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

Вы также можете подключить к чату свою отдел продаж, чтобы менеджеры могли присоединяться к разговорам с клиентами. Общение может вестись либо через веб-интерфейс 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. **Отправить форму**. Это действие используется для сбора данных клиента. Вы можете настроить текст формы, выбрать необходимые поля ввода (например, имя, номер телефона, email, чекбокс или любое другое поле ввода, которое вы настроите вручную).

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

### Баннеры

<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 code 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, будет создан 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>


---

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