Flow Builder

The flow builder is the visual canvas where you design the structure and navigation of your flows. It uses a node-and-edge graph model -- you place nodes on the canvas and connect them with edges to define how users move through the experience.

Canvas basics

The builder opens with a zoomable, pannable canvas. Use these controls to navigate:

• Zoom -- scroll wheel or pinch to zoom in and out.
• Pan -- click and drag on empty canvas space to move around.
• Fit to view -- click the fit button in the canvas toolbar to center all nodes in the viewport.
• Select -- click a node to select it. Click an edge to select it.
• Multi-select -- hold Shift and click, or drag a selection box around multiple nodes.

Node types

Start node

Every flow has exactly one Start node. It marks the entry point of the flow and can optionally hold trigger conditions that control when the flow is shown.

Screen node

A Screen node represents a single screen in your flow. Clicking a Screen node opens the screen editor where you add and arrange components. Each Screen node references a unique screen with its own layout, background, and component tree.

Condition node

A Condition node evaluates a logical expression and routes users down one of two paths -- Yes or No. Use condition nodes to create different experiences for different user segments without building separate flows.

Conditions can reference:

• User attributes -- properties you pass via Setgreet.identifyUser() (e.g., plan, country, signup date).
• Segments -- whether the user belongs to one of the app's segments.

The node is decided on Setgreet's servers when the flow is delivered, from the attributes and segments stored for the user at that moment. It can't read event properties or an answer given earlier in the same flow. To route on an answer, use a Branch node.

Branch node

A Branch node routes users based on their answer to a component on an earlier screen. By default it reads the screen right before it, and you can pick any earlier screen the user passes on the way to the split instead. For example, if a screen contains a radio group asking "What is your role?", the Branch node can send product managers to one screen and engineers to another, even when other screens come between the question and the split.

Supported branchable components: RadioGroup, Dropdown, Checkbox, NPS, Rating, Quiz, Chip, Segmented Control, and Button. A Button split reads the button tapped to leave the screen right before it.

Branching on an answer from an earlier screen requires iOS SDK 1.3.0 or Android SDK 1.3.0. Older SDK versions take the split's default path for such splits. They also keep only the last input on a screen, so when the user leaves the answer screen by tapping a button, such as Continue, that tap replaces the answer and the split takes its default path. A Button split still routes on those versions, because the tapped button is the answer.

Quiz, Chip and Segmented Control splits need Android SDK 1.3.0, even when they read the screen right before them. Android SDK 1.2.0 and older take the split's default path for them.

See Branching for a full guide.

End node

An End node terminates the flow. When a user reaches an End node, the flow is dismissed. A flow can have multiple End nodes to support different exit points.

Working with edges

Edges are the connections between nodes. They define the navigation path through the flow.

• Create an edge -- hover over a node's output handle (the dot on the right side) and drag to another node's input handle.
• Delete an edge -- select the edge and press Delete, or right-click and choose Remove.
• Condition edges -- edges from Condition nodes are labeled Yes or No.
• Branch edges -- edges from Branch nodes are labeled with the option value they correspond to (e.g., "Product Manager", "Engineer").

Layers panel

When you select a screen node, the Layers tab appears in the right-side panel (next to the Properties tab). It shows the component tree for that screen. Use it to:

• See all components in the selected screen at a glance.
• Select components by clicking them in the tree.
• Reorder components by dragging items up or down.
• Nest components inside containers by dragging them onto a container layer.

Canvas toolbar

The toolbar at the top of the builder provides quick actions: