> ## Documentation Index
> Fetch the complete documentation index at: https://docs.wizflow.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Flow Builder Basics

> Learn the fundamentals of creating workflows in Wizflow's visual Flow Builder

Flow Builder is Wizflow's visual interface for creating customer workflows. With drag-and-drop simplicity, you can build everything from simple contact forms to complex financial applications that integrate with Danish government services.

<Note>
  **No Coding Required**
  Flow Builder uses a visual, drag-and-drop interface. You build workflows by connecting entities (building blocks) together, not by writing code.
</Note>

## What is a Flow?

A **Flow** is a sequence of interactions between your organisation and a customer. It could be:

* An insurance application process
* A loan approval workflow
* A customer onboarding journey
* A pension advisory consultation
* A document signing process

<CardGroup cols={2}>
  <Card title="Linear Flows" icon="arrow-right">
    **Step-by-step processes**
    Users go through questions in a specific order, like a traditional form
  </Card>

  <Card title="Branching Flows" icon="code-branch">
    **Adaptive experiences**
    Different users see different questions based on their responses
  </Card>
</CardGroup>

***

## Flow Builder Interface

\[**Screenshot Coming Soon**: Annotated Flow Builder interface showing Canvas, Entity Palette, Properties Panel, and Toolbar]

### The Canvas

The main workspace where you build your flow by dragging entities and connecting them together.

<CardGroup cols={3}>
  <Card title="Visual Design" icon="eye">
    See your entire workflow at a glance with entities and connections
  </Card>

  <Card title="Drag & Drop" icon="hand-back-fist">
    Add entities by dragging from the palette to the canvas
  </Card>

  <Card title="Connect Entities" icon="link">
    Draw connections between entities to create your user journey
  </Card>
</CardGroup>

### Quick Example: See It in Action

\[**Visual Example Coming Soon**: Side-by-side showing a simple 3-step flow in the canvas next to how users experience it as a chatflow]

This gives you an immediate sense of how canvas design translates to user experience before diving into the details.

### Entity Palette

The library of building blocks available for your flows:

<Tabs>
  <Tab title="Messages">
    Display information to users

    * **Message**: Text and instructions
    * **Image**: Visual content
    * **PDF Display**: Documents for viewing
  </Tab>

  <Tab title="Questions">
    Collect information from users

    * **Text Input**: Names, descriptions
    * **Amount**: Monetary values in DKK
    * **Choice**: Multiple choice selections
    * **Date Picker**: Calendar selection
  </Tab>

  <Tab title="Danish Services">
    Integrate with government and financial systems

    * **Address**: Official Danish addresses, powered by RTB
    * **eSkat Data**: Tax information
    * **PensionsInfo**: Pension details
  </Tab>

  <Tab title="Triggers">
    Automate actions and integrations

    * **Email**: Send notifications
    * **PDF Generation**: Create documents
    * **Digital Signatures**: Document signing
  </Tab>
</Tabs>

### Properties Panel

Configure each entity's settings, validation rules, and appearance when you select it on the canvas.

***

## Core Concepts

Understanding these four concepts is essential for building effective flows:

<CardGroup cols={2}>
  <Card title="Entities" icon="puzzle-piece">
    **User-Facing Components**
    Questions, messages, and inputs that users interact with directly
  </Card>

  <Card title="Triggers" icon="bolt">
    **Server-Side Actions**
    External integrations like emails, PDFs, and API calls that happen behind the scenes
  </Card>

  <Card title="Branching Logic" icon="code-branch">
    **Conditional Routing**
    Direct users down different paths based on their responses using logical conditions
  </Card>

  <Card title="Markers" icon="bookmark">
    **Flow Annotations**
    Visual notes and labels to organize and document sections of your flow
  </Card>
</CardGroup>

### Canvas Operations

<Tabs>
  <Tab title="Entity Context Menu">
    **Right-click on any entity for:**

    * Copy/Paste entity
    * Delete entity
    * Edit properties
    * Preview from this point
    * Set as Start Node
  </Tab>

  <Tab title="Canvas Context Menu">
    **Right-click on empty canvas for:**

    * Quick add new entity
    * Quick add trigger
    * Paste copied entities
    * Add markers and annotations
  </Tab>
</Tabs>

***

## Getting Started with Wizflow

### Three Ways to Create Flows

From the Wizflow dashboard, you have three starting options:

