# Flow editor

The Flow Editor page is structured to give you a comprehensive view and control of your virtual assistant workflows. Below is a detailed description of each section in the Flow Editor. 

Learn more about the Flow editor with the [Build, validate and test a simple flow](/ixhc2/general/tutorials/build-validate-and-test-a-simple-flow.md) tutorial

## Accessing the Flow Editor <a href="#accessing-the-chat-widget-configuration" id="accessing-the-chat-widget-configuration"></a>

1. Sign in to **ixHello Customer v2**.
2. In the left navigation menu, go to **Flows**
3. Select **Create Flow** or open an existing flow to edit.

## Flow editor page layout&#x20;

<figure><img src="/files/SdBgkPEY8iTbXf1si9vn" alt=""><figcaption></figcaption></figure>

### **1. Header**

* **Flow Name** and **Description**: At the top, you see the name and a brief description of the current flow. To the right of the name is a state badge that indicates whether the saved flow is valid or invalid.
* **Action Buttons**:
  * **Save**: Saves the current flow to the backend. It performs validation and displays any errors that might exist.
  * **Validate**: Validates the flow as currently displayed without saving it.&#x20;
  * **Test**: Opens the test chat, allowing you to interact with the flow.

### 2. Available nodes&#x20;

This section displays a list of nodes types available for use in your flow. You can:

* **Drag and Drop**: Add nodes to the Canvas by dragging them from the list.
* **Click to Add**: Click a node to add it to the center of the viewport in the Flow Canvas.

{% hint style="info" %}
Detailed descriptions of each node type and its configuration can be found in the child pages.
{% endhint %}

### **3. Canvas**

This is where you design the flow. It is composed of interconnected nodes that define the flow logic. **Canvas Controls** are located in the bottom left corner, these controls include

* **Zoom In/Out**: Adjust the view scale on the flow design.
* **Fit to View**: Automatically adjust the zoom level to fit the entire flow in view.

### 4. Sidebar

* **Node Configuration**: When a node is selected, the right sidebar opens to display and allow updates to the node's internal configuration.
* **Chat Interaction**: When the Test button is clicked, this sidebar shows the chat interaction corresponding to the flow logic being tested.

Learn more about the Flow editor with the [Build, validate and test a simple flow](/ixhc2/general/tutorials/build-validate-and-test-a-simple-flow.md) tutorial


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.ixhello.com/ixhc2/flows/flow-editor.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.