---
url: https://docs.corbitaltech.dev/products/whatsbot/bot-flow-builder.md
description: >-
  Build WhatsApp chatbots inside Perfex CRM without code using WhatsBot's
  drag-and-drop Bot Flow Builder. Add nodes for messages, buttons, lists,
  conditional logic, and keyword triggers to automate customer conversations.
---

# Drag-Drop Bot Flow Builder

\[\[toc]]

## Introduction

This Flow Builder allows you to easily create interactive bot flows using a simple drag-and-drop interface.
Follow this step-by-step guide to get started.

![flow-builder](./images/flow-builder/flow-builder.png)

## Overview of Interface

1. **Available Components:** On the left-hand side, you will see various components that you can add to your bot flow. Components include:
   * Text Message
   * Image Message
   * Audio Message
   * Video Message
   * Document
   * CTA (Call to Action)
   * Button Message
   * AI Assistant
2. **Flow Canvas:** The main area where you build and organize your bot flow.
3. **Save Button:** Located at the bottom left, use this to save your bot flow.

![components](./images/flow-builder/new-component.png)

## Step-by-Step Guide

### Step 1: Start a New Bot Flow

1. Click on the `Start Bot Flow` component from the Available Components and drag it onto the Flow Canvas.
2. Configure the `Start Bot Flow` component:
   * **Matching Type:** Specify the matching type (e.g., Leads, Customer, etc.).

### Step 2: Add Text Messages

1. Drag the `Text Message` component from the Available Components to the Flow Canvas.
2. Customize the text message:
   * Input your message in the provided text field.
3. Connect the `Start Bot Flow` to the `Text Message` by drawing a connecting line from the blue dot of `Start Bot Flow` to the blue dot of `Text Message`.

### Step 3: Add Images

1. Drag the `Image Message` component into the Flow Canvas.
2. Upload or select your image and any accompanying text.
3. Link the `Text Message` to the `Image Message` by drawing a line between their blue dots.

### Step 4: Add Audio

1. Drag the `Audio Message` component into the Flow Canvas.
2. Upload or select your audio and any accompanying text.
3. Link the `Image Message` to the `Audio Message` by drawing a line between their blue dots.

### Step 5: Add Video

1. Drag the `Video Message` component into the Flow Canvas.
2. Upload or select your video and any accompanying text.
3. Link the `Audio Message` to the `Video Message` by drawing a line between their blue dots.

### Step 6: Add Document

1. Drag the `Document` component into the Flow Canvas.
2. Upload or select your document and any accompanying text.
3. Link the `Video Message` to the `Document` by drawing a line between their blue dots.

### Step 7: Add Location

1. Drag the `Location` component into the Flow Canvas.
2. Upload or select and search your location and any accompanying text.
3. Link the `Document` to the `Location` by drawing a line between their blue dots.

### Step 8: Add Call-to-Action (CTA)

1. Drag the `CTA (Call to Action)` component onto the Flow Canvas.
2. Configure the CTA component:
   * **Header Text:** Add the header text.
   * **Header Value:** Provide the value or description for the header.
   * **Link 1:** Add the link for the CTA.
   * **Footer Text:** Add any footer text.
3. Connect the `Image Message` to the `CTA` by drawing a line between their blue dots.

### Step 9: AI Assistant

1. Drag the `AI Assistance` component onto the Flow Canvas.
2. Configure the AI Assistance component:
   * **Personal Assistant:** Add the link for the CTA.
   * **Footer** Add any footer text.
3. Connect the `Image Message` to the `AI Assistance` by drawing a line between their blue dots.

The AI Assistant Settings allow you to configure and customize the behavior of the AI assistant integrated into the WhatsBot module. This guide will help you understand each option and configure the settings for optimal performance.

### Step 10: Add Additional Components

1. Continue adding other components like:
   * `Button Message`: Adding interactive buttons
   * `Audio Message`: Incorporate audio messages
   * `Video Message`: Embed videos
   * `Document`: Attach documents
2. Link each component sequentially as per your bot flow logic, ensuring that all components are connected via the blue dots.

### Step 11: Review and Save

1. Review your bot flow on the canvas to ensure all components are properly linked.
2. Click the `Save` button on the left-hand side to save your bot flow.

![canvas](./images/flow-builder/canvas.png)

## How it works

![video-demo](./images/flow-builder/builder-video.gif)