---
title: "Popup tab controls"
description: "Look up every control on the Popup tab for vector layers: the four popup types, the title, the custom editor, and the calculator steps."
---

Popups decide what a viewer sees when they click a feature on the map. This page lists every control on the `Popup` tab — the four popup types and what each one exposes — with defaults and choices.

The `Popup` tab is available for vector layers (point, line, polygon). Raster and WMS layers don't have a Popup tab.

## Type

|         |                                                          |
| ------- | -------------------------------------------------------- |
| Default | `None` |
| Choices | `None`, `Default`, `Custom`, `Calculator` |
| Where   | First control on the `Popup` tab |

The popup mode for the layer. Each choice replaces the controls below with its own.

In-product descriptions:

- `None` — popup disabled.
- `Default` — _"A simple list of all attributes enabled in Format settings."_
- `Custom` — _"Create detailed popups with rich text, images, charts, and dynamic content."_
- `Calculator` — _"Interactive tool for performing calculations using feature attribute values."_

## Title

|         |                                                          |
| ------- | -------------------------------------------------------- |
| Default | None — empty field |
| Where   | Below the `Type` dropdown, hidden when `Type` is `None` |

The header text shown above the popup body. Supports `{field_name}` variables for per-feature titles. Variable insertion is available via the button at the right edge of the field.

The title field is shared across `Default`, `Custom`, and `Calculator` — set it once and it applies regardless of which type you pick.

## None

No additional controls. Selecting `None` disables popups entirely on the layer.

## Default

No additional controls on the Popup tab. The displayed attribute list, labels, formatting, and visibility are all controlled on the [`Format` tab](/docs/formatting-attributes/attribute-format-reference).

## Custom

Selecting `Custom` reveals a rich-text editor (the popup editor) plus two buttons.

### Reset to defaults button

|         |                                                          |
| ------- | -------------------------------------------------------- |
| Where   | Above the editor, right-aligned |

Clears the popup title and replaces the editor content with an auto-generated list of every attribute on the layer. Disabled if the popup is already in its default state. Confirmation dialog warns that customisations will be lost.

### Popup editor

|         |                                                          |
| ------- | -------------------------------------------------------- |
| Where   | Main area below the toolbar |

A WYSIWYG editor with the toolbar extensions listed below. Nothing saves until you click `Save Changes`.

### Save Changes button

|         |                                                          |
| ------- | -------------------------------------------------------- |
| Where   | Below the editor, right-aligned |

Saves the title and template to the layer. Label changes to `Saved` once there are no unsaved changes; re-enables to `Save Changes` when the editor content changes again.

### Custom editor controls

Each control shows its name as a tooltip when you hover over it. Some appear in the toolbar. Others appear inside the editor, in a small menu or on a chip.

| Where | Controls |
| --- | --- |
| Toolbar | `Font` (`Normal`, `H1`–`H6`), `Text colour`, `Background colour`, `Set link`, `Insert image`, `Insert YouTube video`, `Insert iframe`, `Insert table`, `Insert horizontal rule`, `Insert simple variable`, `Insert equation`, `Insert chart`, `Insert conditional` |
| Menu on selected text | `Bold`, `Italic`, `Strikethrough`, `Bullet list`, `Ordered list`, `Align left`, `Align centre`, `Align right`, `Justify` |
| Menu on an empty line | `Heading 1`, `Heading 2`, `Heading 3`, `Bullet list`, `Ordered list` |
| Menu on a link or button | `Edit`, `Visit`, `Unlink`, `Align left`, `Align centre`, `Align right`, `Justify` |
| Menu on an image | `Edit image`, `Set auto width`, `Align left`, `Align centre`, `Align right`, `Delete image` |
| Menu on a table | `Column Operations`, `Row Operations`, `Hide table outline`, `Delete Table` |
| Buttons on a variable chip | `Edit variable`, `Delete variable` |
| Buttons on an equation chip | `Edit equation`, `Delete equation` |
| Menu on a chart | `Configure chart`, `Delete chart` |
| Buttons on a conditional chip | `Edit conditional`, `Delete conditional` |

The menu on a table opens from `Table options` (⋯) at the top-right corner of the table, or from a right-click in a cell. The buttons on a chip show when you hover over the chip or select it.

`Insert simple variable` shows only when the layer has attributes. `Insert conditional` is disabled, with the tooltip `No fields available`, when the layer has no fields.

Each per-feature how-to in this folder describes the control's dialog and its per-feature variables.

### Set link dialog

|         |                                                          |
| ------- | -------------------------------------------------------- |
| Where   | `Set link` in the toolbar, or `Edit` in the menu on a link or button |
| Title   | `Add Link`, `Edit Link`, `Add Button`, or `Edit Button` |