<CardGroup cols={3}>
  <Card title="AI Flow" icon="robot">
    **Generate with AI Assistant**
    Describe what you want to build and let AI create 80% of your flow
  </Card>

  <Card title="New Flow" icon="plus">
    **Start from Scratch**
    Build your flow step-by-step using the visual editor
  </Card>

  <Card title="Template" icon="folder">
    **Use Pre-built Flows**
    Start with proven templates and customise for your needs
  </Card>
</CardGroup>

<Tip>
  **Recommended for Beginners**: Start with the AI Assistant. Describe your workflow in plain language, and the AI will create a working foundation you can then customise.
</Tip>

***

## Creating Your First Flow

### Using the AI Assistant (Recommended)

The fastest way to create your first flow is with the **Wizflow AI Assistant**:

<Steps>
  <Step title="Describe Your Workflow">
    Click "AI Flow" and describe what you want: "Create a life insurance application flow"
  </Step>

  <Step title="Review the Generated Flow">
    The AI creates entities, connections, and basic logic - typically 80% complete
  </Step>

  <Step title="Customise and Refine">
    Click individual entities to modify labels, validation, and settings
  </Step>

  <Step title="Test Your Flow">
    Use preview mode to experience the flow as your users will
  </Step>

  <Step title="Publish When Ready">
    Make your flow live for actual users
  </Step>
</Steps>

<CardGroup cols={2}>
  <Card title="AI Strengths" icon="brain">
    **What AI Does Well**

    * Creates logical flow structure
    * Adds appropriate entities for your use case
    * Sets up basic validation rules
    * Connects entities in proper sequence
  </Card>

  <Card title="Your Role" icon="user">
    **What You Need to Review**

    * Customise labels and messaging
    * Adjust validation requirements
    * Fine-tune conditional logic
    * Test edge cases and user paths
  </Card>
</CardGroup>

### Building Manually (Step-by-Step)

If you prefer to build from scratch:

<Steps>
  <Step title="Start with a Message">
    Drag a **Message** entity to the canvas to welcome users and explain the process
  </Step>

  <Step title="Add Data Collection">
    Add entities to collect information - start simple with **Text Input** or **Amount**
  </Step>

  <Step title="Connect the Entities">
    Draw arrows between entities to create the user path
  </Step>

  <Step title="Configure Properties">
    Click each entity to set validation rules, labels, and help text
  </Step>

  <Step title="Add an End Point">
    Use a final **Message** entity to thank users and confirm submission
  </Step>

  <Step title="Preview & Test">
    Test your flow thoroughly before publishing
  </Step>
</Steps>

### Simple Example: Contact Information Flow

```
Welcome Message
    ↓
"What is your name?" (Text Input)
    ↓  
"What is your email?" (Email Field)
    ↓
"Thank you! We'll be in touch soon." (Message)
```

***

## Working with Entities

### Entity Types

**Entities** are the user-facing building blocks of your flow:

<CardGroup cols={2}>
  <Card title="Input Entities" icon="keyboard">
    **Collect Data**
    Ask questions and gather information from users
  </Card>

  <Card title="Display Entities" icon="eye">
    **Show Information**
    Present content, instructions, or confirmations to users
  </Card>
</CardGroup>

<Info>
  For a complete guide to all entity types and their properties, see [Entities Overview](/features/entities-overview).
</Info>

### Configuring Entities

Click any entity to open its properties panel:

<Tabs>
  <Tab title="Basic Settings">
    * **Label**: What users see as the question or instruction
    * **Key**: Internal identifier for the entity, **generated automatically from the label**
    * **Required**: Make the field mandatory to proceed
  </Tab>

  <Tab title="Validation">
    * **Built-in Validation**: Email, CPR, phone number formats
    * **Custom Rules**: Age ranges, amount limits, text length
    * **Danish Standards**: Postal codes, CVR numbers
  </Tab>

  <Tab title="Appearance">
    * **Help Text**: Additional guidance for users
    * **Placeholder**: Example text in input fields
    * **Styling**: Control visual appearance
  </Tab>

  <Tab title="Logic">
    * **Default Values**: Pre-populate when possible
    * **Conditional Display**: Show/hide based on other responses
    * **Calculations**: Use entity values in formulas
  </Tab>
</Tabs>

<Tip>
  **Keys generate themselves.** New entities start with a stub key based on their type, and a clean key is generated automatically from the label the first time you leave the label field — so you rarely need to type one by hand. You can still edit the key manually, or re-trigger automatic generation at any time.
</Tip>

***

## Testing Your Flow

### Preview Mode

Test your flow as users will experience it:

