> 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/uk/chatbot/mesendzheri/live-chat.md).

# Live Chat для сайту

Встановивши онлайн-чат на своєму сайті, ви можете збирати дані клієнтів і автоматизувати спілкування з відвідувачами безпосередньо на вашому сайті.

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

## Як створити вебсайт для Live Chat

Щоб створити чат, перейдіть до розділу "Messengers" і натисніть кнопку "Live chat".

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

Щойно ви натиснете кнопку "Online chat", панель налаштувань для щойно створеного чату відкриється автоматично.

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

## Налаштування

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

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

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

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

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

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

3. **Вказана мітка віджета**

Мітка на кнопці віджета відображається, коли онлайн-чат згорнуто. За замовчуванням показується текст із полів заголовка та підзаголовка, але за потреби ви можете вказати іншу мітку.

4. **Вітальне повідомлення чату**

Це поле містить текст початкового вітального повідомлення бота

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

5. **Вирівнювання тексту**

За допомогою панелі вирівнювання тексту ви можете вирівняти заголовок і підзаголовок чату ліворуч, праворуч або по центру — так само, як у стандартних текстових редакторах.

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

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

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

Ця кнопка призначена для відкриття онлайн-чату після натискання.&#x20;

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

Доступно кілька варіантів відображення. Ви можете розмістити кнопку як біля правого, так і біля лівого краю.

7. Кольорова палітра

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

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

Ви також можете вибрати колір і яскравість візерунків, а також інших елементів онлайн-чату. Для цього увімкніть прапорець "Розширені налаштування".

Ви також можете налаштувати додаткові розширені параметри кольору для онлайн-чату.

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

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

Ця опція дає змогу змінити аватар асистента в онлайн-чаті. Аватар можна додати або через URL, або завантаживши файл.

За потреби ви також можете приховати аватар чату, увімкнувши цей прапорець.

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

Налаштування дають змогу відображати логотип MaviBot.

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

### Налаштування

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

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

За замовчуванням це поле містить текст: "Введіть своє повідомлення і натисніть Enter."

Ви можете змінити цей текст або залишити стандартний.

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

За замовчуванням текст установлено як: "Оберіть бажаний спосіб зв'язку."

3. **Повідомлення під час призначення оператора клієнту**&#x20;

Якщо ви додасте #{operatorName} у це поле, відображатиметься ім'я оператора, вказане в розділі "Співробітники".

Ви можете призначити оператора вручну, натиснувши кнопку "Взяти клієнта" або "Передати клієнта" під час розмови з клієнтом. Або ж ви можете налаштувати автоматичний розподіл клієнтів між операторами в розділі "Співробітники".&#x20;

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

4. **Повідомлення, коли оператори офлайн**

За замовчуванням відображатиметься таке повідомлення:
&#x20;"Наразі жоден оператор не онлайн. Залиште нам повідомлення, і ми зв'яжемося з вами якнайшвидше."

Статус "Онлайн" для бота береться з розділу "Співробітники". Можливі статуси: Онлайн, Перерва та Офлайн.

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

Ви також можете змінити свій статус у верхній панелі, перебуваючи в будь-якому розділі проєкту

5. **Звукові сповіщення в онлайн-чаті**

Ці налаштування дають змогу увімкнути або вимкнути звукові сповіщення про відкриття чату та нові повідомлення в онлайн-чаті для відвідувачів сайту.

6. **Відображати месенджер**

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

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

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

7. **Показувати лише месенджери**

Якщо ви увімкнете цей перемикач, на сайті відображатимуться лише кнопки месенджерів. *Усі інші функції онлайн-чату будуть вимкнені!*

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

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

За замовчуванням встановлено: "Написати".

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

9. **Початкове повідомлення WhatsApp**&#x20;

Цей текст з'явиться в полі введення для користувача в WhatsApp, коли він натисне кнопку на вашому сайті. Користувачеві потрібно буде лише натиснути "Надіслати".

Обов'язково також додайте цей текст до умов початкового блоку вашої послідовності повідомлень.

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

10. **Користувацькі посилання**

Окрім кнопок месенджерів, тепер ви можете додавати власні кнопки з користувацькими посиланнями.

Ви можете вказати URL для посилання та додати зображення в налаштуваннях.

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

11. Завантаження файлів

Це налаштування дає змогу отримувати від відвідувачів сайту вкладення, наприклад зображення.

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

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

12. **Дані користувача**

