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).
• Event properties -- data from tracked events (e.g., purchase amount, feature usage).

Branch node

A Branch node routes users based on their answer to a component on the previous screen. 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.

Supported branchable components: RadioGroup, NPS, Rating, Dropdown, Checkbox, and Button.

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: