# Виджет обратного звонка

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

* Улучшить взаимодействие с клиентами,
* Обеспечить оперативную поддержку,
* Собирать ценную обратную связь и предложения для повышения удовлетворенности пользователей.

## Настройки

{% hint style="warning" %}

## Обратите внимание

Убедитесь, что [интеграция с телефонией](/doc/ru/integrations/other.md) включена перед настройкой виджета обратной связи. Это требуется для установки. 
{% endhint %}

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

#### **Настройки основной информации**

Этот раздел содержит два обязательных поля для настройки вашего виджета.

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

**Дополнительные настройки**\
В разделе основной информации вы также можете включить **уведомления об обратном звонке** в дополнительных настройках.

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

{% hint style="info" %}
Обратные звонки виджета не совпадают с обратными звонками из подключенной телефонии.
{% endhint %}

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

Вы также можете показать или скрыть логотип «Мы используем MaviBot» с помощью этого флажка.

### Условия срабатывания

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

#### Временной интервал

Вы можете задать время появления виджета на сайте. Для этого используйте функцию «Когда показывать виджет».

1. **Сразу**\
   Этот параметр покажет виджет сразу после того, как пользователь откроет сайт.
2. **После задержки**

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

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

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

3. **После прокрутки**

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

Текст **Условие «После прокрутки»** означает, что как только пользователь прокрутит сайт — до самого конца или лишь небольшую его часть — виджет появится на сайте через указанное количество секунд.&#x20;

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

### Условия отображения на сайте

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

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

{% hint style="info" %}
Чтобы узнать об UTM-параметрах и о том, как их использовать, рекомендуем прочитать статью, **"**[**Как передавать UTM-параметры**](/doc/ru/faq/questions/...peredat-utm-metki.md)**."**
{% endhint %}

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

Введите название нужного параметра в соответствующее поле.

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

Затем выберите оператор, который соответствует тегу и значению:

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

{% hint style="info" %}
В чем разница между «содержит/не содержит» и «равно/не равно»?

Основное отличие в том, что **«содержит/не содержит»** проверяет, включает ли UTM-параметр определенное значение где-либо внутри себя (или не включает его).

\
В отличие от этого, оператор **«равно»** требует точного совпадения, то есть система ищет строгое равенство значения UTM-параметра (и, соответственно, «не равно» — это противоположное условие).
{% endhint %}

Затем введите нужное значение UTM-параметра:

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

2. Страна

Вы также можете выбрать условие «Страна», которое отображает виджет в зависимости от страны пользователя по IP.
\
Выберите нужную страну из списка, а также тип оператора («является» или «не является»).

3. **Устройство пользователя**

При необходимости задайте условие «Устройство», чтобы отображать виджет в зависимости от типа устройства пользователя.

В настройках также есть возможность добавлять несколько значений для управления отображением виджета. Для этого просто нажмите **«+ Добавить значение»** и задайте одно или несколько дополнительных условий.

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

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

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

<figure><img src="/files/98a832275f03706ced410953f2ba14a44861d3fd" alt=""><figcaption></figcaption></figure>

График работы играет ключевую роль для флажков **«Отключать виджет вне рабочего времени»** и **«Отключать автообратные звонки вне рабочего времени**"

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

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

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

Текст **«Предлагать отложенный звонок на удобное время»** флажок также использует график работы: он позволяет системе предложить клиенту ближайшее доступное время для звонка в соответствии с установленными рабочими часами.

<figure><img src="/files/5bfa9a287777131e4951a7da42186847664e9295" alt=""><figcaption></figcaption></figure>

Чтобы настроить рабочие часы, просто используйте следующие параметры:

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

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

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

## Внешний вид

<figure><img src="/files/550d9a471ca2bcc6216e490b2b081b559bfae604" alt=""><figcaption></figcaption></figure>

Настройки внешнего вида можно разделить на настройки кнопки и виджета.

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

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

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

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

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

Вы можете заменить значок телефона любым нужным текстом.

<div><figure><img src="/files/b09f297704616b7a3db68e8c61e844d01b7460f1" alt="" width="135"><figcaption></figcaption></figure> <figure><img src="/files/9d99ec2b7c8021fe7a1b98fd793142d93ba5c2a4" alt=""><figcaption></figcaption></figure></div>

