# Віджет callback

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

* Покращити взаємодію з клієнтами,
* Надавати оперативну підтримку,
* Збирати цінні відгуки та пропозиції для підвищення задоволеності користувачів.

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

{% hint style="warning" %}

## Зверніть увагу

Переконайтеся, що [телефонну інтеграцію](/doc/uk/integrations/other.md) увімкнено перед налаштуванням віджета зворотного зв’язку. Це необхідно для встановлення. 
{% endhint %}

### Основна інформація

#### **Налаштування основної інформації**

У цьому розділі є два обов’язкові поля для налаштування вашого віджета.

1. **Назва**\
   Введіть назву віджета, яка буде відображатися на вашому вебсайті. Це поле є обов’язковим.
2. **Домен, на якому буде використовуватися віджет**\
   Введіть домен вебсайту, на якому буде вбудовано віджет. Це поле також є обов’язковим. Ви можете вказати вебсайт, створений на:
   * **MaviBot**
   * **Tilda**
   * Власному **кастомному вебсайті**

**Додаткові налаштування**\
У межах розділу основної інформації ви також можете увімкнути **сповіщення про зворотні дзвінки** у додаткових налаштуваннях.

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

{% hint style="info" %}
Зворотні дзвінки віджета зворотного зв’язку не збігаються зі зворотними дзвінками з підключеної телефонії.
{% endhint %}

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

За допомогою цього прапорця ви також можете показувати або приховувати логотип "We use MaviBot".

### Умови спрацьовування

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

#### Часовий інтервал

Ви можете налаштувати час появи віджета на вебсайті. Для цього скористайтеся функцією “Коли показувати віджет”.

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

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

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

Часовий інтервал задається в секундах, мінімальне значення — 1 секунда, максимальне — 15 секунд.

3. **Після прокручування**

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

Поле **Умова "Після прокручування"** означає, що щойно користувач прокрутить вебсайт — чи то до самого кінця, чи лише невелику частину — віджет з’явиться на вебсайті через вказану кількість секунд.&#x20;

Мінімальне значення часового інтервалу — 1 секунда; максимальне — 15 секунд.

### Умови показу на вебсайті

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

1. UTM-параметри

{% hint style="info" %}
Щоб дізнатися про UTM-параметри та як їх використовувати, рекомендуємо прочитати статтю **"**[**Як передати UTM-параметри**](/doc/uk/faq/questions/...peredati-utm-mitki.md)**."**
{% endhint %}

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

Введіть назву потрібного параметра у відповідне поле.

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

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

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

{% hint style="info" %}
У чому різниця між "містить/не містить" і "дорівнює/не дорівнює"?

Основна різниця полягає в тому, що **"містить/не містить"** перевіряє, чи включає UTM-параметр певне значення десь усередині себе (або не включає його).

\
Натомість **"дорівнює"** оператор вимагає точного збігу, тобто система шукає сувору рівність значення UTM-параметра (а відповідно, "не дорівнює" — це протилежне).
{% endhint %}

Потім введіть потрібне значення для UTM-параметра:

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

2. Країна

Ви також можете вибрати умову "Країна", яка показує віджет на основі країни користувача за IP-адресою.
\
Виберіть потрібну країну зі списку, а також тип оператора ("є" або "не є").

3. **Пристрій користувача**

За потреби встановіть умову "Пристрій", щоб показувати віджет залежно від типу пристрою користувача.

У налаштуваннях також є функція додавання кількох значень для керування показом віджета. Для цього просто натисніть **"+ Додати значення"** і встановіть одну або кілька додаткових умов.

### Телефонія

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

## Графік роботи

<figure><img src="/files/026572b718382980698ac669631e3a5a7214cecd" alt=""><figcaption></figcaption></figure>

Графік роботи відіграє ключову роль для прапорців **"Вимкнути віджет поза робочим часом"** та **"Вимкнути автоматичні зворотні дзвінки поза робочим часом"**"

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

Коли ці прапорці увімкнено, віджет буде неактивним і/або функція автоматичного зворотного дзвінка не працюватиме поза робочим часом вашого персоналу.

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

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

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

Щоб налаштувати робочі години, просто використовуйте такі параметри:

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

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

<figure><img src="/files/85e7f1fec4d8c38c9edbb8f902c567a9d51aa62c" alt=""><figcaption></figcaption></figure>

## Зовнішній вигляд

<figure><img src="/files/07a7a413d9fd35d1ddc777d803b57cd254663e4d" alt=""><figcaption></figcaption></figure>

Налаштування зовнішнього вигляду можна поділити на налаштування кнопки та віджета.

### Налаштування кнопки

1. Розмір кнопки: ви можете вибрати великий, середній або малий розмір кнопки віджета.

<figure><img src="/files/08583eb2f08dcb4c24209f0e80372602317f67a4" alt=""><figcaption></figcaption></figure>

2. Текст кнопки

<figure><img src="/files/72874bf584233a81e32a13fc69b40f46cdfa05c5" alt=""><figcaption></figcaption></figure>

Ви можете замінити іконку телефону будь-яким потрібним текстом.

<div><figure><img src="/files/6539b782bffd2b0c939eb09e392d68d0f8852598" alt="" width="135"><figcaption></figcaption></figure> <figure><img src="/files/fc2d06a6d886bb8cc3c0b05ddf0e3c1efcfc50a7" alt=""><figcaption></figcaption></figure></div>

