Pages

Dynamic content

Pages can show more than typed text: the signed-in user's name, a value from the address, or data a function loads. Page variables make that possible.

How it works

A page variable is a named value that belongs to the page. To show it, write its name wrapped in double curly braces inside a text, with no spaces. For values with parts, use a dot path such as product.name.

Some variables exist on every page without you creating them:

user.firstName, user.lastName, user.email, user.username

Details of the signed-in user. Empty for visitors who are not signed in.

user.isLoggedIn, user.isAdmin

true or false.

configuration.language

The current language code.

configuration.theme

light or dark.

While Edit Mode is on, a Variables window in the builder lists the Built-in and Defined variables of the page, ready to copy.

Add a variable

1

Open Page Configuration

Use the button at the top of the page builder and go to Page Variables.

2

Click Add Variable

Enter a Variable Name using letters, numbers and underscores.

3

Choose a Variable type

String, Number, Boolean, Array or Object.

4

Choose a Variable Source

Manual starts at the default value and is changed by events, forms or modals. From URL reads the value from the address, using the URL Parameter Name you enter.

5

Set a Default value

The value shown until something fills the variable.

If a variable does not exist or has no value, visitors see the placeholder itself, braces included. Give every variable a sensible default.

Values from the address

With From URL, a variable reads a query parameter. A variable with the URL Parameter Name id receives 42 when the page is opened with ?id=42 at the end of its address.

A slug can also contain a variable. Write the variable's name in double curly braces as a part of the slug, for example project followed by a slash and projectId in braces. Opening /project/42 then puts 42 into the page variable called projectId.

Declare a page variable with exactly that name, with the Manual source. If the page has none, the value from the address is thrown away and nothing warns you. Dynamic pages are left out of the sitemap.

Load data with page events

To show data from your database or another service, run a function. In Page Configuration, go to Page Events and click Add Page Event.

Label / ID

A unique name for the event. Buttons refer to the event by this label.

Trigger Type

On Page Load runs it each time the page opens. Manual runs it only when something asks, such as a button.

Action type

Runs a function. Choose the function, send page variables or fixed values to its inputs, and write its outputs into page variables.

Show result as a notification

Optional. Shows a success or error notification based on one of the function's outputs.

To run a Manual event from a button, set the button's action to Trigger a page event and choose the event's label.

Show or hide by a value

Rows, columns, elements and sections have Visibility Conditions. They are hide rules: the element is hidden as soon as any one condition is true.

Conditions include Equals, Not equals, Greater than, Less than, Contains, Does not contain, Is empty and Is not empty. To check for a missing value, use Is empty or Is not empty, because an empty variable still counts as existing.

Placeholders work in titles, texts, button labels and links, media addresses and alt text, badges, stats, features, FAQs, reviews and map locations. They are not filled in tables, forms or a modal's title.