# Builder

The builder opens with the "Builder" item in the app's menu. It is a map with blocks and the links between them — the app's scheme. The scheme shows which screen opens first and where a person ends up after each tap.

![Mini app scheme: the Start block and the first screen](https://support.watbot.org/_media/en/02-mini-apps/_images/builder.webp?v=1791781230)

## The scheme: blocks, exits and links

A **block** is one step of the app. There are three kinds of blocks:

- screens and everything shown over a screen: windows, menus, dialogs, messages;
- blocks without a screen — they do something between screens: check a condition, write a record to a list, send a message from the bot;
- utility blocks — "Start" and "Note".

The full list is on the [Blocks and actions](https://support.watbot.org/mini-apps/blocks) page.

An **exit** is a line at the bottom of a block. On a screen, its buttons, list items and other tappable elements become exits; on a block without a screen, the outcomes of its work do — for example, "Yes" and "No" on a condition. "It worked" exits are green, "it failed" exits are red.

A **link** is a line from an exit to the block that opens or runs next.

- To draw a link, drag from the circle at the exit to the block you need.
- If you drop a link on an empty spot of the map, a list of blocks opens: the chosen block is created and connected right away. At the top of the list is "Recent"; the "More" item opens the "Add a block" window.
- To delete a link, hover over the line and click the icon that appears on it.
- An exit with a link has the "Go to the block this exit leads to" arrow.

![Connection dropped on an empty spot of the map: list of blocks](https://support.watbot.org/_media/en/02-mini-apps/_images/connect-menu.webp?v=1791781230)

The "Continue" exit fires by itself as soon as the app reaches the block. This way you can, for example, open a screen and immediately show a window over it in one step.

The **start block** has the "Start" label — the app begins with it. In a new app it is the "Start" block connected to the first screen. To make another block the start one, use the block menu → "Set as start block".

## The toolbar above the map

![Toolbar above the map with the "AI help" button](https://support.watbot.org/_media/en/02-mini-apps/_images/toolbar-ai.webp?v=1791781230)

| Button | What it does |
|---|---|
| The "undo" and "redo" arrows | Undo and redo actions on the scheme: adding, deleting, moving, editing a block, a link. Shortcuts — Ctrl+Z and Ctrl+Y, on a Mac — ⌘Z and ⇧⌘Z |
| "Map color and grid" | The map's colour scheme, the grid style and the control mode — mouse or touchpad |
| "Hide empty connections" | Hides exits that lead nowhere. While they are hidden, you cannot draw a new link from them |
| "App code" (the "</>" icon) | Your own JavaScript for the whole app — see [Code in the app](https://support.watbot.org/mini-apps/code) |
| "AI help" | Opens the AI chat about this app and the open version — see [Building an app in the AI chat](https://support.watbot.org/mini-apps/ai-builder) |
| "Preview" | Opens the app next to the scheme |
| "Add a block" | Opens the block selection window |
| "Version N" or "Publish" | App versions and publishing — see [Versions and publishing](https://support.watbot.org/mini-apps/publish) |

A right click on an empty spot of the map opens a menu: "Add a block…", "Add a note", "Paste".

## Add a block

The "Add a block" window has a search by name and description and categories on the left: "All", "Screens", "Overlays", "Data and logic", "Chatbot", "Lists", "Utility".

Blocks for booking clients are in the "Appointments" category.

A click on a card puts the block on the map. The Enter key in the search adds the first block found.

## Actions with a block

A short click on a block opens its settings. You can drag a block by any spot.

There are two icons in the block header:

- "▶" — "Preview from this block": the app starts from the selected block instead of the start block.
- "⋯" — the block menu.

| Menu item | What it does |
|---|---|
| "Rename" | Changes the block's name on the scheme. The same name is shown in analytics and in debugging |
| "Set as start block" | The app will begin with this block. The item is missing on blocks that cannot be the start one — windows, dialogs and blocks that work with data |
| "Convert to modal" / "Convert to screen" | Turns a screen into a modal and back — see below |
| "Duplicate" | Places a copy of the block next to it |
| "Copy" | Puts the block on the clipboard so you can paste it elsewhere or into another version |
| "Copy link" | The link opens the builder right at this block |
| "Delete" | Deletes the block and its links |

![Block menu “⋯”](https://support.watbot.org/_media/en/02-mini-apps/_images/block-menu.webp?v=1791781230)

To select several blocks, tick them where the block icon is, click blocks while holding Shift or turn on the "Box selection" tool. The "N blocks selected" bar appears above the map: you can copy and delete the selection. Ctrl+C and Ctrl+V (on a Mac — ⌘C and ⌘V) copy the selection and paste it under the cursor.

## Notes

A note is a coloured sticky on the map with an explanation for those who build the app. It is not part of the scenario.

- To add one: right-click the map → "Add a note", or the "Note" block in the "Add a block" window.
- A click on the sticky opens text editing. Ctrl+Enter (on a Mac — ⌘Enter) saves, Esc cancels.
- The colour is in the sticky's menu: "Yellow", "Green", "Blue", "Pink", "Purple", "Gray". You resize it by the corner.

![A note on the map and its menu: colors, Copy, Delete](https://support.watbot.org/_media/en/02-mini-apps/_images/note.webp?v=1791781230)

## The screen editor

A click on a "Screen" block opens the "Edit screen" window. On the left is a phone with the screen, on the right are the settings. The "iOS" / "Android" switcher in the header shows how the screen looks on each system. Changes are applied with the "Save" button.

### Screen type

An empty screen on the phone asks "What kind of screen?":

| Type | What it is |
|---|---|
| "Standard window" | A header and areas with elements |
| "Bottom tabs" | Sections with a tab bar at the bottom. Each tab has its own content |
| "HTML code" | The whole screen is your HTML code. It is described on the [Code in the app](https://support.watbot.org/mini-apps/code) page |

![Empty screen: choosing the screen type](https://support.watbot.org/_media/en/02-mini-apps/_images/screen-kind.webp?v=1791781230)

### Areas

A standard window is built from areas — "What should the screen have?":

| Area | What it holds | Main settings |
|---|---|---|
| "Header" | The title and buttons at the top | "Header title", "Header color", "Title color", "Translucent in iOS", "No border", buttons |
| "Content" | Text, buttons, fields, lists and other [elements](https://support.watbot.org/mini-apps/elements) | "Area background color", "Inner padding", "Items" |
| "Grid" | Elements in columns and rows | "Rows", "Column width" — "Automatic" or a share of 12, "Vertical alignment", "Limit width" |

A screen has one header. There can be several content areas and grids; the "+" button under the last area on the phone adds the next one.

A click on an area or an element on the phone opens its settings on the right. The "Back to the screen" link above the settings takes you back.

![Screen editor: the header is selected on the phone, its settings on the right](https://support.watbot.org/_media/en/02-mini-apps/_images/header-settings.webp?v=1791781230)

**Header buttons** fall into four groups: "Start buttons", "End buttons", "Primary buttons", "Secondary buttons" — up to four in each. A button has a "Button name", "Icon", "Color", "Filling", "Shape" and "Size". Each header button is an exit of the block.

**Tabs.** A "Bottom tabs" screen has up to nine tabs. A tab has a "Tab name", an icon and a "Badge" — a mark with a number or text. Shared settings: "Tab bar color", "Tab color", "Selected tab color".

**Display condition.** The header, a content area, a grid and each header button can be shown not to everyone: turn on "Display condition" in their settings. How conditions are set is on the [App data](https://support.watbot.org/mini-apps/data) page.

A grid has up to 50 rows and up to 12 columns in a row. One area holds up to 100 elements.

### The screen on the scheme

The screen is visible right in the block on the scheme. A tall screen is cut at the phone's height — the "Show in full" strip at the bottom of the block expands it, "Collapse" brings it back.

![A tall screen on the map and the “Show all” strip](https://support.watbot.org/_media/en/02-mini-apps/_images/screen-expand.webp?v=1791781230)

## Screen and window

A screen opens in place of the previous one. A modal is shown over the current screen and closes without taking the person away from it.

The "Modal" block has two types:

- "Window over the screen";
- "Bottom sheet" — with the "Sheet height" (25, 50, 75 or 100 %) and "Show the drag handle" settings.

The "Close when tapping outside" and "Dim the screen" settings are available for both types.

![A bottom sheet modal and its settings](https://support.watbot.org/_media/en/02-mini-apps/_images/modal-settings.webp?v=1791781230)

A ready screen can be turned into a window, and a window into a screen: the block menu → "Convert to modal" or "Convert to screen". Elements and links are kept. The start screen and a screen made of HTML code cannot become a window.

The other blocks shown over a screen — menu, dialog, action sheet, message — are described on the [Screens and overlays](https://support.watbot.org/mini-apps/blocks/screens) page.

## Colours and the dark theme

An element's colour is chosen from the version's palette: "Primary", "Secondary", "Tertiary", "Success", "Warning", "Danger", "Light", "Medium", "Dark". The "Default" item keeps the colour set by the system.

Each palette colour has two values — "Light theme color" and "Dark theme color". The app picks the right one by itself.

- You change a colour's value right in the selection list: the "Edit" button, then the pencil next to the colour. The colour changes everywhere it is used.
- The "Add color" button creates your own colour: a "Color name" and two values. The palette holds up to 50 colours.
- You can delete your own colour. Before deleting, make sure it is not used anywhere.

![Editing a palette color: values for light and dark themes](https://support.watbot.org/_media/en/02-mini-apps/_images/color-edit.webp?v=1791781230)

The palette is stored in the version: a new version gets a copy of the palette of the version it was created from.

Whether the theme is light or dark depends on where the app is opened: in Telegram the app follows the messenger's theme, in a browser — the system theme, in the preview — the theme of your account.

## Preview

The "Preview" button opens the "Preview · version N" panel with a phone to the right of the scheme. The phone runs the real app with the version open in the builder — including an unpublished one.

| Panel element | What it does |
|---|---|
| "iOS" / "Android" | The look of the chosen system |
| "Opened from" | As if the app was opened from the chosen place: "Browser", "Home screen (PWA)", "Telegram", "MAX", "Web chat". This is how you check the branches of the "Launch source" block |
| "Start over" | Resets the preview variables and opens the app from the start block |
| "Follow the current block" | The scheme scrolls by itself to the block that is currently open in the app and highlights it |
| "Debug" | Opens the debug panel to the left of the phone |

![The Preview panel with the app](https://support.watbot.org/_media/en/02-mini-apps/_images/preview.webp?v=1791781230)

Under the phone is the "Now: …" line with the name of the open block. A click on it shows the block on the scheme.

> [!WARNING]
> The preview works with real data: variables and list records are saved. A record added in the preview appears in the project's list.

Everyone who opens the builder has their own preview user: two team members do not get in each other's way with variables. The preview is not counted in the "Users" section or in analytics.

### Debugging

The debug panel has two tabs.

- **"Path"** — which blocks the scenario went through after each tap: which exit fired, which screen was shown, where the scenario stopped. A click on a step shows the block on the scheme. The bin icon is "Clear path".
- **"Variables"** — the values of variables after the last step. Changed ones are marked "changed", new ones — "new". There is a search by name.

![Debugging: the scenario path next to the preview](https://support.watbot.org/_media/en/02-mini-apps/_images/debug.webp?v=1791781230)

Request and code errors that happen in the preview get into the [error log](https://support.watbot.org/mini-apps/users) with the "Preview" mark.

## If something does not work

- **"This version is currently being edited by another request".** Someone else or another tab is saving the version at the same time. Repeat the action.
- **"The limit on the number of pages/blocks has been reached…".** The version has more than 10,000 blocks or is larger than 50 MB. Delete extra blocks.
- **"The app opens with the start screen, so it cannot become a modal".** Make another screen the start one first.
- **"Files of this type (…) cannot be used in the app".** A file of a forbidden type, for example SVG, got into the screen. Replace it with a JPEG, PNG, GIF, WebP or AVIF image.
- **"Validation error. See details in the element edit form".** One of the fields is filled in incorrectly — it is highlighted in the element's settings.