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 directly on the canvas.

1. Switch to Interactions mode by pressing X or clicking the toggle in the header.
2. Select a screen or component on the canvas.
3. Click the add handle that appears beside the selection and choose a trigger.
4. 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 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

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