# Flow Builder **For:** marketing and operations staff building checkout funnels and upsell flows **What you'll learn:** what a flow is, how to create one, how to add and connect buttons in the visual editor, and how saving a live flow affects your storefront checkout. > This is a **how-to guide for the dashboard**, not the API. If you're building an > automated flow management system instead, see the [Usage Guide](/usage-guide). --- ## Before you start You'll need an admin login for your store and access to the **Flow Builder** section in the admin dashboard. If you don't see it in the left navigation, ask your administrator to grant flow management access. Throughout this guide, screenshots use a **demo store** — the names, products, and amounts shown are fake. --- ## 1. Understand what a flow is A **flow** is a checkout funnel built from a set of **buttons**. Each button represents one offer a customer can accept or decline (for example, an upsell). Buttons are connected to one another so that accepting or declining one offer sends the customer to the next button — or to a redirect URL — until they reach the end of the flow. You build a flow visually: buttons appear as nodes on a canvas, and you draw connections between them to define the path customers follow. A flow has a **status**: | Status | Meaning | |--------|---------| | **draft** | The flow is being built and is not yet live | | **active** | The flow is published and its buttons can run on your live checkout | > **Caution:** When a flow is **active**, saving changes to it takes effect on the live storefront checkout immediately. Real customers will see the updated buttons and offers as soon as you save. Test changes on a draft flow first whenever you can. --- ## 2. Open the Flow Builder Log in to the admin dashboard and click **Flow Builder** in the left navigation. You'll see a list of your existing flows, or an empty state prompting you to create your first one. ![The Flow Builder list page](images/flow-builder/flow-list.png) Each row shows: - **Name** — the flow's name, with its description underneath (if any) - **Status** — an **active** (green) or **draft** (grey) badge - **Slug** — the flow's URL-friendly identifier - **Buttons** — how many buttons the flow contains - **Created** — the date the flow was created - **Actions** — a menu (the **⋯** icon) with per-flow actions Click any row to open that flow's detail page. --- ## 3. Create a flow Click **Create Flow** (or **Create Your First Flow** on the empty state). A drawer opens. ![The Create New Flow drawer](images/flow-builder/create-flow.png) Fill in: 1. **Flow Name** (required) — a descriptive name, e.g. "Summer Sale Funnel" 2. **Slug** (required) — a URL-friendly identifier, e.g. "summer-sale". Spaces and special characters are converted to hyphens automatically. 3. **Description** (optional) — a short note about what this flow is for Click **Create Flow**. The flow is created and opens on its detail page, ready for you to add buttons. --- ## 4. Understand the flow detail page The detail page has a header and four tabs. ![The flow detail page with its four tabs](images/flow-builder/flow-detail.png) The **header** shows the flow name and status badge, plus: - **Show Metrics / Hide Metrics** — reveals a quick-stats strip (buttons, sessions, conversion rate, revenue) - **Publish** — appears only while the flow is a draft - The **⋯** menu — **Edit Details**, **Activate Flow / Deactivate Flow**, and **Delete Flow** The four tabs are: | Tab | What it's for | |-----|---------------| | **Flow Editor** | Add buttons and connect them on the visual canvas | | **Analytics** | View session, conversion, and revenue metrics for the flow | | **Embed Code** | Get the code to place a button on your site | | **URLs** | Manage reusable redirect URLs used by buttons | --- ## 5. Add a button Open the **Flow Editor** tab. If the flow has no buttons yet, you'll see a prompt to create your first one. Otherwise, click **Add Button** at the top right of the editor. A drawer opens with the button's settings, grouped into sections. ![The Create New Button drawer](images/flow-builder/create-button.png) **Basic Information** - **Label** (required) — an internal name for the button, e.g. "Buy Now - 49.00". Only you see this. - **Button Text** (required) — the text customers see on the button, e.g. "Get Started Now" - **Group Key** (optional) — an identifier used to group buttons in analytics **Cart Configuration & Pricing** - Use the product selector to choose one or more products (and quantities) this button adds to the cart. The **Calculated Total** updates automatically from the products you select. - **Override Total Price** — check this to enter a custom price instead of the calculated total. Enter the price as a decimal (for example, `49.00`) and set the currency. **Navigation Paths** - **Success Redirect URL** — where the customer goes after accepting this button's offer - **Decline Redirect URL** — where the customer goes after declining - **Enable Split Test (Success Path)** — optionally rotate accepting customers evenly between two follow-up buttons to compare them (see step 8) **Terminal Flags** - **Terminal Success** — mark this button as the end of the flow when accepted - **Terminal Decline** — mark this button as the end of the flow when declined Click **Create Button**. The button appears as a node on the canvas. > **Tip:** You can also connect buttons to each other by drawing lines on the canvas (step 7) rather than only using redirect URLs. Use redirect URLs to send customers to pages outside the flow. --- ## 6. Arrange buttons on the canvas Each button is a node on the visual canvas. The canvas has a few built-in controls: - **Drag** a node to reposition it - Use the zoom and fit controls (bottom left) and the mini-map to navigate large flows - A **Legend** panel explains the colors: green lines are the success path, red lines are the decline path, and blue nodes are buttons To edit or delete a button, use the controls on its node, which reopen the button drawer or remove it. --- ## 7. Connect buttons To define what happens after a customer accepts or declines a button, connect it to the next button. ![Connecting a success handle to another button](images/flow-builder/connect-buttons.png) - Drag from a button's **success** handle to another button to set the accept path (green line) - Drag from a button's **decline** handle to another button to set the decline path (red line) - To remove a connection, click the line and press **Delete** or **Backspace** A button marked **Terminal Success** or **Terminal Decline** ends the flow on that path, so it doesn't need an outgoing connection there. > **Tip:** Buttons that aren't connected anywhere are automatically linked to a **Receipt Page** node when you save, so customers always reach an end point. --- ## 8. Set up a split test (optional) To compare two follow-up offers, edit a button, open **Navigation Paths**, and check **Enable Split Test (Success Path)**. Choose **Variant A** and **Variant B** — two different buttons. Customers who accept are then rotated evenly between the two so you can compare which converts better. You need at least two other buttons in the flow to fully configure a split test. --- ## 9. Save your changes Click **Save Changes** at the top right of the Flow Editor to save button positions and connections. ![The Save Changes button in the editor](images/flow-builder/save-flow.png) > **Caution:** If the flow is **active** (live and published), saving prompts you to confirm because the changes affect real customers immediately. Read the confirmation before continuing. If you're not ready for changes to go live, deactivate the flow first (step 12). --- ## 10. Add redirect URLs (optional) The **URLs** tab is a directory of reusable redirect links you can attach to buttons instead of typing the same address repeatedly. ![The URLs tab](images/flow-builder/urls-tab.png) Click **Add URL** and fill in: - **Name** (required) — a label, e.g. "Thank You Page" - **URL** (required) — the web address - **URL Type** — **Success**, **Decline**, or **External**, used to categorize the link - **Description** (optional) Saved URLs then appear as choices when you set a button's success or decline redirect. --- ## 11. Get the embed code The **Embed Code** tab gives you the code to place a button on your site. ![The Embed Code tab](images/flow-builder/embed-code.png) 1. Select a button from the list on the left. The button used as the flow's entry point is marked with an **Entry** badge. 2. Copy the code from one of the tabs on the right (for example, the upsell-page embed, checkout integration, or full implementation). 3. Paste it into your site or landing-page tool. The **Customize** tab lets you adjust the accept and decline button styling (colors, size, padding) with a live preview before copying. The **Demo** button generates a downloadable sample funnel you can use for testing. --- ## 12. Activate, deactivate, or delete a flow **To publish a draft flow**, open it and click **Publish** in the header (or use **Activate Flow** in the **⋯** menu). Its status changes to **active** and its buttons can run on the live checkout. **To take a flow offline**, use **Deactivate Flow** in the **⋯** menu. The flow returns to **draft** and stops running on the storefront, but nothing is lost. **To delete a flow**, use **Delete Flow** in the **⋯** menu (available from both the list and the detail page) and confirm. > **Caution:** Deleting a flow is permanent and cannot be undone. If you might reuse the flow later, deactivate it instead of deleting it. --- ## Quick reference | Task | How to do it | |------|-------------| | **Create a flow** | Flow Builder → Create Flow → enter Name and Slug → Create Flow | | **Open a flow** | Click the flow row in the Flow Builder list | | **Add a button** | Flow Editor tab → Add Button → fill in the drawer → Create Button | | **Set a button's price** | In the button drawer, select products (auto-total) or check Override Total Price and enter a decimal (49.00) | | **Connect buttons** | Drag from a success or decline handle to another button on the canvas | | **Remove a connection** | Click the line → press Delete or Backspace | | **Split-test an offer** | Edit a button → Enable Split Test → pick Variant A and Variant B | | **Save changes** | Flow Editor → Save Changes (confirm the prompt if the flow is live) | | **Add a reusable URL** | URLs tab → Add URL → enter Name and URL → Create URL | | **Get embed code** | Embed Code tab → select a button → copy the code | | **Publish a flow** | Open the flow → Publish (or ⋯ → Activate Flow) | | **Take a flow offline** | ⋯ menu → Deactivate Flow | | **Delete a flow** | ⋯ menu → Delete Flow → confirm (permanent — cannot undo) |