У першому повідомленні ви можете отримати згоду на обробку персональних даних та/або зібрати інформацію про користувача через форму збору даних. Ви також можете встановити або змінити адресу електронної пошти через вітальне вікно.

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

Заповнення форми може бути необов'язковим або обов'язковим, якщо увімкнути перемикач "*Зробити заповнення форми обов'язковим"* перемикача.

Приклад першого повідомлення зі збором даних.

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

Після налаштування форми ви можете вибрати параметри відображення країни за допомогою поля-випадаючого списку.

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

13. Запит на зворотний дзвінок

Прапорець "Запит на зворотний дзвінок" з'являється в налаштуваннях онлайн-чату, якщо в проєкті увімкнено телефонію.

#### *Як це працює*

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

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

* Статус: На зміні
* Будь-яка роль, зокрема Адміністратор
* Телефонія увімкнена (налаштована) для співробітника

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

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

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

Ця опція за замовчуванням вимкнена. Коли її увімкнено, під час першого запуску онлайн-чату з'явиться повідомлення «Я даю згоду на обробку персональних даних» разом із кнопкою **кнопкою "Підтвердити"** з'явиться під час першого запуску онлайн-чату.

Приклад першого повідомлення для отримання згоди на обробку персональних даних:

15. Налаштування кнопки запуску

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

Натискання ***"Додати кнопку"*** відкриває форму створення кнопки запуску:

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

Кнопка може мати одну з таких функцій:

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

Наприклад, ви можете створити кнопку з назвою "Адреса", а в полі "Повідомлення" вказати точну адресу та години роботи.

{% hint style="info" %}
Текст у полі "Повідомлення" буде без розривів рядків. Будь ласка, врахуйте це під час роботи.
{% endhint %}

* **Відокремлювати клієнтів з різних доменів.** Це налаштування дає змогу розділяти розмови, якщо одна й та сама людина пише в онлайн-чаті, розміщеному на різних доменах. За замовчуванням це вважається однією розмовою.

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

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

* **Кнопки в тексті відображатимуться в історії онлайн-чату (перемикач).** Увімкніть цю опцію, щоб показувати кнопки з тексту конструктора воронки в історії онлайн-чату клієнта.

16. Приховати онлайн-чат

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

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

### Автоматичні дії

Принцип роботи автоматичних дій такий: щоб автоматична дія спрацювала, для неї потрібно задати певну умову-тригер.

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

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

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

Докладніше про умови:

<div data-with-frame="true"><figure><img src="/files/dfb3cad5b0fe1c4e0adeaf781134fc8147f33e62" 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/4799d5fbda7ed2226eba7f7ff0bbf83aa15de480" alt="" width="563"><figcaption></figcaption></figure></div>

6. **Час на сторінці**. Ця умова подібна до часу доби; однак якщо база даних ваших клієнтів розподілена по різних часових поясах, вам потрібно, щоб ця автоматична дія спрацьовувала в той самий локальний час для кожного часового поясу.
7. **Час після закриття вікна MAviBot**. Ця умова налаштовується так само, як час доби або час на сторінці, але залежить від дії користувача з закриття вікна Salebot.
8. **Час від першого повідомлення відвідувача.** Автоматична дія спрацює через вказаний проміжок часу (у секундах) після першого повідомлення клієнта в онлайн-чаті.
9. **Час без відповіді оператора від першого повідомлення користувача**. Ця умова також задається в секундах і спрацьовує незалежно від того, відповів оператор клієнту чи ні.

За потреби умови можна поєднувати, що дає змогу автоматичній дії спрацьовувати за кількома критеріями:

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

Далі виберіть, яку дію онлайн-чат має виконувати автоматично:

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

