Indicator

The indicator element displays progress through a multi-page flow, showing users where they are and how much remains. Adding an indicator reduces abandonment by setting clear expectations.

Adding an indicator element

To add an indicator element:

1. In the left sidebar, click + to add a new element.
2. Choose Indicator under the "Onboarding" header.

Configuration

The indicator has two main properties: Current Item and Total Items.

Current Item controls which step is highlighted as active. By default, this uses the indicator's own state ("Indicator".currentIndex), which automatically tracks the user's position in the flow.

Total Items determines how many steps the indicator displays. You can set this using one of three modes:

• Number: Enter a fixed number directly (e.g., 5 for a five-page flow). Use this when you know the exact number of steps ahead of time.
• Child Count: Select another element on the page, and the indicator will use that element's child count as the total. This is useful when the number of steps is determined by dynamic content, such as a stack of slides.
• State: Bind the total to a variable. This gives you full control over the count through your flow's state, and is useful when the total changes based on branching or other conditions.

Dynamic progress

Any indicator item is available as a variable. You can view variables either from the left side variables menu, or via the floating toolbar. Either case, it's exposed via Element -> Indicator.

You can bind the indicator to the actual flow progress using dynamic values. This way, the indicator automatically updates as users move through pages.

Use the indicator's properties in dynamic values to show progression:

Placement

Common indicator placements:

• Top of the page: Shows progress at a glance as users enter each page.
• Inside a navigation bar: Integrates with back/forward controls.
• Above the CTA: Reminds users they are almost done before the final action.