Creates or edits a link or an interactive button. `Link type` decides which fields show:

| Field | Shown for | Default | Notes |
| --- | --- | --- | --- |
| `Link type` | Every link | `Web link` | Choices: `Web link`, `Email`, `Phone`, `SMS`. A disabled `Other` choice shows only when an existing link uses another kind of link. |
| `URL` | `Web link` | Empty | No spaces outside a variable. A domain without `https://`, such as `example.com`, gets `https://` on save. |
| `Email address` | `Email` | Empty | One email address, or a variable. Saved as a `mailto:` link. |
| `Subject` | `Email` | Empty | Plain text and variables. Encoded on save. |
| `Body` | `Email` | Empty | Plain text over several lines, and variables. Encoded on save. |
| `Phone number` | `Phone`, `SMS` | Empty | Digits with an optional `+` at the start. Spaces, brackets, dots, and dashes are allowed and removed on save. Saved as a `tel:` (`Phone`) or `sms:` (`SMS`) link. |
| `Link Text (optional)` | A new link with no text selected | Empty | The text viewers click. When empty, the link itself becomes the text. |
| `Button Text` | `Display as button` ticked | Empty | The button label. When empty, the label is `Button`. Accepts variables. |
| `Open in new tab` | `Web link` | Ticked on a new link or button | When cleared, the page replaces the map. |
| `Display as button` | Every link | Cleared on a new link | Shows `Size`, `Colour`, `Variant`, and a `Preview`. |

`URL`, `Email address`, `Subject`, `Body`, and `Phone number` each have an `Insert simple variable` button when the layer has attributes.

**Link with another kind of link.** When an existing link uses a kind of link the dialog cannot build, `Link type` shows `Other` and the link is read-only. Choose another `Link type` to replace it.

**Pasting a complete link.** Pasting a link that starts with `http://`, `https://`, `mailto:`, `tel:`, or `sms:` into the value field sets `Link type` to match and removes the prefix. A pasted `mailto:` link fills `Subject` and `Body` from its `subject=` and `body=` parts. A `body=` part on a pasted `sms:` link is kept but not shown, and is lost when `Link type` changes.

**Selected email address.** When the selected text is an email address, the dialog opens with `Link type` set to `Email` and the address filled in.

**Save button.** The label is `Add Link`, `Update Link`, `Add Button`, or `Update Button`. While the value field is empty, it is `Remove Link` or `Remove Button`, and clicking it removes the link or button.

**Validation messages:**

| Message | Cause |
| --- | --- |
| `This link type is not supported.` | The value starts with a kind of link that popups do not support, such as `ftp:` or `javascript:`. |
| `Web links cannot contain spaces.` | A `Web link` value has a space outside a variable. |
| `Enter a valid email address.` | The `Email address` value is not one email address and has no variable. |
| `Enter a valid phone number.` | The `Phone number` value has other characters, or has no digits and no variable. |
| `Enter a value.` | The value field holds only spaces. |

**Variables in links.** When the popup opens, each `{field_name}` in a link or button target takes the feature's raw value, not the value as formatted on the `Format` tab. Values in `Subject`, `Body`, and an `sms:` message are encoded. Values in a `Phone` or `SMS` link keep only the digits and a `+` at the start. An attribute that is not set leaves the `{field_name}` text in the link.

### Embed URL dialog

|         |                                                          |
| ------- | -------------------------------------------------------- |
| Where   | `Insert iframe` in the toolbar |

Inserts a web page (an iframe) or, for an `.mp4` or `.webm` file, a video player.

| Field | Default | Notes |
| --- | --- | --- |
| `Embed URL` | Empty | An `https://` address on another site, or full `<iframe>` code. From code, only the `src` address and the `height` are kept. Accepts `{field_name}` variables. |
| `Insert simple variable` | — | Adds a `{field_name}` at the cursor in `Embed URL`. Shown when the layer has attributes. |
| `Height (pixels)` | `300` | A whole number above 0. Pasted code with a `height` sets it. The width always fills the popup. |
| `Embed` | — | Inserts the embed after the selected embed, or at the cursor. Disabled while `Embed URL` is empty. `Enter` in `Embed URL` does the same. |

An address whose path ends in `.mp4` or `.webm` inserts a video player with controls that does not start on its own. Any other address inserts a web page.

In the editor, an embed whose address has a variable, or is not allowed, shows as a dashed box with `Embed:` and the address.

**Validation messages:**