<CardGroup cols={2}>
  <Card title="Desktop Preview" icon="computer">
    See how your flow looks and works on desktop computers
  </Card>

  <Card title="Mobile Preview" icon="mobile">
    Test the mobile experience with touch interactions
  </Card>
</CardGroup>

### Testing Checklist

<Steps>
  <Step title="Happy Path Testing">
    Complete the flow normally with valid inputs
  </Step>

  <Step title="Validation Testing">
    Test email validation, CPR validation, and required fields
  </Step>

  <Step title="Error Handling">
    Try submitting invalid data and empty required fields
  </Step>

  <Step title="Mobile Experience">
    Ensure the flow works well on mobile devices
  </Step>

  <Step title="Edge Cases">
    Test unusual but valid inputs and boundary conditions
  </Step>
</Steps>

***

## Publishing and Analytics

### Publishing Your Flow

<Steps>
  <Step title="Final Review">
    Check all entity labels, validation rules, and connections
  </Step>

  <Step title="Complete Testing">
    Test the entire flow thoroughly in preview mode
  </Step>

  <Step title="Publish">
    Click publish to make your flow live for users
  </Step>

  <Step title="Monitor Performance">
    Use Wizflow Analytics to track user behaviour and completion rates
  </Step>
</Steps>

### Understanding Flow Analytics

Once published, you can monitor:

* **Completion rates**: How many users finish the entire flow
* **Drop-off points**: Where users abandon the process
* **Popular paths**: Which branches users take most often
* **Performance over time**: Trends in engagement and completion

<Info>
  Use analytics data to continuously improve your flows. High drop-off rates at specific entities indicate areas that need simplification or clearer instructions.
</Info>

***

## Best Practices

<CardGroup cols={2}>
  <Card title="Start Simple" icon="seedling">
    Begin with basic linear flows, add complexity gradually
  </Card>

  <Card title="Think Like Users" icon="users">
    Consider the user journey and provide context at each step
  </Card>

  <Card title="Use Clear Language" icon="circle-envelope">
    Write questions and instructions in plain, understandable language
  </Card>

  <Card title="Minimise Friction" icon="bolt-slash">
    Only ask for information you actually need
  </Card>

  <Card title="Provide Help" icon="handshake-angle">
    Use help text to guide users without cluttering the interface
  </Card>

  <Card title="Test Frequently" icon="arrows-rotate">
    Test your flow regularly during development, not just at the end
  </Card>
</CardGroup>

***

## Advanced Features

For more complex workflow needs, Wizflow offers advanced capabilities:

<CardGroup cols={2}>
  <Card title="AI Assistant" icon="robot" href="/ai-assistant/overview">
    **Intelligent Flow Building**
    Entity-specific modifications, flow-wide improvements, and advanced AI capabilities
  </Card>

  <Card title="Custom Entities" icon="puzzle-piece" href="/features/custom-entities">
    **Build Your Own Components**
    Create reusable custom entities tailored to your specific needs
  </Card>

  <Card title="Variables" icon="brackets-curly" href="/features/variables">
    **Dynamic Data Management**
    Store and manipulate data throughout your flows with global variables
  </Card>

  <Card title="Conditional Logic" icon="code-branch" href="/features/conditional-logic-routing">
    **Smart Routing**
    Advanced branching and conditional display based on user responses
  </Card>
</CardGroup>

***

## Next Steps

<CardGroup cols={2}>
  <Card title="Explore All Entities" icon="grid" href="/features/entities-overview">
    Learn about all 35+ available entity types and their properties
  </Card>

  <Card title="Add Conditional Logic" icon="git-alt" href="/features/conditional-logic-routing">
    Create flows that adapt based on user responses
  </Card>

  <Card title="Advanced Features" icon="gauge-high" href="/features/flow-builder-advanced">
    Analytics, optimization, and complex flow management
  </Card>

  <Card title="Use Case Examples" icon="lightbulb" href="/use-cases/index">
    See real-world applications in financial services
  </Card>
</CardGroup>

***

## Getting Help

<CardGroup cols={2}>
  <Card title="AI Assistant" icon="robot">
    **Built-in Help**
    Use the AI Assistant for instant help with building and modifying flows
  </Card>

  <Card title="Support Team" icon="headset">
    **Technical Support**
    Contact [support@wizflow.io](mailto:support@wizflow.io) for detailed assistance
  </Card>
</CardGroup>

Remember: The AI Assistant handles about 80% of flow creation automatically, but always review and test your flows to ensure they meet your specific requirements and provide a good user experience.