# Виджет онлайн-записи для сайта

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

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

Виджет можно интегрировать как на сайт, созданный с помощью MaviBot, так и на лендинг, созданный с помощью других конструкторов.

## Как создать виджет

{% hint style="info" %}
Сначала нужно создать филиал и настроить услуги, назначив их сотрудникам. Мы объяснили, как это сделать, в статье «Настройки услуги бронирования».
{% endhint %}

Чтобы начать, перейдите в раздел «Виджеты», который можно найти в верхнем меню.

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

Если в проекте еще не создано ни одного виджета, в разделе «Виджеты» вы увидите четыре кнопки в середине экрана.

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

Нажмите кнопку «Виджет онлайн-бронирования», и вы перейдете к настройкам виджета.

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

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

В этой вкладке нужно указать название виджета (оно будет отображаться на сайте) и домен сайта, на котором вы хотите, чтобы отображался виджет онлайн-бронирования (если сайт не создан с помощью MaviBot).&#x20;

<figure><img src="/files/319874ce9526099a2ec02ab3b3e736ad0b476513" alt="" width="563"><figcaption></figcaption></figure>

Если сайт создан с помощью конструктора MaviBot, откройте вкладку «Сайты» и скопируйте ссылку на ваш сайт MaviBot.

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

&#x20;Далее выберите филиал, услуги и сотрудники которого будут отображаться в виджете.

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

Также можно добавить ссылку на политику конфиденциальности и ссылку на согласие на обработку данных.

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

Теперь можно перейти к настройке виджета.

### Аналитика

Также можно настроить события аналитики.

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

Для этого введите в соответствующее поле идентификатор Facebook Pixel, Google Analytics или Метрики и укажите значение события.

<div data-with-frame="true"><figure><img src="/files/71ccee81448ff1d9ac76e2a2e8407bb18553c044" alt="" width="325"><figcaption><p>Например, как ввести данные</p></figcaption></figure></div>

### Настройки внешнего вида

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

Логотип и название виджета будут отображаться в его шапке.

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

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

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

**Цветовая схема виджета**

Вы можете выбрать цветовую схему виджета по своему усмотрению:

1. Фон виджета:.
2. Основная фирменная тема виджета будет отображать кнопки, цены и иконки в выбранной цветовой схеме.
3. Цвет текста: изменяет цвет текста кнопок или основного текста в зависимости от выбранного варианта.
4. Текст кнопки.

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

По умолчанию на кнопках отображается текст **«Выбрать услуги»** и **«Выбрать специалиста**», но вы можете настроить текст по своему усмотрению:

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

Перейдите в режим редактирования сайта.

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

Далее найдите **«Онлайн-бронирование»** в списке и добавьте его.

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

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

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

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

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

Установите нужные настройки фона и отображения.

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

Сохраните настройки сайта.
\
Теперь ваши клиенты могут бронировать услуги круглосуточно, просто посетив ваш сайт&

**Как встроить виджет на другой сайт**

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

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

Если вам нужно встроить код на ваш сайт, скопируйте скрипт и вставьте его в вашу landing page .

Если вы используете виджет на своих сайтах, НЕ созданных с помощью MaviBot, обязательно укажите класс элемента в предоставленном поле.

<div data-with-frame="true"><figure><img src="/files/d8d5027273aa097d23a9693b767c05aed912beb1" alt="" width="563"><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/booking/widget.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.