# Конструктор

Конструктор відкривається пунктом «Конструктор» у меню застосунку. Це карта, на якій розміщено блоки та зв'язки між ними — схема застосунку. Зі схеми видно, який екран відкриється першим і куди людина потрапить після кожного натискання.

![Схема міні-застосунку: блок «Старт» і перший екран](https://support.watbot.org/_media/uk/02-mini-apps/_images/builder.webp?v=1791781231)

## Схема: блоки, виходи та зв'язки

**Блок** — один крок застосунку. Блоки бувають трьох видів:

- екрани та все, що показується поверх екрана: вікна, меню, діалоги, повідомлення;
- блоки без екрана — вони щось роблять між екранами: перевіряють умову, пишуть запис у список, надсилають повідомлення від бота;
- службові — «Старт» і «Нотатка».

Повний перелік — на сторінці [Блоки й дії](https://support.watbot.org/uk/mini-apps/blocks).

**Вихід** — рядок у нижній частині блоку. В екрана виходами стають його кнопки, пункти списків та інші елементи, на які можна натиснути; у блоку без екрана — результати його роботи, наприклад «Так» і «Ні» в умови. Виходи «вдалося» пофарбовано зеленим, «не вдалося» — червоним.

**Зв'язок** — лінія від виходу до блоку, який відкриється або виконається наступним.

- Щоб провести зв'язок, потягніть від кружечка біля виходу до потрібного блоку.
- Якщо відпустити зв'язок на порожньому місці карти, відкриється список блоків: вибраний блок буде створено й одразу підключено. Угорі списку — «Нещодавні», пункт «Ще» відкриває вікно «Додати блок».
- Щоб видалити зв'язок, наведіть курсор на лінію й натисніть значок, який на ній з'явиться.
- Вихід зі зв'язком має стрілку «Перейти до блоку, куди веде вихід».

![Звʼязок відпущено на порожньому місці карти: список блоків](https://support.watbot.org/_media/uk/02-mini-apps/_images/connect-menu.webp?v=1791781231)

Вихід «Продовжити» спрацьовує сам, щойно застосунок дійшов до блоку. Так за один крок можна, наприклад, відкрити екран і одразу показати поверх нього вікно.

**Стартовий блок** позначено плашкою «Старт» — із нього застосунок починається. У новому застосунку це блок «Старт», з'єднаний із першим екраном. Зробити стартовим інший блок — меню блоку → «Зробити стартовим».

## Панель над картою

![Панель над картою з кнопкою «Допомога ШІ»](https://support.watbot.org/_media/uk/02-mini-apps/_images/toolbar-ai.webp?v=1791781231)

| Кнопка | Що робить |
|---|---|
| Стрілки «скасувати» та «повторити» | Скасовують і повертають дії на схемі: додавання, видалення, переміщення, правку блоку, зв'язок. Комбінації — Ctrl+Z і Ctrl+Y, на Mac — ⌘Z і ⇧⌘Z |
| «Колір і сітка карти» | Колірна схема карти, вигляд сітки та спосіб керування — миша або тачпад |
| «Сховати порожні зв’язки» | Ховає виходи, які нікуди не ведуть. Поки їх приховано, нового зв'язку від них не протягнути |
| «Код застосунку» (значок «</>») | Свій JavaScript на весь застосунок — див. [Код у застосунку](https://support.watbot.org/uk/mini-apps/code) |
| «Допомога ШІ» | Відкриває ШІ-чат щодо цього застосунку й відкритої версії — див. [Збирання застосунку в ШІ-чаті](https://support.watbot.org/uk/mini-apps/ai-builder) |
| «Попередній перегляд» | Відкриває застосунок поруч зі схемою |
| «Додати блок» | Відкриває вікно вибору блоку |
| «Версія N» або «Опублікувати» | Версії застосунку та публікація — див. [Версії та публікація](https://support.watbot.org/uk/mini-apps/publish) |

Клік правою кнопкою по порожньому місцю карти відкриває меню: «Додати блок…», «Додати нотатку», «Вставити».

## Додати блок

Вікно «Додати блок» — це пошук за назвою та описом і категорії ліворуч: «Усі», «Екрани», «Оверлеї», «Дані та логіка», «Чат-бот», «Списки», «Службові».

Блоки запису клієнтів — у категорії «Запис на прийом».

Клік по картці ставить блок на карту. Клавіша Enter у пошуку додає перший зі знайдених блоків.

## Дії з блоком

Короткий клік по блоку відкриває його налаштування. Блок перетягується за будь-яке місце.

У шапці блоку два значки:

- «▶» — «Попередній перегляд з цього блоку»: застосунок запуститься не зі стартового блоку, а з вибраного.
- «⋯» — меню блоку.

| Пункт меню | Що робить |
|---|---|
| «Перейменувати» | Змінює назву блоку на схемі. Її ж видно в аналітиці та в налагодженні |
| «Зробити стартовим» | Застосунок починатиметься з цього блоку. Пункту немає в блоків, які не можуть бути стартовими, — у вікон, діалогів і блоків, що працюють із даними |
| «Зробити модальним вікном» / «Зробити екраном» | Перетворює екран на модальне вікно й назад — див. нижче |
| «Створити копію» | Ставить поруч копію блоку |
| «Скопіювати» | Кладе блок до буфера, щоб вставити в іншому місці або в іншій версії |
| «Скопіювати посилання» | Посилання відкриває конструктор одразу біля цього блоку |
| «Видалити» | Видаляє блок і його зв'язки |

![Меню блока «⋯»](https://support.watbot.org/_media/uk/02-mini-apps/_images/block-menu.webp?v=1791781231)

Щоб вибрати кілька блоків, позначте їх галочкою на місці значка блоку, клікайте по блоках із затиснутим Shift або ввімкніть інструмент «Виділення рамкою». Над картою з'явиться панель «Вибрано N блоків»: вибране можна скопіювати й видалити. Комбінації Ctrl+C і Ctrl+V (на Mac — ⌘C і ⌘V) копіюють виділене та вставляють під курсором.

## Нотатки

Нотатка — кольоровий листок на карті з поясненням для тих, хто збирає застосунок. До сценарію вона не входить.

- Додати: клік правою кнопкою по карті → «Додати нотатку» або блок «Нотатка» у вікні «Додати блок».
- Клік по листку відкриває правку тексту. Ctrl+Enter (на Mac — ⌘Enter) зберігає, Esc скасовує.
- Колір — у меню листка: «Жовта», «Зелена», «Голуба», «Рожева», «Бузкова», «Сіра». Розмір змінюється за куточок.

![Нотатка на карті та її меню: кольори, «Скопіювати», «Видалити»](https://support.watbot.org/_media/uk/02-mini-apps/_images/note.webp?v=1791781231)

## Редактор екрана

Клік по блоку «Екран» відкриває вікно «Редагувати екран». Ліворуч — телефон з екраном, праворуч — налаштування. Перемикач «iOS» / «Android» у заголовку показує, як екран виглядає в кожній системі. Зміни застосовуються кнопкою «Зберегти».

### Вигляд екрана

На порожньому екрані телефона стоїть запитання «Яким буде екран?»:

| Вигляд | Що це |
|---|---|
| «Стандартне вікно» | Шапка й області з елементами |
| «Вкладки знизу» | Розділи з панеллю вкладок унизу. Кожна вкладка має свій вміст |
| «HTML-код» | Увесь екран — ваш HTML-код. Описано на сторінці [Код у застосунку](https://support.watbot.org/uk/mini-apps/code) |

![Порожній екран: вибір виду екрана](https://support.watbot.org/_media/uk/02-mini-apps/_images/screen-kind.webp?v=1791781231)

### Області

Стандартне вікно збирається з областей — «З чого зібрати екран?»:

| Область | Що в ній | Головні налаштування |
|---|---|---|
| «Шапка» | Заголовок і кнопки вгорі | «Заголовок», «Колір шапки», «Колір заголовка», «Прозорий в iOS», «Не показувати межу», кнопки |
| «Контент» | Текст, кнопки, поля, списки та інші [елементи](https://support.watbot.org/uk/mini-apps/elements) | «Колір фону області», «Відступи по краях», «Елементи» |
| «Сітка» | Елементи в колонках і рядках | «Рядки», «Ширина колонки» — «Автоматично» або частка від 12, «Вирівнювання по вертикалі», «Обмежити ширину» |

Шапка в екрана одна. Областей контенту й сіток може бути кілька; наступну додає кнопка «+» під останньою областю на телефоні.

Клік по області або елементу на телефоні відкриває його налаштування праворуч. Посилання «До екрана» над налаштуваннями повертає назад.

![Редактор екрана: шапку вибрано на телефоні, праворуч її налаштування](https://support.watbot.org/_media/uk/02-mini-apps/_images/header-settings.webp?v=1791781231)

**Кнопки шапки** поділяються на чотири групи: «Кнопки на початку», «Кнопки в кінці», «Первинні кнопки», «Вторинні кнопки» — до чотирьох у кожній. Для кнопки задаються «Ім'я кнопки», «Іконка», «Колір», «Заливка», «Форма» та «Розмір». Кожна кнопка шапки — це вихід блоку.

**Вкладки.** На екрані «Вкладки знизу» — до дев'яти вкладок. Для вкладки задаються «Ім'я вкладки», іконка та «Значок» — позначка з числом або текстом. Спільні налаштування: «Колір панелі вкладок», «Колір вкладки», «Колір вибраної вкладки».

**Умова показу.** Шапку, область контенту, сітку та кожну кнопку шапки можна показувати не всім: увімкніть «Умова показу» в їхніх налаштуваннях. Як задаються умови — на сторінці [Дані застосунку](https://support.watbot.org/uk/mini-apps/data).

У сітці — до 50 рядків і до 12 колонок у рядку. В одній області — до 100 елементів.

### Екран на схемі

Екран видно просто в блоці на схемі. Високий екран обрізано за висотою телефона — смуга «Показати цілком» унизу блоку розгортає його, «Згорнути» повертає назад.

![Високий екран на схемі й смуга «Показати повністю»](https://support.watbot.org/_media/uk/02-mini-apps/_images/screen-expand.webp?v=1791781231)

## Екран і вікно

Екран відкривається на місці попереднього. Модальне вікно показується поверх поточного екрана й закривається, не забираючи людину з нього.

Блок «Модальне вікно» має два види:

- «Вікно поверх екрана»;
- «Шторка знизу» — з налаштуваннями «Висота шторки» (25, 50, 75 або 100 %) і «Показувати смужку захоплення».

Налаштування «Закривати при натисканні поза вікном» і «Затемнювати екран» є в обох видів.

![Модальне вікно «Шторка знизу» та його налаштування](https://support.watbot.org/_media/uk/02-mini-apps/_images/modal-settings.webp?v=1791781231)

Готовий екран перетворюється на вікно, а вікно — на екран: меню блоку → «Зробити модальним вікном» або «Зробити екраном». Елементи та зв'язки зберігаються. Стартовий екран і екран із HTML-коду зробити вікном не можна.

Решту блоків, які показуються поверх екрана, — меню, діалог, панель дій, повідомлення — описано на сторінці [Екрани й оверлеї](https://support.watbot.org/uk/mini-apps/blocks/screens).

## Кольори та темна тема

Колір елемента вибирається з палітри версії: «Первинний», «Вторинний», «Третинний», «Успіх», «Попередження», «Небезпека», «Світлий», «Середній», «Темний». Пункт «За замовчуванням» залишає колір, заданий системою.

Кожен колір палітри має два значення — «Колір для світлої теми» та «Колір для темної теми». Застосунок сам вибирає потрібне.

- Значення кольору змінюється просто у списку вибору: кнопка «Редагувати», потім олівець біля кольору. Колір зміниться всюди, де його використано.
- Кнопка «Додати колір» створює свій колір: «Назва кольору» та два значення. У палітрі — до 50 кольорів.
- Свій колір можна видалити. Перед видаленням переконайтеся, що він ніде не використовується.

![Редагування кольору палітри: значення для світлої й темної теми](https://support.watbot.org/_media/uk/02-mini-apps/_images/color-edit.webp?v=1791781231)

Палітра зберігається у версії: нова версія отримує копію палітри тієї, з якої її створили.

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

## Попередній перегляд

Кнопка «Попередній перегляд» відкриває праворуч від схеми панель «Попередній перегляд · версія N» з телефоном. У телефоні працює справжній застосунок із тією версією, яку відкрито в конструкторі, — зокрема неопублікованою.

| Елемент панелі | Що робить |
|---|---|
| «iOS» / «Android» | Оформлення, як у вибраній системі |
| «Звідки відкрито» | Ніби застосунок відкрили з вибраного місця: «Браузер», «З екрана (PWA)», «Telegram», «MAX», «Веб-чат». Так перевіряють гілки блоку «Джерело запуску» |
| «Почати спочатку» | Скидає змінні попереднього перегляду й відкриває застосунок зі стартового блоку |
| «Стежити за поточним блоком» | Схема сама прокручується до блоку, який зараз відкрито в застосунку, і підсвічує його |
| «Налагодження» | Відкриває панель налагодження ліворуч від телефона |

![Панель «Попередній перегляд» із застосунком](https://support.watbot.org/_media/uk/02-mini-apps/_images/preview.webp?v=1791781231)

Під телефоном — рядок «Зараз: …» з назвою відкритого блоку. Клік по ньому показує блок на схемі.

> [!WARNING]
> Попередній перегляд працює зі справжніми даними: змінні та записи списків зберігаються. Запис, доданий у попередньому перегляді, з'явиться у списку проєкту.

Кожен, хто відкрив конструктор, має свого користувача попереднього перегляду: двоє співробітників не заважають одне одному змінними. У розділі «Користувачі» та в аналітиці попередній перегляд не враховується.

### Налагодження

У панелі налагодження дві вкладки.

- **«Шлях»** — якими блоками пройшов сценарій після кожного натискання: який вихід спрацював, який екран показано, де сценарій зупинився. Клік по кроку показує блок на схемі. Значок кошика — «Очистити шлях».
- **«Змінні»** — значення змінних після останнього кроку. Ті, що змінилися, позначено «змінено», нові — «нова». Є пошук за іменем.

![Налагодження: шлях сценарію поруч із попереднім переглядом](https://support.watbot.org/_media/uk/02-mini-apps/_images/debug.webp?v=1791781231)

Помилки запитів і коду, що сталися в попередньому перегляді, потрапляють до [журналу помилок](https://support.watbot.org/uk/mini-apps/users) з позначкою «Попередній перегляд».

## Якщо щось не працює

- **«Ця версія зараз редагується іншим запитом».** Версію одночасно зберігає інша людина або інша вкладка. Повторіть дію.
- **«Досягнуто ліміту кількості сторінок/блоків…».** У версії понад 10 000 блоків або вона більша за 50 МБ. Видаліть зайві блоки.
- **«Застосунок відкривається стартовим екраном — його не можна зробити модальним вікном».** Спершу призначте стартовим інший екран.
- **«Файли такого типу (…) не можна використовувати в застосунку».** На екран потрапив файл забороненого типу, наприклад SVG. Замініть його картинкою JPEG, PNG, GIF, WebP або AVIF.
- **«Помилка валідації. Деталі у формі редагування елемента».** Одне з полів заповнено неправильно — його підсвічено в налаштуваннях елемента.