# Віджет онлайн-бронювання для сайту

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

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

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

## Як створити віджет

{% hint style="info" %}
Спочатку потрібно створити філію та налаштувати послуги, призначивши їх співробітникам. Ми пояснили, як це зробити, у статті «Налаштування послуг для бронювання».
{% endhint %}

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

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

Якщо в проєкті ще не створено жодного віджета, у розділі «Віджети» ви побачите чотири кнопки в центрі екрана.

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

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

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

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

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

У цій вкладці потрібно ввести назву віджета (яка відображатиметься на вебсайті) та домен сайту, на якому ви хочете розмістити віджет онлайн-бронювання (якщо сайт не створений у MaviBot). Якщо сайт створено за допомогою конструктора MaviBot, вказувати домен не потрібно.
&#x20;Далі виберіть філію, чиї послуги та персонал будуть показані у віджеті:

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

Тепер можна перейти до налаштування віджета.

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

### Налаштування вигляду

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

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

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

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

**Кольорова схема віджета**

Ви можете обрати кольорову схему віджета на власний розсуд:

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

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

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

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

3. Колір тексту: змінює колір тексту кнопки або основного тексту залежно від вибраного параметра.

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

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

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

За замовчуванням на кнопках відображається текст **«Обрати послуги»** і **«Обрати спеціаліста**», але ви можете налаштувати текст на свій розсуд:

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

Тепер збережіть ваші налаштування:

<figure><img src="/files/428feb05c7638a50730d033a7d64375433ee3b28" alt=""><figcaption></figcaption></figure>

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

Перейдіть у режим редагування сайту:

<figure><img src="/files/3ceb362ed86a451d8b090e66f55dbc8b66b5e2cb" alt=""><figcaption></figcaption></figure>

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

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

У налаштуваннях контенту оберіть, який віджет показувати на сайті (якщо у вас кілька віджетів онлайн-бронювання):

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

За потреби ви можете відредагувати фон і налаштування відображення розділу віджета. Для цього наведіть курсор на розділ і натисніть кнопку **«Налаштування»** :

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

Встановіть потрібні налаштування фону та відображення:

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

Збережіть налаштування сайту.
\
Тепер ваші клієнти можуть бронювати послуги цілодобово, просто відвідавши ваш вебсайт:

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

**Як вставити віджет на інший сайт**

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

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

Якщо вам потрібно вставити код на ваш сайт, скопіюйте скрипт і вставте його у свій лендінг. <br>

Якщо ви використовуєте віджет на власних сайтах, НЕ створених у MaviBot, обов’язково вкажіть клас елемента в наданому полі:

<figure><img src="/files/0b8bd688cb70965a1e0b5e26485a9fcf563877e5" 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/4344cba5e46df0d1f1da9ae80d7dcdf196283279" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
Увага!

Не забудьте зберегти налаштування блоку.
{% endhint %}

**Крок 2. Знайдіть потрібний ID сторінки сайту.** <br>

Щоб знайти ID сторінки сайту, перейдіть до відповідного розділу:

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

Натисніть на плитку потрібного сайту, щоб перейти до налаштувань сторінки цього сайту:

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

Потім наведіть курсор на рядок зі сторінкою, на якій ви створили **«Онлайн-бронювання»** розділ:

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

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

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

**Крок 3. Додайте кнопку до блоку в конструкторі.** <br>

Далі розгорніть вкладку налаштувань «Кнопки» (натисніть на «Кнопки») і натисніть **«+ Додати кнопку»**:

<figure><img src="/files/795ddefcb7c31c52ab44ca55765c67c110e7f0bf" alt=""><figcaption></figcaption></figure>

Після натискання відкриються налаштування кнопки для додавання нової кнопки:

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

Тут вам потрібно:

* Вказати назву кнопки: це може бути будь-яка назва.
* Вказати функцію кнопки: це має бути кнопка Telegram Web App.

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

* Вказати посилання для відкриття сайту під час натискання кнопки:

Посилання вже збережене у змінній за допомогою калькулятора та `quiz_link` функції, тож у полі URL введіть призначену змінну `booker_link` за допомогою інтерполяції — тобто вставте змінну всередину `#{}`, яка містить посилання на ваш сайт і віджет.

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

Далі натисніть кнопку **«Додати»** щоб зберегти налаштування кнопки та додати її до блоку. Обов’язково натисніть **«Зберегти»** після цього, щоб налаштування блоку не були втрачені.

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

Повністю налаштований блок виглядає так:

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

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

<figure><img src="/files/9bbb2a69aa04241d6e4bed5dde77a4c46e456ca7" alt=""><figcaption><p>Приклад: «Блок стану діалогу» з кнопкою Telegram Web App</p></figcaption></figure>

Після цього кнопка Web App із віджетом онлайн-бронювання буде доступна в боті:

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

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

Після того як клієнт забронює запис, у діалозі буде надіслано callback-сповіщення про бронювання, яке виглядатиме так:

<figure><img src="/files/2b7ca7db94639174eafc4fb5ef575e9310669f7d" alt="" width="464"><figcaption></figcaption></figure>

<mark style="color:orange;">**new\_order\_in\_calendar**</mark> — незмінна частина callback&#x20;

&#x20;<mark style="color:yellow;">**\[489046159]**</mark> — order\_id  ID бронювання

<mark style="color:red;">**Appointment\_date\_and\_time додано**</mark>

<mark style="color:purple;">**на 30 хвилин**</mark> — тривалість послуги&#x20;

<mark style="color:red;">**Об’єкту: Тест 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/cdbf6648cea41196c2395adc299eee6deb5116c4" 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/uk/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.