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

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

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

## Як створити вебсайт з Live Chat

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

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

Після натискання кнопки "Онлайн-чат" панель налаштувань щойно створеного чату відкриється автоматично.

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

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

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

<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" %}
Розмір зображення фіксований.

Рекомендований формат зображення: якщо ви додаєте заголовок і підзаголовок, використовуйте банер розміром **345x194 пікселів** або **з співвідношенням сторін 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>

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

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

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

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

Щоб вбудувати онлайн-чат на свій сайт, просто скопіюйте скрипт із вкладки 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 code head** .

<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>


---

# 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/uk/chatbot/mesendzheri/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.