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

Виджет поможет клиентам бронировать ваши услуги через 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>

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

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

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

<figure><img src="/files/35ddbfa03fd6cb8d7c641e743a0213a8dd31331d" alt=""><figcaption></figcaption></figure>

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

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

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

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

<figure><img src="/files/3c5ffb7127670047f613aee663497df92335b0af" alt="" width="563"><figcaption></figcaption></figure>

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

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

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

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

1. Фон виджета:

<figure><img src="/files/e53182fc1f33fbbbcc4b4f14786439bbd1c0873b" alt="" width="349"><figcaption></figcaption></figure>

2. Основная фирменная тема виджета будет отображать кнопки, цены и иконки в выбранной цветовой схеме:

<figure><img src="/files/b0f5c0fa9790ae233bb5a9e56871fe3ab6a3fb99" alt="" width="349"><figcaption></figcaption></figure>

3. Цвет текста: изменяет цвет текста на кнопке или основного текста в зависимости от выбранного варианта.

<figure><img src="/files/7899af9ace4648ec5df730aaca58dfe42dd5ceef" alt="" width="311"><figcaption></figcaption></figure>

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

<figure><img src="/files/a15f39939f5f54ef8f0a0def42e230f27c56d5fb" alt="" width="375"><figcaption></figcaption></figure>

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

<figure><img src="/files/9020e28726062365697316e2ca61c8b9f5d15197" alt="" width="375"><figcaption></figcaption></figure>

Теперь сохраните настройки:

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

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

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

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

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

<figure><img src="/files/7034f682f3da4cf320fb2351c89a12c2394421a8" alt="" width="351"><figcaption></figcaption></figure>

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

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

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

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

Установите нужные параметры фона и отображения:

<figure><img src="/files/380c627e8b1448fdcc784c50efd8f6ed8afc9ba7" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/22d3925072b2e5ca03a44d0c8d0e64994f727895" alt=""><figcaption></figcaption></figure>

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

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

<figure><img src="/files/c02b4b01072ed0ae1fbbd0b54dabadac8524f09e" alt="" width="375"><figcaption></figcaption></figure>

Если вам нужно встроить код на свой сайт, скопируйте скрипт и вставьте его в свой лендинг. <br>

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

<figure><img src="/files/97b2de82cfc04c86a9a3e2283a13a11e1684d99c" alt=""><figcaption></figcaption></figure>

## Виджет Telegram

Теперь, когда вы знаете, как создать виджет и встроить его на свой сайт, вы можете создать **кнопку Web App в Telegram** которая открывает ваш сайт как приложение внутри мессенджера.

{% hint style="info" %}
Вместо полноценного сайта вы можете создать лендинг с одним блоком, содержащим виджет онлайн-бронирования, и поделиться им с клиентами в виде кнопки Telegram с помощью кнопки Web App.
{% endhint %}

Вам нужно использовать функцию `quiz_link(mini_landing_page_id, display_my_domain)`, но только `mini_landing_page_id` параметр обязателен.<br>

Далее создайте блок, в котором в калькуляторе вы назначаете переменную (в этом примере переменная называется `booker_link`) , использующую функцию `quiz_link(mini_landing_page_id)`, при этом в качестве параметра передаётся ID страницы сайта:

**Шаг 1. Создание блока с функцией**<br>

Создайте блок в конструкторе и в калькуляторе задайте переменную с функцией вот так: booker\_link = quiz\_link('YOUR\_SITE\_ID')

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

{% hint style="success" %}
Внимание!

Не забудьте сохранить настройки блока.
{% endhint %}

**Шаг 2. Найдите нужный ID страницы сайта.** <br>

Чтобы найти ID страницы сайта, перейдите в соответствующий раздел:

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

Нажмите на плитку нужного сайта, чтобы перейти к настройкам страницы этого сайта:

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

Затем наведите курсор на строку со страницей, на которой вы создали **«Онлайн-бронирование»** секцию:

<figure><img src="/files/24c2ef7a4007662ff90cc9aa29df8fbbf575b2ed" alt=""><figcaption></figcaption></figure>

Скопируйте ID и вставьте его в блок в конструкторе воронки:

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

**Шаг 3. Добавьте кнопку в блок в конструкторе.** <br>

Далее разверните вкладку настроек «Кнопки» (нажмите на «Кнопки») и нажмите на **«+ Добавить кнопку»**:

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

После нажатия откроются настройки кнопки для добавления новой кнопки:

<figure><img src="/files/5243ff110c0a1e4e71a9fa13bc6e1e52e49c4685" alt=""><figcaption></figcaption></figure>

Здесь вам нужно:

* Указать название кнопки: это может быть любое имя на ваш выбор.
* Указать функцию кнопки: это должна быть кнопка Telegram Web App.

<figure><img src="/files/88f341785a98cff6d8d36ca4a423cc10b474161b" alt=""><figcaption></figcaption></figure>

* Указать ссылку, по которой откроется сайт при нажатии на кнопку:

Ссылка уже хранится в переменной с помощью калькулятора и `quiz_link` функции, поэтому в поле URL введите назначенную переменную `booker_link` с помощью интерполяции — то есть вставьте переменную внутрь `#{}`, которая содержит ссылку на ваш сайт и виджет.

<figure><img src="/files/0943011528d13ba106fa388a3b0dc0d08b99a222" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/3ae8613d44cc5d1e3cf3511afbfe15d9c96a0cfd" alt="" width="563"><figcaption></figcaption></figure>

Полностью настроенный блок выглядит так:

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

{% hint style="success" %}
**Полезный совет!**\
Нет необходимости создавать условный блок (например, проверку основной условия или начало диалога) специально для кнопки Web App. Вы можете создать кнопку и добавить `quiz_link` функцию в любой блок вашей воронки — будь то блок состояния, блок без состояния и т. д. (см. пример «Блок состояния диалога с кнопкой Telegram Web App»).
{% endhint %}

<figure><img src="/files/c4aeb2924cf036589ff40d3760b76758a71201c6" alt=""><figcaption><p>Пример: «Блок состояния диалога» с кнопкой Telegram Web App</p></figcaption></figure>

После этого кнопка Web App с виджетом онлайн-бронирования будет доступна в боте:

<figure><img src="/files/02abb3934e5364e205c36a9947c14604b6850863" alt="" width="375"><figcaption></figcaption></figure>

## Callback бронирования

После того как клиент запишется на приём, в диалоге будет отправлено callback-уведомление о бронировании, которое выглядит так:

<figure><img src="/files/658c325340ebf155c2944146ed3fe1c0c2cf545f" alt="" width="464"><figcaption></figcaption></figure>

<mark style="color:оранжевый;">**new\_order\_in\_calendar**</mark> — неизменяемая часть callback&#x20;

&#x20;<mark style="color:жёлтый;">**\[489046159]**</mark> — order\_id  идентификатор бронирования

<mark style="color:красный;">**Appointment\_date\_and\_time added**</mark>

<mark style="color:фиолетовый;">**на 30 минут**</mark> — длительность услуги&#x20;

<mark style="color:красный;">**К объекту: Тест 30**</mark> — к какому именно объекту было добавлено бронирование

Внешний вид сообщения callback:

*new\_order\_in\_calendar: \[489046159] К записи было добавлено время с 2025-06-01 14:00 до 2025-06-01 14:30 на 30 минут. Объект: Тест 30*

Вы можете настроить реакцию на callback, указав его значение в условии блока:

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

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


---

# 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/settings/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.