3. Колір кнопки: використовуйте широку палітру кольорів, щоб вибрати колір, який найкраще вам підходить.

<div><figure><img src="/files/c5c1f4adb61b3c1464052e2afe1c9036e33615b9" alt=""><figcaption></figcaption></figure> <figure><img src="/files/0fb0ad29c2199959dc571fd7ddd26a97f9700bb6" alt=""><figcaption></figcaption></figure></div>

4. Колір тексту кнопки: якщо ви заповните порожнє поле для тексту, що відображається на іконці віджета, ви зможете змінити колірну схему тексту.

<figure><img src="/files/2a8401219f24dc5ec773389af69b11f62d51b724" alt=""><figcaption></figcaption></figure>

5. Анімація кнопки допомагає покращити вигляд вашого вебсайту та зробити його живішим.

<figure><img src="/files/8c700627b13e36ed319f1ea6b8aa238230f70e73" alt=""><figcaption></figcaption></figure>

Як виглядає кожна анімація кнопки:

<div><figure><img src="/files/10b0290719694651f51f7970da081ab4c93b28a7" alt="" width="188"><figcaption><p>Пульсація</p></figcaption></figure> <figure><img src="/files/b6dbaf2249fcba701450bcdb4c6773e6b7a42880" alt="" width="188"><figcaption><p>Тремтіння</p></figcaption></figure> <figure><img src="/files/fb5cdd307306d1b6aff6ed430df8338589143127" alt="" width="188"><figcaption><p>Хвиля</p></figcaption></figure></div>

### Налаштування віджета

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

<figure><img src="/files/64e6647ced3c2409f79656c0253c68951bc2cadc" alt=""><figcaption></figcaption></figure>

Ви можете заповнити текстові поля всередині віджета:

1. Заголовок

<figure><img src="/files/60001acd5fac972e3cc11889df5289964ca2ecc2" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/78a008e5dc0b1f24c1fc3713ddd6dcb21c93c6b3" alt=""><figcaption></figcaption></figure>

2. Підзаголовок

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

<figure><img src="/files/2e443915f0d5bd449ad2442b4bbb2ef26d1eefe2" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Це поле є обов’язковим.
{% endhint %}

3. Текст віджета, що відображається після запуску таймера

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

Текст з’явиться у віджеті лише після того, як клієнт натисне кнопку "Передзвоніть мені" (або будь-який інший текст кнопки) під час зворотного відліку таймера.

Ви налаштовуєте таймер віджета за допомогою цього параметра:

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

4. Текст кнопки

<figure><img src="/files/92d71b2b28aa0e21925f64f1ee5cf32e22e2dc58" alt=""><figcaption></figcaption></figure>

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

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

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

<figure><img src="/files/7f1ccbefb06ab1691786c2b9fab0a6630a37da5b" alt=""><figcaption></figcaption></figure>

## Як вбудувати віджет на ваш сайт

Після налаштування всіх параметрів і персоналізації зовнішнього вигляду віджета відповідно до вашого унікального дизайну натисніть **"Додати віджет"** кнопку внизу екрана.

Вас буде перенаправлено до списку готових віджетів, де потрібно натиснути **"Вбудувати код на сайт"** кнопку.

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

Після цього відкриється модальне вікно зі скриптом.

<figure><img src="/files/4e1044f634e50a0e08dec7678c0a996f87af3cf8" alt=""><figcaption></figcaption></figure>

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

Потім вставте код у **HTML head** розділ.

{% hint style="info" %}
Щоб вбудувати віджет на вебсайт Tilda, також скопіюйте скрипт віджета за допомогою кнопки “Вбудувати код на вебсайт”, а потім встановіть його на сайті.
{% endhint %}

Готово! Налаштування та встановлення віджета на вебсайті завершено!

## Зворотні дзвінки

**Доступні зворотні дзвінки:**

1. widget\_callback\_later widget\_id: 1 at 23.04.2024 18:00 - відкладений зворотний дзвінок, де <mark style="color:green;">**widget\_callback\_later**</mark>  є типом зворотного дзвінка; <mark style="color:yellow;">**widget\_id: 1 at 23.04.2024 18:00**</mark> - вказує на ID віджета разом із датою та часом, коли клієнту слід здійснити дзвінок.
2. widget\_callback\_need\_call widget\_id: 1 at 23.04.2024 18:00 - означає, що клієнту потрібен дзвінок, де\ <mark style="color:green;">**widget\_callback\_need\_call**</mark>  є типом зворотного дзвінка; <mark style="color:yellow;">**widget\_id: 1 at 23.04.2024 18:00**</mark> - показує ID віджета та заплановану дату й час дзвінка.
3. widget\_callback\_now widget\_id: 1 - зворотний дзвінок, що сигналізує про негайну потребу зателефонувати клієнту, де<mark style="color:green;">**widget\_callback\_now**</mark>  є типом зворотного дзвінка;  <mark style="color:yellow;">**widget\_id: 1**</mark>   є ID віджета;
4. widget\_callback\_need\_call - зворотний дзвінок, що вказує на необхідність дзвінка. Цей зворотний дзвінок надсилається, якщо відповідне налаштування увімкнено.
5. widget\_callback\_now - зворотний дзвінок, що вказує на поточний дзвінок.


---

# 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/websites/widgets/vidzhet-callback.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.