| Message | Cause |
| --- | --- |
| `Use an HTTPS embed URL from an external site` | The address is not `https://`, or is a MangoMap page or a page on the map's own site. |
| `Use valid HTTPS iframe embed code` | Pasted `<iframe>` code has no `https://` address on another site. |
| `Height must be a positive number of pixels` | `Height (pixels)` is empty, 0, or not a whole number. |
| `Video is not available in this editor` | A video file address in an editor that has no video player. |
| `Failed to construct 'URL': Invalid URL` | The address is not a full web address, such as `example.com` or a variable on its own (`{dashboard_url}`). |

### YouTube URL dialog

|         |                                                          |
| ------- | -------------------------------------------------------- |
| Where   | `Insert YouTube video` in the toolbar |

| Field | Default | Notes |
| --- | --- | --- |
| `YouTube URL` | Empty | A YouTube `watch?v=` or `/embed/` link. A link is saved as YouTube's embed address. For a different video per feature, type `https://www.youtube.com/embed/{video_id}`. |
| `Insert Video` | — | Inserts the player. Disabled while the field is empty. `Enter` in the field does the same. |

A value that is not a YouTube link inserts nothing, with no message. `https://www.youtube.com/watch?v={video_id}` inserts an empty player.

### Allowed embed URLs at render time

After the variables are filled in, each iframe and video address is checked:

| Address | Iframe | Video |
| --- | --- | --- |
| `https://` on another site | Shown | Shown |
| `https://` on the map's own site, `mangomap.com`, or an address under them | Removed | Shown |
| `http://`, a relative path, `//host`, `javascript:`, `data:`, `blob:`, or `about:` | Removed | Removed |
| An empty variable, or a `{` or `}` left in the address | Removed | Removed |

A removed embed leaves no message in the popup. Every iframe fills the popup's width, with the saved height or 300 pixels. A video player always shows its controls and never starts on its own.

### Allowed link targets at render time

After the variables are filled in, each link and button target is checked. These targets are allowed:

| Target | Example |
| --- | --- |
| Web address | `https://example.com/{slug}`, `http://example.com` |
| Domain without `https://` | `example.com`, opened as `https://example.com` |
| Email link | `mailto:central+sg-0001@example.com` |
| Phone link | `tel:+6549570006` |
| Text message link | `sms:+6549570006` |
| Path on the same site | A target that starts with `/`, `#`, or `?` |

With any other target, a text link shows as plain text and a button does nothing.

Email, phone, and text message links and buttons open in the viewer's app and ignore `Open in new tab`. A web button opens in a new tab only when `Open in new tab` is ticked.

## Calculator

Selecting `Calculator` reveals a 3-step vertical wizard. Click any step heading to open it.

### Step 1 — Title, Description & Button Text

|         |                                                          |
| ------- | -------------------------------------------------------- |

Three fields:

- **Description & Instructions** — a rich-text editor.
- **Button Text** — single-line text input. Default: `Calculate`.
- **Next** button — advances to Step 2 and saves Step 1's changes.

### Step 2 — Input Fields

|         |                                                          |
| ------- | -------------------------------------------------------- |

Lists the form fields the calculator presents to viewers. Each row contains:

- A monospace chip showing the field's variable ID (`{form_1}`, `{form_2}`, …).

Empty labels show the helper `Label is required`.

- A delete (bin) button. Disabled when there's only one field left.

Header controls:

- **Add Field** button — appends a new field with auto-incrementing ID.

Validation: the `Next` button is disabled until every field has a non-empty label. Inline error message: `All field labels must be filled before proceeding`.

Every calculator field is a numeric input — formulas require numeric values, so text and select-list inputs aren't supported. The field rows don't expose a type selector or a "required" toggle.

### Step 3 — Calculation Formula

|         |                                                          |
| ------- | -------------------------------------------------------- |

A formula editor that accepts:

- Layer attribute references — `{field_name}`.
- User input references — `{form_1}`, `{form_2}`, … (matching Step 2's field IDs).
- Equations, inserted with `Insert equation`.

The formula evaluates per feature, so layer-wide aggregations (`sum`, `avg`, etc.) aren't available here. They're a Query and Proximity Analysis report feature.

Two buttons: **Back** (returns to Step 2) and **Save** (commits the calculator config).

For the full formula syntax reference, see [Calculator formula syntax](/docs/configuring-popups/calculator-formula-reference).

## Related

- [How popups work in MangoMap](/docs/configuring-popups/concepts-popups)
- [Calculator formula syntax](/docs/configuring-popups/calculator-formula-reference)
- [How to use the default popup](/docs/configuring-popups/use-default-popup)
- [How to write a custom popup template](/docs/configuring-popups/write-custom-popup-template)
- [How to build a calculator popup](/docs/configuring-popups/build-a-calculator-popup)
- [Attribute format controls](/docs/formatting-attributes/attribute-format-reference)

---