Interactions

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

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).

The fastest way to connect screens is directly on the canvas.

Switch to Interactions mode by pressing X or clicking the toggle in the header.
Select a screen or component on the canvas.
Click the add handle that appears beside the selection and choose a trigger.
On the trigger card, click the add handle again and choose Navigate to add a navigate action.

The canvas draws an arrow between the source node 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 the selected screen or component.
Trigger cards and action cards appear directly on the canvas for the selected node.

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

On-canvas interaction cards

Select a screen or component in Interactions mode to work with its interaction cards on the canvas. From here you can:

Add interactions – Create a new interaction with a trigger from the selected node’s add handle.
Choose a trigger – Components support interaction triggers like press, long_press, and hover; screens support event triggers like $screen_shown.
Add actions – Append actions from the trigger card’s add handle.
Inspect interactions – Review the trigger and action cards that belong to the selected node.
Delete interactions – Remove an interaction and all its actions.

Available actions

Action	What it does
`navigate`	Navigate to a specific screen. Terminates the action sequence.
`back`	Return to the previous screen in the navigation stack.
`delay`	Pause execution for a specified duration (milliseconds).
`send_event`	Send a named event with optional properties.
`goal`	Mark a named conversion milestone as reached.
`open_link`	Open a URL in the browser or in-app.
`purchase`	Initiate a product purchase.
`restore`	Restore previous purchases.
`dismiss`	Dismiss the flow.
`exit`	Exit the flow with an optional reason.
`experiment`	Split users into variants, each with their own action sequence.
`set_view_model`	Write a value to a view model property.
`fire_trigger`	Pulse a trigger property on a view model.
`condition`	Branch based on conditions, each branch with its own actions.
`update_customer`	Update user profile attributes.
`call_delegate`	Send a message to your app’s delegate handler.

Action ordering

Actions execute sequentially from top to bottom. Some actions are blocking – delay, wait_until, and server effects such as connector 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.

Trigger	Applies to	Description
`press`	Components	Fires when the user taps/clicks the component.
`event`	Screens	Fires when a named event occurs (e.g., `$screen_shown` fires after the screen’s entrance animation).
`did_set`	Screens, Components	Fires when a view model property changes.
`long_press`	Components	Fires after a sustained press.
`hover`	Components	Fires on hover (web preview).

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

Action	Shortcut
Toggle Interactions mode	X
Exit Interactions mode	Escape
Delete selected link	Backspace / Delete

Next steps

Variables & Bindings – Learn about bound values 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.