--- title: "How the scenario editor works" description: "What the Scenario Builder visual scenario editor is, how it works, and why it's built on blocks and transitions." --- # How the scenario editor works The scenario editor (Scenario Builder) is a visual tool for building bot dialog scenarios in ConnectiveOne. Instead of writing code, you add blocks to a canvas, connect them with arrows, and configure conditions and transitions. This page explains how the editor works, its key concepts, and why it's designed this way. --- ## Context and the problem Bot dialog scenarios can be complex: different conversation branches, data collection, handoffs to operators, integrations with external systems. Describing such logic in text or code is difficult — it's easy to get lost in branches and transitions. **What the visual editor solves:** - All dialog logic is visible on one screen: blocks, transitions, conditions - Changes are made without code — through clicks and field settings - Errors are easier to find — incorrect connections or missing transitions are visible on the diagram - The team can work on the scenario together — everyone sees the structure **Typical use cases:** - Creating a bot from scratch: greeting, menu, data collection, handoff to operator - Adding new branches to an existing scenario - Restructuring logic after business process changes - Testing the scenario before launch --- ## Key concepts ### Blocks (nodes) Each block is an element of scenario logic. Blocks have different roles: - **Start** — section entry point, triggers (channels, webhook, internal events, MCP Tool). See [What is the Start node](/en/scenariobuilder/explanation/what-is-start-node.md) for details. - **Message with buttons** — send text or menu to the user. See [Menus and buttons](/en/scenariobuilder/explanation/message-with-keyboard-node.md). - **Wait for input** — collect data (text, number, date, choice). See [Getting text from the client](/en/scenariobuilder/explanation/wait-for-input-node.md). - **Router** — direct by conditions to different branches. See [Branching by rules](/en/scenariobuilder/explanation/router-node.md). - **Exit point / Entry point** — jump to another section or process. See [Moving between sections](/en/scenariobuilder/explanation/entry-exit-section-flow.md). - **Connect to operator** — hand off the dialog to an operator. See [Handing the chat to a live operator](/en/scenariobuilder/explanation/connect-to-operator-node.md). - **Set** — store constants / key-value pairs. See [Storing values for later steps](/en/scenariobuilder/explanation/set-node.md). - **Actions** — call external systems (API, email, integrations) - **Note** — explanation on the diagram for the team Blocks are added via the "+" button on the canvas. A modal shows categories (Basic, Messaging, Data, etc.) and search. After adding, the block is configured in the right panel (Node Inspector). ### Canvas and transitions **Canvas** — the central area where blocks are placed. You drag blocks and connect them with arrows (edges). An arrow defines the execution order: after one block completes, execution moves to the next. **Transitions** can be: - **Simple** — one output from a block to one next block - **Branched** — a router with multiple conditions directs to different branches - **Between sections** — an exit point from one section connects to an entry point in another ### Sections Complex scenarios are split into **sections**. A section is a group of blocks with its own logic. Exit and entry points allow transitions between sections without duplicating code. This simplifies maintenance: changes in one section don't affect others. ### Variables and constants **Process variables** — data stored during the dialog (user name, choice, entered values). They are in a separate left panel and available in blocks via `{{variable_name}}` substitution. **Constants** — values that don't change during the dialog (e.g., API URL, keys). Also managed in the sidebar. ### Canvas search The top toolbar includes **node search**: find a block by title or content in the current section or across the whole scenario. Step-by-step: [How to find a node on the canvas](/en/scenariobuilder/how-to/find-nodes-on-canvas.md). --- ## How it works together 1. You open a scenario from the process library or create a new one. 2. On the canvas, you add blocks and connect them with arrows. 3. In the right panel, you configure each block: text, conditions, action parameters. 4. Variables and constants are added in the sidebar. 5. You save the scenario. The system validates connections and checks correctness. 6. You test via "Runs" — run history, chat preview, highlighting of executed blocks. **Single context:** Process library and editor together — no need to switch between sections. Find the bot → open the constructor → edit. --- ## Why a visual editor **Alternative:** describe the scenario as JSON or code. This offers flexibility but requires technical knowledge and easily leads to errors when changing structure. **Visual approach:** - Suitable for those who don't write code — business analysts, content managers - Structure is visible immediately — no need to "assemble" logic from text - Errors are easier to find — empty outputs, unconnected blocks are visible on the diagram - The team can work together — notes on the diagram, version history, save with comment **Limitation:** for very specific integrations, an Action with custom logic may be needed. But most scenarios can be built entirely visually. --- ## Implications for users **For those creating scenarios:** - Start with the start block — configure triggers (channels, webhook) - Use sections for complex scenarios — don't try to fit everything in one diagram - Use notes — they help the team understand the logic **Common mistakes:** - **Empty block output** — block not connected to the next, dialog "hangs". Check that every block has at least one output (except terminal blocks). - **Circular dependencies** — infinite loop between blocks. A router or condition must have an exit for dialog completion. - **Forgotten variable** — the block uses `{{name}}` but the variable wasn't created in the panel. Add the variable in the sidebar. --- ## Related documents - **Explanation:** [How the process library works](/en/scenariobuilder/explanation/what-is-process-library.md) - **Explanation:** [What is the Start node](/en/scenariobuilder/explanation/what-is-start-node.md) - **How-to:** [How to use the process library](/en/scenariobuilder/how-to/use-process-library.md) - **Learn:** [Processes and Scenarios — Scenario Builder](/en/learn/scenario-builder/processes-and-scenarios.md) — module overview and video - **How-to:** [Create scenario](/en/scenariobuilder/how-to/create-scenario.md) - **How-to:** [Edit scenario](/en/scenariobuilder/how-to/edit-scenario.md) - **How-to:** [Test scenario](/en/scenariobuilder/how-to/test-scenario.md) - **Integrator:** [Scenario Builder — integrator hub](/en/scenariobuilder/integrator-hub.md)