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

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

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

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

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

Якщо сайт створено за допомогою конструктора MaviBot, відкрийте вкладку «Сайти» та скопіюйте посилання на ваш сайт MaviBot.

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

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

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

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

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

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

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

Ви також можете налаштувати події аналітики.

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

Для цього введіть у відповідне поле Facebook Pixel, Google Analytics або Metrica ID та вкажіть значення події.

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

### Налаштування зовнішнього вигляду

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

За потреби ви можете відредагувати фон і параметри відображення секції віджета. Для цього наведіть курсор на секцію та натисніть вкладку **"Додаткове налаштування"** .

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

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

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

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

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

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

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

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

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

<div data-with-frame="true"><figure><img src="/files/73b8ff398bf8f44caa16f20d9de20f6bfd2aad54" 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/uk/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.