1. **Автоматичне відкриття чату**. Ця дія автоматично відкриває онлайн-чат для користувача. Додаткове налаштування не потрібне.
2. **Автоматичне запрошення до чату**. Ця автоматична дія надсилає користувачеві попередньо задане повідомлення, внесене у відповідне поле. За потреби ви також можете приховати поле введення повідомлення за допомогою однойменного прапорця.
3. **Приховати іконку онлайн-чату з вебсайту**. Цю дію можна використати, наприклад, після завершення робочого часу ваших адміністраторів.
4. **Показувати іконку онлайн-чату**. Подібно до попередньої дії, це дає змогу відображати іконку чату для клієнтів протягом певного проміжку часу (або на основі інших необхідних умов).
5. **Надіслати повідомлення від імені адміністратора**. Ця дія надсилає повідомлення в онлайн-чаті від імені адміністратора.
6. **Надіслати форму**. Ця дія використовується для збору даних клієнта. Ви можете налаштувати текст форми, вибрати потрібні поля введення (наприклад, ім'я, номер телефону, електронну пошту, прапорець або будь-яке інше поле введення, яке ви налаштуєте вручну).

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

### Банери

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

Ви можете додати клікабельні банери до стартового вікна чату на вкладці "Банери". Перейдемо до налаштувань.

1. Натисніть на **"Додати банер"**.

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

2. Завантажте зображення.

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

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

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

Щоб банер був клікабельним (тобто клієнт міг перейти за посиланням, натиснувши на нього), введіть URL у відповідне поле.

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

Далі за потреби вкажіть заголовок і підзаголовок банера.

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

Введіть заголовок і підзаголовок, а потім натисніть **"Зберегти"**.

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

Після цього банер з'явиться у віджеті онлайн-чату.

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

Щоб вимкнути банер (припинити його показ в онлайн-чаті), переведіть перемикач у неактивне положення.

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

Щоб відредагувати або видалити банер, натисніть **Редагувати**.

### Оцінка якості

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

В онлайн-чаті є додатковий розділ налаштувань під назвою "Контроль якості". Щоб увімкнути цю функцію, перейдіть до відповідної вкладки в налаштуваннях.

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

Ця функція пропонує вибір між трьома шкалами оцінки якості: п'ятибальною, трибальною та двобальною.

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

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

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

У цьому полі немає значення за замовчуванням. Якщо залишити його порожнім, на банері оцінки якості відображатиметься такий текст.

Ви також можете вказати власну назву поля для відгуку клієнта.

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

Для цього просто введіть власний текст для назви поля, а також текст-заповнювач у полі відгуку. За замовчуванням (див. приклад вище) призначення та текст кожного поля вже налаштовані для вашої зручності.

Ви також можете увімкнути прапорець, щоб зробити коментар-відгук клієнта обов'язковим.

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

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

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

#### Прапорець "Користувач може оцінити чат"

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

У розділі "Клієнти" оператор може завершити діалог під час розмови з користувачем. Якщо цей прапорець увімкнено, користувач зможе залишити оцінку.

{% hint style="success" %}
Оператор не бачить оцінку, яку клієнт поставив розмові.
&#x20;Усі оцінки якості будуть доступні в розділі "Аналітика".
{% endhint %}

Оператор може натиснути кнопку "Завершити розмову" під час розмови з користувачем. Це відкриє форму підтвердження дії оператора:

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

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

Якщо в каналах підключено поштовий сервіс, з'являться опції надсилання повідомлень електронною поштою.

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

Якщо клієнт не залишить оцінку, у статистиці буде показано "Користувач не залишив оцінку."

## Як додати онлайн-чат на свій сайт

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

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

Скопіюйте код онлайн-чату.

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

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

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

Потім перейдіть до **Редагування сайту**.

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

І перейдіть до налаштувань сайту.

<figure><img src="/files/5454e061597b974a9b89ecaa085ad08c3687174f" alt="" width="563"><figcaption></figcaption></figure>

У **Кольори, шрифти та HTML** розділі вставте скопійований код онлайн-чату в **заголовок HTML-коду** поле.

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

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

&#x20;Онлайн-чат успішно підключено до вашого вебсайту.

## Надсилання форми для заповнення клієнтами

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

<div data-with-frame="true"><figure><img src="/files/4e2493ed9b7a485921e824edf38521b7792beb45" 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/f8c7a7ac2eb823b40a40d620b34bd452763cf48c" 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/688d78d96fa93f5e6b3474d3af7d09a76d75772e" alt=""><figcaption></figcaption></figure></div>

Приклад відповіді онлайн-чату.

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

## **Надсилання повідомлень у чат**

Використовуйте цей код, коли користувач виконує дію на сайті, і вам потрібно в цей момент надіслати повідомлення від його імені в чаті.

`if(window.ChatBotPro) { window.ChatBotPro.sendMessageFromUser("Повідомлення") }`

Наприклад, коли користувач натискає кнопку, від його імені буде надіслано повідомлення.

**Змінити налаштування підказки**

Ви можете налаштувати бота так, щоб він реагував на це повідомлення.

Код вставляється в розділі HTML налаштувань сайту.

<div data-with-frame="true"><figure><img src="/files/df0ee255a53dd7b550cf054fcad986fe902d4e2f" 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, and the optional `goal` query parameter:

```
GET https://docs.mavibot.ai/doc/uk/chatbot/mesendzheri/live-chat.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.