# Розділ popup

Спливаюче вікно — це вікно, яке з’являється поверх вебсторінки, зазвичай у відповідь на дію користувача на цільовій сторінці. Воно може містити форму збору даних, текстовий блок, галерею або будь-який інший тип секції, доступний у конструкторі MaviBot.

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

Цільова дія для спливаючого вікна в конструкторі MaviBot — натиснути на кнопку, що містить значення секції.

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

## Налаштування спливаючого вікна

Щоб створити секцію спливаючого вікна, натисніть «+», щоб відкрити меню із секціями. Потім знайдіть у меню секцію Pop-up, що відкриється. І натисніть на спливаюче вікно, щоб додати секцію на ваш сайт:

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

Ви можете додати будь-яку кількість секцій до спливаючого вікна, наприклад створивши інформаційне вікно на цільовій сторінці.

Щоб додати секцію спливаючого вікна, натисніть на **"Fill in popup"** кнопку. Відкриється модальне вікно із секціями, які можна вбудувати всередину спливаючого вікна:

<figure><img src="/files/1420e80bb35fa847092935b42818ef94dbbb46e6" alt=""><figcaption></figcaption></figure>

Ви можете додати кілька секцій сайту всередину спливаючого вікна, фактично створивши вторинну міні-цільову сторінку. Вікно підтримує необмежену кількість секцій, що дає змогу гнучко та комплексно компонувати макети.

Секції всередині спливаючого вікна налаштовуються так само, як і ті, які ви використовуєте для створення основного сайту.

## Налаштування кнопки

Спливаюче вікно відкриється на вашому сайті, коли буде натиснуто кнопку. Ви можете використати або **"Меню"** секцію, або **«Кнопки»** секцію, щоб створити цю тригерну кнопку.

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

### Як додати спливаюче вікно до секції "Menu"

Щоб додати спливаюче вікно до блоку Menu, скопіюйте значення секції вікна pop-up:

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

Потім перейдіть до налаштувань секції "Menu":

Крок 1. Додайте секцію меню та додайте кнопку в налаштуваннях вмісту секції Menu:

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

Крок 2. Виберіть дію для кнопки "In the current window":

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

Крок 3. Додайте значення ID спливаючого вікна до поля посилання:

<figure><img src="/files/25f5a67b16dd92f10db4e70a5d096ceafbdedaa7" alt=""><figcaption></figcaption></figure>

Крок 4. Збережіть налаштування сайту.

Крок 5. Тестування

Щоб побачити, як спливаюче вікно відкривається в меню сайту, перейдіть на сторінку сайту та натисніть на створену вами кнопку в меню.

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

Як бачите, спливаюче вікно відкривається лише тоді, коли ви натискаєте на кнопку, і ви можете задати цільову дію для клієнта: наприклад, записатися на прийом, прочитати більше тощо.

### Як додати спливаюче вікно до секції "Buttons"

Щоб додати спливаюче вікно до блоку Menu, скопіюйте значення секції вікна pop-up:

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

Потім перейдіть до налаштувань секції "Buttons":

Крок 1. Додайте блок "Buttons" на сайт:

<figure><img src="/files/28018aeb86bfcd8f15253462f997fd628d3dcc4f" alt=""><figcaption></figcaption></figure>

Крок 2. Додайте кнопку в налаштуваннях вмісту блоку:

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

Крок 3. Установіть функцію посилання кнопки:

<figure><img src="/files/0fca97677ed604f998f2c4d5789ff110120e6361" alt=""><figcaption></figcaption></figure>

Крок 4. Введіть значення із секції спливаючого вікна в посилання кнопки:

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

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

Крок 5. Натисніть кнопку збереження, щоб додати кнопку з посиланням на спливаюче вікно

<figure><img src="/files/0c1c50f7b39efd627db0a5db0b00484452041f8c" alt=""><figcaption></figcaption></figure>

Крок 6. Тестування

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

<figure><img src="/files/579a7bf50d205ac9f1e764c57a33d4de626cc826" alt=""><figcaption></figcaption></figure>

Далі натисніть на створену вами кнопку з функцією відкриття спливаючого вікна:

<figure><img src="/files/c9475f8c84dbb5dcc1ea1c2e4e0a2a82be2c2904" 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/websites/saiti/blocks/popup.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.