# Елементи екрана

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

На цій сторінці — як додавати елементи й що в них спільного. Що робить кожен елемент і як його налаштувати — на сторінках груп наприкінці.

## Як додати елемент

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

В області — до 100 елементів.

![Меню «Додати елемент»: елементи за групами](https://support.watbot.org/_media/uk/02-mini-apps/_images/add-element.webp?v=1791781231)

## Спільне для всіх елементів

- **Згорнутий список.** У налаштуваннях області кожен елемент — це рядок із назвою на зразок «Кнопка #2». Клік по рядку розгортає налаштування елемента. Клік по елементу на телефоні відкриває саме його.
- **Копіювання.** Кнопка «Копіювати» на елементі кладе його до буфера. Вставити його можна на будь-якому екрані: першим пунктом меню «Додати елемент» з'явиться «Вставити: …». У тій самій версії копія зберігає зв'язки з виходів.
- **Вирівнювання й колір.** Заголовок, текст, кнопка, зображення, оцінка й таймер мають «Вирівнювання»: «По лівому краю», «По центру», «По правому краю». Заголовок, текст, кнопка, роздільник, картка, перемикач, повзунок, оцінка й таймер мають «Колір» із палітри застосунку.

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

### Умова показу

«Умова показу» — наприкінці налаштувань будь-якого елемента, зокрема вкладеного в картку. Елемент побачать лише ті, для кого умова виконується. Якщо умова перевіряє поле цього ж екрана, елемент з'являється й зникає одразу, поки людина заповнює поле. У конструкторі такий елемент обведено пунктиром. Як задаються умови — на сторінці [Дані застосунку](https://support.watbot.org/uk/mini-apps/data#умови).

![Поле «Адреса доставки» з умовою показу: його видно, лише якщо ввімкнено перемикач «Потрібна доставка»](https://support.watbot.org/_media/uk/02-mini-apps/15-elements/_images/visibility.webp?v=1791781231)

## Виходи елементів

Деякі елементи додають екрану виходи — від них ведуть зв'язки до наступного блоку. Вихід з'являється сам, коли елемент додано або ввімкнено потрібне налаштування:

| Елемент | Вихід |
|---|---|
| [«Кнопка»](https://support.watbot.org/uk/mini-apps/elements/basic/button) | Завжди — «Кнопка "Ім'я"» |
| [«Зображення»](https://support.watbot.org/uk/mini-apps/elements/basic/image) | Із позначкою «Клік по зображенню — подія» |
| [«Список»](https://support.watbot.org/uk/mini-apps/elements/basic/list) | У кожного пункту — «Пункт "Назва"» |
| [«Картка»](https://support.watbot.org/uk/mini-apps/elements/containers/card) | Із позначкою «Клік по картці — подія». Виходи вкладених елементів — теж в екрана |
| [«Записи списку»](https://support.watbot.org/uk/mini-apps/elements/records/records) | Із позначкою «Натискання на запис — подія» |
| [«Картка запису»](https://support.watbot.org/uk/mini-apps/elements/records/record) | Із позначкою «Вести зв’язком, якщо запису немає» |
| [«Форма запису»](https://support.watbot.org/uk/mini-apps/elements/records/form) | Завжди — спрацьовує після успішного надсилання |
| [«Таймер»](https://support.watbot.org/uk/mini-apps/elements/widgets/countdown) | Із позначкою «Переходити далі» — «Час вийшов» |
| [«HTML-код»](https://support.watbot.org/uk/mini-apps/elements/widgets/html) | Виходи, які ви створюєте в налаштуваннях коду |

Виходи елементів запису на прийом описано на сторінці [Запис на прийом](https://support.watbot.org/uk/mini-apps/elements/booking).

Натискання на поля введення, таймер і карту виходами не вважаються.

## Групи елементів

- [Основні](https://support.watbot.org/uk/mini-apps/elements/basic) — заголовок, текст, зображення, відео, кнопка, список і роздільник.
- [Віджети](https://support.watbot.org/uk/mini-apps/elements/widgets) — таймер зворотного відліку, карта й власний HTML-код.
- [Контейнери](https://support.watbot.org/uk/mini-apps/elements/containers) — картка й акордеон, усередину яких кладуть інші елементи.
- [Поля введення](https://support.watbot.org/uk/mini-apps/elements/fields) — поле, багаторядкове поле, список вибору, перемикач, повзунок, оцінка зірками, дата й час.
- [Списки](https://support.watbot.org/uk/mini-apps/elements/records) — записи списку, картка запису та форма запису.
- [Запис на прийом](https://support.watbot.org/uk/mini-apps/elements/booking) — запис клієнтів до спеціалістів і екрани для майстрів.
- [Файли: картинки й відео](https://support.watbot.org/uk/mini-apps/elements/files) — які файли можна завантажити в елементи.