# Page builder

The builder opens in the "Builder" section of the landing page's menu. In the middle is the page in a phone frame; at the side, the settings panel of the page or of the selected block appears.

![Mini landing page builder: a page with a title, text and messenger buttons](https://support.watbot.org/_media/en/03-landings/_images/builder.webp?v=1791781230)

Edits are saved automatically — there is no separate save button. What is saved is a draft: visitors see the changes only after you click "Publish". This is covered on the [Publishing and your own domain](https://support.watbot.org/landings/publish) page.

The "AI help" button next to "Publish" opens the AI chat about this page — see [Building a landing page in the AI chat](https://support.watbot.org/landings/ai-builder).

## Landing page pages

A landing page can have several pages. The first one — "Home" — opens at the landing page's address, the others at the landing page's address with an addition, for example `…/price`.

Above the phone frame are the name of the open page and icons:

| Icon | What it does |
|---|---|
| Gear | Opens the "Page settings" |
| List | Opens the "Pages" panel |
| Outward arrow | Opens the published page in a new tab. The icon is shown only for a published page |

### The "Pages" panel

The panel has a list of pages with their addresses and a search. A click on a page opens it in the builder.

- "Create page" — the "Creating a page" window with the "Page name" and "Page address" fields. The address is Latin letters, digits, hyphen and underscore.
- The "⋯" menu of a page: "Edit" (name and address), "Duplicate", "Delete".

A copy gets a name with the "(copy)" mark and an address ending in `-copy`. The last page of a landing page cannot be deleted.

![The Pages panel](https://support.watbot.org/_media/en/03-landings/_images/pages-panel.webp?v=1791781230)

> [!WARNING]
> Do not delete "Home" through the "⋯" menu if the landing page has other pages: your account will allow it, but without the home page the landing page's address stops opening.

### Page settings

| Setting | What it sets |
|---|---|
| "Page name" | The page's name. It also serves as the browser tab title until the title in "SEO settings" is filled in |
| "URL" | The page address inside the landing page. For the home page it is `/` |
| "Page padding at the edges" | Margins at the edges: no padding or a size from XS to LG |
| "Background color" | The page background — separately for the light and dark theme |
| "Default font" | The font of all blocks of the page that do not have their own |
| "SEO settings" | "Title" — up to 80 characters, "Keywords" — up to 250, "Description" — up to 170 |

![Page settings: address, background, font and SEO](https://support.watbot.org/_media/en/03-landings/_images/page-settings.webp?v=1791781230)

SEO fields go into the service part of the published page — search engines and services that build link previews read them. The image for social networks is the [landing page icon](https://support.watbot.org/landings/settings): there is no separate field for such an image. The fields are updated on the site at the next publication.

The "Delete" button at the bottom of the panel deletes the page. The home page does not have it.

## Blocks

A page consists of blocks going from top to bottom. There are five blocks: "Text block", "Image", "Buttons", "Form", "HTML".

- **Add.** Click "+" under the last block and choose the kind of block. To insert a block above an existing one, click the line above it and choose the kind of block.
- **Set up.** A click on a block opens its settings panel.
- **Move.** Drag a block by the icon to its left.
- **Delete.** The "Delete" button at the bottom of the block's settings panel.

![The “+” menu: block types](https://support.watbot.org/_media/en/03-landings/_images/add-block.webp?v=1791781230)

### Text block

The text is typed right on the page. Select part of the text — a toolbar appears: bold, italic, underlined, strikethrough, link, quote. The Enter key starts a new paragraph, Shift + Enter breaks the line.

![Text block: formatting toolbar above the selected word](https://support.watbot.org/_media/en/03-landings/_images/text-block.webp?v=1791781230)

In the settings panel:

- alignment and text colour;
- "Text type" — "Heading 1" – "Heading 4" or "Plain text";
- "Font", "Font size", "Font weight", "Line height", "Letter spacing";
- "Top and bottom padding", "Left and right padding".

### Image

Click "Select photo" and upload an image — JPG, PNG or GIF. You can move the image inside the frame with the mouse or a finger to choose the visible part.

The settings panel has five frame options:

| Option | How it looks |
|---|---|
| With margins | The image in its own proportions, with padding around it |
| Full width | The image in its own proportions, without padding |
| Square | A square with padding |
| Full-width square | A square without padding |
| Circle | A circle with padding |

Below are "Radius" (rounded corners), "Size" (for options with padding), "Scale" (zoom from 100 to 300%) and the block's padding.

![Image block and its settings](https://support.watbot.org/_media/en/03-landings/_images/image-block.webp?v=1791781230)

### Buttons

A block with one or more link buttons. This is how links to the chatbot, messengers, social networks or a website are made.

Under the selected block are the "Add button" and "Settings" buttons. A new button repeats the design of the previous one.

**Block settings** set what is common to all buttons: "Default size", "Default radius", "Default font" and "Decoration" — how the buttons are arranged: each full width on its own line, compactly, or joined into one group (at least two buttons are needed). In the first option, buttons are swapped by dragging.

**Button settings** open with a click on the button:

| Setting | What it sets |
|---|---|
| "Button name" | The label on the button |
| "Link" | The address that opens on a tap. For a call — `tel:` and the number, e.g. `tel:+15550000000`; for an email — `mailto:` and the address, e.g. `mailto:hello@example.com`. Such links open the phone or the mail app, not a new tab |
| "Open in a new tab" | Open the link in a new browser tab |
| "Icon" | A messenger or YouTube icon next to the label, or "No icon"; "Icon position" — "Left" or "Right" |
| "Size", "Font", "Font size", "Font weight", "Letter spacing", "Style", "Radius" | The look of the label and of the button itself. "Default" takes the value from the block settings |
| "Color" | "Text color" and "Background color"; "Hover color" and "Pressed color" are turned on separately |
| "Gradient", "Border", "Shadow" | Turned on with switches; each has its own variants for hover and press |

![Button settings of the Buttons block](https://support.watbot.org/_media/en/03-landings/_images/button-settings.webp?v=1791781230)

The "Apply to all in block" switch in the "Design settings" row applies this button's design to the other buttons of the block. The "Copy style" and "Paste style" buttons carry the design between buttons — including to another page.

> [!TIP]
> For a button to lead to the chatbot, paste the bot's general or additional link from the "Links to chatbot" section into the "Link" field. Then the transitions get into the bot's statistics. Where to get the link is in the [Links to chatbot](https://support.watbot.org/chatbots/links) section.

### Form

A form collects the visitor's data and passes it to the chatbot. A new form already contains an input field, a consent checkbox and a "Send" button.

Under the selected block are "Add element" and "Settings". There are four elements:

| Element | What it is |
|---|---|
| "Input field" | A field with a label. "Field type": "Phone", "E-Mail", "Text", "Numbers", "Multiline text", "Date", "Time", "Date and time". There is a "Placeholder" and the "Required field" switch |
| "Text" | An explanation inside the form |
| "Checkbox" | A tick with text, for example consent to the policy. "Field name" — the name under which the value reaches the bot; there are "Enable by default" and "Required field" |
| "Button" | The submit button. The link to the bot is pasted into the "Chatbot link" field |

![Form block: input field settings](https://support.watbot.org/_media/en/03-landings/_images/form-block.webp?v=1791781230)

A click on an element opens its settings; elements are swapped by dragging. The block's shared settings are "Default form size", padding, "Default radius", "Default font".

**How the form passes data.**

1. The visitor fills in the form and taps the button. The platform checks the required fields and the format: email, phone, number, date.
2. The visitor follows the address from the "Chatbot link" field and gets to the messenger.
3. The bot receives the field values as contact variables. The variable name is the field's label ("Name" in the field settings) or the checkbox's "Field name". If no label is set, the variable is called `Input 1`, `Checkbox 1` and so on. A checkbox arrives as ✅ or ❌.

For example, a field labelled "Phone" reaches the bot as the `Phone` variable with the value `+1 555 010-0123`. How to use variables in messages is in the [Templates](https://support.watbot.org/chatbots/templates) section.

> [!IMPORTANT]
> The form does not store requests itself. The button must have a link to a chatbot of this platform — a general or an additional one, from the "Links to chatbot" section. Without it, the entered data goes nowhere.

To keep requests from getting lost, save them in the bot's scenario: in contact variables, in a [list](https://support.watbot.org/lists) or in the [CRM](https://support.watbot.org/chatbots/crm).

### HTML

A block for your own code: the settings panel has an editor where you paste HTML. In the builder, the result is shown right away.

![HTML block: code editor](https://support.watbot.org/_media/en/03-landings/_images/html-block.webp?v=1791781230)

> [!WARNING]
> "The block works only when a domain is connected" — on a page with the platform's address, the code of this block does not run. How to connect a domain is on the [Publishing and your own domain](https://support.watbot.org/landings/publish) page.

## Colours for the light and dark theme

Every colour on the page — background, text, buttons, form fields — has two values. The colour picker window has two tabs: "Light theme" and "Dark theme". The colour picker button shows both values side by side — with a sun and a moon icon.

![Color picker: light and dark theme tabs](https://support.watbot.org/_media/en/03-landings/_images/color-picker.webp?v=1791781230)

The dark version of the page is turned on in the [landing page settings](https://support.watbot.org/landings/settings) with the "Dark theme" switch. While it is off, it is enough to set colours for the light theme.

In the builder, the page is shown in the theme of your account: in a light account you see the light colours, in a dark one — the dark colours.

## Fonts

The font list has "System" and 14 fonts: Amatic SC, Caveat, Comfortaa, Kelly Slab, Lobster, Merriweather, Montserrat Alternates, Open Sans, Open Sans Condensed, Oswald, Pacifico, Pangolin, PT Mono, Roboto. The "Default" option of a block takes the page's font.

## What the builder does not have

- A chat block. To let a visitor write to the bot, add a button with a link to the bot. A chat right on a website is made with a [widget](https://support.watbot.org/widgets).
- Video, map, countdown and payment blocks.

## If something does not work

- **"This page address already exists."** Two pages of one landing page cannot have the same address.
- **"The page address was entered incorrectly"** — only Latin letters, digits, hyphen and underscore are allowed in the address.
- **"You cannot delete the last page."** A landing page always keeps at least one page.
- **The bot did not get the form data.** Check that the form button has a link to the bot from the "Links to chatbot" section and that the fields have labels. Form data does not wait long for the transition: if the visitor opened the link and did not go to the messenger right away, the values may not arrive.