3. Цвет кнопки: используйте широкую палитру цветов, чтобы выбрать наиболее подходящий вам цвет.

<div><figure><img src="/files/884a3f55b48e2e470536e863b4b187c41af1a15a" alt=""><figcaption></figcaption></figure> <figure><img src="/files/58be0908e7fec22d70fd41fbbe26b9567cbf0676" alt=""><figcaption></figcaption></figure></div>

4. Цвет текста кнопки: если вы заполните пустое поле для текста, отображаемого на значке виджета, вы сможете изменить цветовую схему текста.

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

5. Анимация кнопки помогает улучшить внешний вид вашего сайта и сделать его более живым.

<figure><img src="/files/04361563779866bc51b3370a6e5bbfbb4ddaf051" alt=""><figcaption></figcaption></figure>

Как выглядит каждая анимация кнопки:

<div><figure><img src="/files/92605289636f3568d611b5219a25ab2286c5c3e7" alt="" width="188"><figcaption><p>Пульсация</p></figcaption></figure> <figure><img src="/files/b4a3b17570327de82a5bb1159a462e6dd7c60369" alt="" width="188"><figcaption><p>Тряска</p></figcaption></figure> <figure><img src="/files/8236487ebc29c7f54ddf3370d73ac8d54ea2c651" alt="" width="188"><figcaption><p>Рябь</p></figcaption></figure></div>

### Настройки виджета

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

<figure><img src="/files/427a5c381ade293ab6f52718c6da2b3444a8e032" alt=""><figcaption></figcaption></figure>

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

1. Заголовок

<figure><img src="/files/11cee95efd91e86c4cc22dcc1061f7c98e4df656" alt=""><figcaption></figcaption></figure>

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

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

<figure><img src="/files/2118c877ce79ba1d948a203418afedf6b4540899" alt=""><figcaption></figcaption></figure>

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

{% hint style="info" %}
Это поле обязательно.
{% endhint %}

3. Текст виджета, отображаемый после запуска таймера

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

Текст появится в виджете только после того, как клиент нажмет кнопку «Перезвоните мне» (или любой другой текст кнопки) во время обратного отсчета таймера.

Таймер виджета вы задаете с помощью этой настройки:

<figure><img src="/files/6c7748c8b9303877ec4d1cadf93c69cc9da689db" alt=""><figcaption></figcaption></figure>

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

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

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

<figure><img src="/files/9b331e9bfd64b269108a8c019d579f0c6873cde6" alt=""><figcaption></figcaption></figure>

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

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

## Как встроить виджет на ваш сайт

После настройки всех параметров и оформления виджета в вашем уникальном дизайне нажмите кнопку **«Добавить виджет»** в нижней части экрана.

Вы попадете в список готовых виджетов, где нужно нажать кнопку **«Код для встраивания на сайт»** .

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

После этого откроется модальное окно со скриптом.

<figure><img src="/files/95eb90822d877c3f9d10e421f7c435c0bec9ca95" alt=""><figcaption></figcaption></figure>

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

Затем вставьте код в **head HTML** .

{% hint style="info" %}
Чтобы встроить виджет на сайте Tilda, также скопируйте скрипт виджета с помощью кнопки «Код для встраивания на сайт», затем установите его на сайт.
{% endhint %}

Готово! Настройка и установка виджета на сайте завершены!

## Обратные звонки

**Доступные обратные звонки:**

1. widget\_callback\_later widget\_id: 1 at 23.04.2024 18:00 - отложенный обратный звонок, где <mark style="color:зелёный;">**widget\_callback\_later**</mark>  — это тип обратного звонка; <mark style="color:жёлтый;">**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:зелёный;">**widget\_callback\_need\_call**</mark>  — это тип обратного звонка; <mark style="color:жёлтый;">**widget\_id: 1 at 23.04.2024 18:00**</mark> — показывает ID виджета и запланированные дату и время звонка.
3. widget\_callback\_now widget\_id: 1 - обратный звонок, сигнализирующий о необходимости немедленно позвонить клиенту, где<mark style="color:зелёный;">**widget\_callback\_now**</mark>  — это тип обратного звонка;  <mark style="color:жёлтый;">**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/ru/websites/widgets/vidzhet-obratnogo-zvonka.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.