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

Конструктор открывается пунктом «Конструктор» в меню приложения. Это карта, на которой лежат блоки и связи между ними — схема приложения. По схеме видно, какой экран откроется первым и куда человек попадёт после каждого нажатия.

![Схема мини-приложения: блок «Старт» и первый экран](https://support.watbot.ru/_media/ru/02-mini-apps/_images/builder.webp?v=1791781230)

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

**Блок** — один шаг приложения. Блоки бывают трёх видов:

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

Полный перечень — на странице [Блоки и действия](https://support.watbot.ru/mini-apps/blocks).

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

**Связь** — линия от выхода к блоку, который откроется или выполнится следующим.

- Чтобы провести связь, потяните от кружка у выхода к нужному блоку.
- Если отпустить связь на пустом месте карты, откроется список блоков: выбранный блок создастся и сразу подключится. Вверху списка — «Недавние», пункт «Еще» открывает окно «Добавить блок».
- Чтобы удалить связь, наведите на линию и нажмите значок, который появится на ней.
- У выхода со связью есть стрелка «Перейти к блоку, куда ведёт выход».

![Связь отпущена на пустом месте карты: список блоков](https://support.watbot.ru/_media/ru/02-mini-apps/_images/connect-menu.webp?v=1791781230)

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

**Стартовый блок** отмечен плашкой «Старт» — с него приложение начинается. В новом приложении это блок «Старт», соединённый с первым экраном. Сделать стартовым другой блок — меню блока → «Сделать стартовым».

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

![Панель над картой с кнопкой «Помощь ИИ»](https://support.watbot.ru/_media/ru/02-mini-apps/_images/toolbar-ai.webp?v=1791781230)

| Кнопка | Что делает |
|---|---|
| Стрелки «отменить» и «повторить» | Отменяют и возвращают действия на схеме: добавление, удаление, перемещение, правку блока, связь. Сочетания — Ctrl+Z и Ctrl+Y, на Mac — ⌘Z и ⇧⌘Z |
| «Цвет и сетка карты» | Цветовая схема карты, вид сетки и способ управления — мышь или тачпад |
| «Скрыть пустые связи» | Прячет выходы, которые никуда не ведут. Пока они скрыты, новую связь от них не протянуть |
| «Код приложения» (значок «</>») | Свой JavaScript на всё приложение — см. [Код в приложении](https://support.watbot.ru/mini-apps/code) |
| «Помощь ИИ» | Открывает ИИ-чат по этому приложению и открытой версии — см. [Сборка приложения в ИИ-чате](https://support.watbot.ru/mini-apps/ai-builder) |
| «Предпросмотр» | Открывает приложение рядом со схемой |
| «Добавить блок» | Открывает окно выбора блока |
| «Версия N» или «Опубликовать» | Версии приложения и публикация — см. [Версии и публикация](https://support.watbot.ru/mini-apps/publish) |

Правый клик по пустому месту карты открывает меню: «Добавить блок…», «Добавить заметку», «Вставить».

## Добавить блок

Окно «Добавить блок» — это поиск по названию и описанию и категории слева: «Все», «Экраны», «Оверлеи», «Данные и логика», «Чат-бот», «Списки», «Служебные».

Блоки для продажи товаров собраны в категории «Магазин».

Блоки записи клиентов — в категории «Запись на приём».

Клик по карточке ставит блок на карту. Клавиша Enter в поиске добавляет первый блок из найденных.

## Действия с блоком

Короткий клик по блоку открывает его настройки. Блок перетаскивается за любое место.

В шапке блока два значка:

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

| Пункт меню | Что делает |
|---|---|
| «Переименовать» | Меняет название блока на схеме. Оно же видно в аналитике и в отладке |
| «Сделать стартовым» | Приложение будет начинаться с этого блока. Пункта нет у блоков, которые стартовыми быть не могут, — у окон, диалогов и блоков, работающих с данными |
| «Сделать модальным окном» / «Сделать экраном» | Превращает экран в модальное окно и обратно — см. ниже |
| «Создать копию» | Ставит рядом копию блока |
| «Скопировать» | Кладёт блок в буфер, чтобы вставить в другом месте или в другой версии |
| «Скопировать ссылку» | Ссылка открывает конструктор сразу у этого блока |
| «Удалить» | Удаляет блок и его связи |

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

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

## Заметки

Заметка — цветной листок на карте с пояснением для тех, кто собирает приложение. В сценарий она не входит.

- Добавить: правый клик по карте → «Добавить заметку» или блок «Заметка» в окне «Добавить блок».
- Клик по листку открывает правку текста. Ctrl+Enter (на Mac — ⌘Enter) сохраняет, Esc отменяет.
- Цвет — в меню листка: «Жёлтая», «Зелёная», «Голубая», «Розовая», «Сиреневая», «Серая». Размер меняется за уголок.

![Заметка на карте и её меню: цвета, «Скопировать», «Удалить»](https://support.watbot.ru/_media/ru/02-mini-apps/_images/note.webp?v=1791781230)

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

Клик по блоку «Экран» открывает окно «Редактировать экран». Слева — телефон с экраном, справа — настройки. Переключатель «iOS» / «Android» в заголовке показывает, как экран выглядит на каждой системе. Изменения применяются кнопкой «Сохранить».

### Вид экрана

У пустого экрана на телефоне стоит вопрос «Какой будет экран?»:

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

![Пустой экран: «Какой будет экран?»](https://support.watbot.ru/_media/ru/02-mini-apps/_images/screen-kind.webp?v=1791781230)

### Области

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

| Область | Что в ней | Главные настройки |
|---|---|---|
| «Шапка» | Заголовок и кнопки сверху | «Заголовок», «Цвет шапки», «Цвет заголовка», «Прозрачный в iOS», «Не показывать границу», кнопки |
| «Контент» | Текст, кнопки, поля, списки и другие [элементы](https://support.watbot.ru/mini-apps/elements) | «Цвет фона области», «Отступы по краям», «Элементы» |
| «Сетка» | Элементы в колонках и строках | «Строки», «Ширина колонки» — «Автоматически» или доля от 12, «Выравнивание по вертикали», «Ограничить ширину» |

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

Клик по области или элементу на телефоне открывает его настройки справа. Ссылка «К экрану» над настройками возвращает назад.

![Редактор экрана: шапка выбрана на телефоне, справа её настройки](https://support.watbot.ru/_media/ru/02-mini-apps/_images/header-settings.webp?v=1791781230)

**Кнопки шапки** делятся на четыре группы: «Кнопки в начале», «Кнопки в конце», «Первичные кнопки», «Вторичные кнопки» — до четырёх в каждой. У кнопки задаются «Имя кнопки», «Иконка», «Цвет», «Заливка», «Форма» и «Размер». Каждая кнопка шапки — выход блока.

**Вкладки.** На экране «Вкладки снизу» — до девяти вкладок. У вкладки задаются «Имя вкладки», иконка и «Счетчик» — значок с числом или текстом. Общие настройки: «Цвет панели вкладок», «Цвет вкладки», «Цвет выбранной вкладки».

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

В сетке — до 50 строк и до 12 колонок в строке. В одной области — до 100 элементов.

### Экран на схеме

Экран виден прямо в блоке на схеме. Высокий экран обрезан по высоте телефона — полоса «Показать целиком» внизу блока разворачивает его, «Свернуть» возвращает обратно.

![Высокий экран на схеме и полоса «Показать целиком»](https://support.watbot.ru/_media/ru/02-mini-apps/_images/screen-expand.webp?v=1791781230)

## Экран и окно

Экран открывается на месте предыдущего. Модальное окно показывается поверх текущего экрана и закрывается, не уводя человека с него.

У блока «Модальное окно» два вида:

- «Окно поверх экрана»;
- «Шторка снизу» — с настройками «Высота шторки» (25, 50, 75 или 100 %) и «Показывать полоску захвата».

Настройки «Закрывать по нажатию вне окна» и «Затемнять экран» есть у обоих видов.

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

Готовый экран превращается в окно, а окно — в экран: меню блока → «Сделать модальным окном» или «Сделать экраном». Элементы и связи сохраняются. Стартовый экран и экран из HTML-кода окном сделать нельзя.

Остальные блоки, которые показываются поверх экрана, — меню, диалог, панель действий, сообщение — описаны на странице [Экраны и оверлеи](https://support.watbot.ru/mini-apps/blocks/screens).

## Цвета и тёмная тема

Цвет элемента выбирается из палитры версии: «Первичный», «Вторичный», «Третичный», «Успех», «Предупреждение», «Опасность», «Светлый», «Средний», «Темный». Пункт «По умолчанию» оставляет цвет, заданный системой.

У каждого цвета палитры два значения — «Цвет для светлой темы» и «Цвет для темной темы». Приложение само выбирает нужное.

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

![Правка цвета палитры: значения для светлой и тёмной темы](https://support.watbot.ru/_media/ru/02-mini-apps/_images/color-edit.webp?v=1791781230)

Палитра хранится в версии: у новой версии — копия палитры той, из которой её создали.

Какой будет тема — светлой или тёмной, — решает место, где открыто приложение: в Telegram приложение повторяет тему мессенджера, в браузере — тему системы, в предпросмотре — тему кабинета.

## Предпросмотр

Кнопка «Предпросмотр» открывает справа от схемы панель «Предпросмотр · версия N» с телефоном. В телефоне работает настоящее приложение с той версией, которая открыта в конструкторе, — в том числе неопубликованной.

| Элемент панели | Что делает |
|---|---|
| «iOS» / «Android» | Оформление, как на выбранной системе |
| «Откуда открыто» | Как будто приложение открыли из выбранного места: «Браузер», «С экрана (PWA)», «Telegram», «MAX», «Веб-чат». Так проверяют ветки блока «Источник запуска» |
| «Начать заново» | Сбрасывает переменные предпросмотра и открывает приложение со стартового блока |
| «Следить за текущим блоком» | Схема сама прокручивается к блоку, который сейчас открыт в приложении, и подсвечивает его |
| «Отладка» | Открывает панель отладки слева от телефона |

![Панель «Предпросмотр» с приложением](https://support.watbot.ru/_media/ru/02-mini-apps/_images/preview.webp?v=1791781230)

Под телефоном — строка «Сейчас: …» с названием открытого блока. Клик по ней показывает блок на схеме.

> [!WARNING]
> Предпросмотр работает с настоящими данными: переменные и записи списков сохраняются. Запись, добавленная в предпросмотре, появится в списке проекта.

У каждого, кто открыл конструктор, свой пользователь предпросмотра: двое сотрудников не мешают друг другу переменными. В разделе «Пользователи» и в аналитике предпросмотр не учитывается.

### Отладка

В панели отладки две вкладки.

- **«Путь»** — по каким блокам прошёл сценарий после каждого нажатия: какой выход сработал, какой экран показан, где сценарий остановился. Клик по шагу показывает блок на схеме. Значок корзины — «Очистить путь».
- **«Переменные»** — значения переменных после последнего шага. Изменившиеся отмечены «изменена», появившиеся — «новая». Есть поиск по имени.

![Отладка: путь сценария рядом с предпросмотром](https://support.watbot.ru/_media/ru/02-mini-apps/_images/debug.webp?v=1791781230)

Ошибки запросов и кода, случившиеся в предпросмотре, попадают в [журнал ошибок](https://support.watbot.ru/mini-apps/users) с отметкой «Предпросмотр».

## Если что-то не работает

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