Skip to main content

Flow Builder

The flow builder is a visual editor for creating step-by-step walkthroughs without writing code. It renders your application in an embedded view alongside a configuration panel where you add and configure steps.

Builder Interface​

The builder is divided into three areas:

  • Application preview (left) -- Displays your application with an overlay for selecting target elements.
  • Step list (sidebar) -- Shows all steps in order. Click a step to select it, or drag steps to reorder them.
  • Configuration panel (right) -- Edit the selected step's type, content, target element, position, and behavior settings.

The toolbar at the top provides controls for Preview, Undo, Save Draft, and Publish.

Adding Steps​

  1. Click the Add Step button or the + icon at the bottom of the step list.
  2. Choose a step type (tooltip, modal, beacon, banner, slideout, video, form, or action).
  3. Click the target element in the application preview to set the CSS selector. The builder highlights the selected element.
  4. Enter the step content using the rich text editor. You can add text, images, and videos.
  5. Configure the step position relative to the target element (top, bottom, left, right, or auto).

Each step is assigned an order value that determines its sequence in the flow. The builder auto-assigns order values as you add steps.

Reordering Steps​

Drag steps in the step list to change their order. The builder updates the order values automatically. You can also reorder steps programmatically via the API using the reorder endpoint.

Configuring Steps​

Select a step to open its configuration panel. Available settings include:

  • Target selector -- The CSS selector for the element this step attaches to. Use the visual selector or enter a selector manually.
  • Target URL -- The page URL where this step should appear. Required for flows that span multiple pages.
  • Content -- Rich text body of the step, supporting formatting, links, images, and embedded media.
  • Position -- Where the step appears relative to the target element (auto, top, bottom, left, right).
  • Settings -- Step-specific options such as auto-advance delay, skip behavior, and custom CSS.

Step Navigation​

Each step displays navigation controls for the end user:

  • Next -- Advance to the next step in the flow.
  • Previous -- Return to the previous step.
  • Skip -- Skip the current step (if enabled in step settings).
  • Dismiss -- Close the flow entirely.

Preview Mode​

Click Preview in the toolbar to simulate the flow as an end user would experience it. Preview mode walks through each step in order, rendering tooltips, modals, and other elements on top of your application. Exit preview mode to return to editing.

Saving and Publishing​

  • Save Draft -- Saves all changes without publishing. The flow remains in DRAFT status.
  • Publish -- Saves and sets the flow status to PUBLISHED, making it available to users who match its targeting rules.

All changes are saved to the server. The builder does not store unsaved local state.