---
title: "How to add dynamic content to a custom popup"
description: "Choose between equations, charts, conditionals, and interactive buttons in a custom popup, with links to the setup guide for each one."
seo:
title: "Add dynamic content to popups"
sidebar:
label: "Add dynamic content"
---
A custom popup can also calculate values, draw charts, hide sections when conditions fail, and link to feature-specific URLs. Each has a toolbar button in the popup editor; this page helps you choose one, with links to the per-extension setup guides.
## Before you start
- The popup type must be `Custom`. See [How to write a custom popup template](/docs/configuring-popups/write-custom-popup-template).
- You should be comfortable inserting `{field_name}` variables. Most dynamic content depends on attribute values. See [How to insert attribute values into a custom popup](/docs/configuring-popups/insert-attribute-values-into-popup).
## The four extensions
To pick one, start from what the viewer needs to see or do:
Each extension has its own toolbar button in the Custom popup editor, except interactive buttons, which you add with `Set link`. They render when the popup opens and use the feature attributes.
### Equations
| | |
| --- | --- |
| What it does | Displays a computed numeric value inline |
| Use when | You want a value that's derived from one or more attributes — a ratio, a difference, a sum |
| Example | `Density:`, then an equation of `{population} / {area}`, then `people/km²` |
Click `Insert equation` and type a small expression in the equation editor. The expression supports attribute references (`{population}`, `{area}`), arithmetic operators (including modulo and exponentiation), and functions such as `round`, `floor`, `min`, and `max`. The expression evaluates per feature, so layer-wide aggregations (`sum`, `avg`, `count`) aren't available here — those live in the Query and Proximity Analysis tools. The result is always a number. To show a word for a value, such as `Open` or `Closed`, use a conditional.
For full setup, see [How to add a calculated value to a custom popup](/docs/configuring-popups/add-equations-to-popup). For the syntax, see [Calculator formula syntax](/docs/configuring-popups/calculator-formula-reference); for worked examples, see [How to use operators and functions in equations](/docs/configuring-popups/use-operators-and-functions-in-equations).
### Charts
| | |
| --- | --- |
| What it does | Renders a chart inside the popup, driven by feature attributes |
| Use when | A feature carries a small set of comparable values — quarterly figures, category breakdowns, before/after pairs |
| Example | A bar chart of `q1, q2, q3, q4` revenue per feature |
The chart extension opens a configuration modal where you pick the chart type and the attributes that supply the data.
For full setup, see [How to add a chart to a custom popup](/docs/configuring-popups/add-charts-to-popup).
### Conditionals
| | |
| --- | --- |
| What it does | Shows or hides a section based on a feature's attribute values |
| Use when | Some features should display different content, or some sections shouldn't render when an attribute is empty |
| Example | "Show the 'Booking link' section only if `bookable` is true" |
The conditional extension opens a 3-step wizard: define the condition, configure the content for the true and false branches, and review with a sample evaluation.
For full setup, see [How to show or hide content based on a feature's attributes](/docs/configuring-popups/add-conditional-content-to-popup).
### Interactive buttons
| | |
| --- | --- |
| What it does | Renders a clickable button that opens a web page, or starts an email, a phone call, or a text message |
| Use when | You want viewers to take an action — open a deeper page, view in another system, copy a reference |
| Example | "View on Wikipedia" button that opens the right page for each feature using `{wikipedia_slug}` |
The interactive button extension lets you choose a `Link type` (`Web link`, `Email`, `Phone`, or `SMS`), set the text and target, and choose whether a web link opens in a new tab. You can style the item as a button with `Size`, `Colour`, and `Variant` controls, or clear `Display as button` to insert a plain text link instead. Targets accept `{field_name}` variables for per-feature links.
For full setup, see [How to add an interactive button to a custom popup](/docs/configuring-popups/add-interactive-buttons-to-popup).
## How they compose
You can combine these extensions, such as placing a chart inside a conditional or an equation in a button label. A common pattern:
- A conditional that hides the whole "Statistics" section when there's no data.
- Inside the section, a chart of category breakdowns plus a couple of equations comparing the feature to the layer average.
- Below, an interactive button linking to a deeper data source.
When a popup has several dynamic elements, test each one with a real feature before combining them. The Custom popup editor doesn't show a live preview with sample data, so the map is where you test it.
## Save and verify
After inserting any dynamic content, click `Save Changes` at the bottom right of the editor. Then open the map and click a feature on the layer to verify the content renders as expected.
If something doesn't render correctly, check:
- Variables resolve correctly — see the troubleshooting in [How to insert attribute values into a custom popup](/docs/configuring-popups/insert-attribute-values-into-popup).
- Equation syntax is valid — see [Calculator formula syntax](/docs/configuring-popups/calculator-formula-reference).
- Conditional logic matches the data — open the conditional builder's `Test` step (Step 3) for a sample evaluation.
## Related
- [How to add a calculated value to a custom popup](/docs/configuring-popups/add-equations-to-popup)
- [How to add a chart to a custom popup](/docs/configuring-popups/add-charts-to-popup)
- [How to show or hide content based on a feature's attributes](/docs/configuring-popups/add-conditional-content-to-popup)
- [How to add an interactive button to a custom popup](/docs/configuring-popups/add-interactive-buttons-to-popup)
- [How to write a custom popup template](/docs/configuring-popups/write-custom-popup-template)
- [Popup tab controls](/docs/configuring-popups/popup-reference)