Interactions

Add navigation, actions, and event-driven behavior between screens

Interactions

Define what happens when users tap buttons, complete screens, or trigger events. Build multi-step action sequences that navigate between screens, open URLs, fire events, or run experiments.

How interactions work

An interaction is a trigger paired with an ordered list of actions. Interactions attach to screens or individual components.

• Trigger -- What causes the interaction to fire (e.g., a press, a screen event, a data change).
• Actions -- What happens when the trigger fires. Actions execute in order. A navigate action ends the sequence.

For example: A user taps a "Subscribe" button (trigger: press), which sends a tracking event, initiates a purchase, and navigates to a confirmation screen (actions: send_event, purchase, navigate).

Creating navigation links

The fastest way to connect screens is to draw a link on the canvas.

1. Switch to Interactions mode by pressing X or clicking the toggle in the header.
2. Select a component (like a button) on the canvas.
3. A link handle appears to the right of the selected component. Drag it toward a target screen.
4. Release on the target screen to create a navigate action.

The canvas draws an arrow between the source component and the target screen. This arrow represents the navigate action inside the interaction.

Back links

Drop a link drag on the Back target to create a back action instead of a navigate. Back actions return the user to the previous screen in the navigation stack.

Retargeting links

Drag an existing arrow to change its destination. Drop it on a different screen to retarget the navigation, or drop it on the delete zone to remove the link entirely.

Interactions mode

Press X to toggle Interactions mode. When active:

• Navigation arrows appear between connected screens.
• Link handles appear on selected components.
• The right sidebar switches to the interactions editor.

Press Escape to exit Interactions mode and return to Design mode.

The action editor

Select a screen or component and open the Interactions tab in the right sidebar to see its action editor. From here you can:

• Add interactions -- Create a new interaction with a trigger and actions.
• Choose a trigger -- Components support press; screens support event triggers (like $screen_shown).
• Add actions -- Append actions to the interaction's sequence. Drag to reorder.
• Edit action details -- Configure each action's parameters (target screen, event name, URL, delay duration, etc.).
• Delete interactions -- Remove an interaction and all its actions.

Available actions

Action ordering

Actions execute sequentially from top to bottom. Some actions are blocking -- delay, wait_until, and synchronous remote actions pause the sequence until they complete. A navigate action terminates the sequence; any actions listed after it are not executed.

Triggers

Triggers determine when an interaction fires.

Each node allows one interaction per trigger type. For did_set, each unique view model path counts as a separate trigger.

Starting screen

The starting screen determines where users enter your flow. It is indicated by a play-icon entry marker on the canvas.

Set the starting screen in any of these ways:

• Right-click a screen and choose Set as starting point.
• Drag the entry marker from one screen to another in Interactions mode.

The starting screen is required for publishing. If it is not set, the publish button is disabled with a warning.

Canvas indicators

When interactions mode is active, the canvas shows visual indicators:

• Navigation arrows -- Lines drawn from source components/screens to target screens for every navigate action.
• Entry marker -- A play icon on the starting screen.
• Action badges -- Small badges on screens that have non-navigate actions (like send_event or purchase), so you can spot behavior at a glance.

Keyboard shortcuts

Next steps

• Data & Bindings -- Learn about view model properties used in set_view_model and send_event actions.
• Publishing -- Interactions are validated during the publish pre-flight check.
• Campaigns -- After publishing, manage how your flow is delivered.