Skip to content

Building Your First Flow

This tutorial walks you through building a complete, working WhatsApp assistant flow from scratch. By the end, you'll have a flow that greets customers, presents a menu, answers common questions, and hands off to a human agent when needed.

What You'll Build

flowchart TD
    A["🚀 Entry Point"] --> B["💬 Welcome Message"]
    B --> C["📋 Main Menu"]
    C -->|"About Us"| D["💬 About Us"]
    C -->|"Our Services"| E["💬 Services"]
    C -->|"Talk to Agent"| F["👤 Human Handoff"]
    D --> C
    E --> C
    style A fill:#dcfce7,stroke:#22c55e,stroke-width:2px
    style B fill:#dbeafe,stroke:#60a5fa,stroke-width:2px
    style C fill:#ede9fe,stroke:#8b5cf6,stroke-width:2px
    style D fill:#dbeafe,stroke:#60a5fa,stroke-width:2px
    style E fill:#dbeafe,stroke:#60a5fa,stroke-width:2px
    style F fill:#ffe4e6,stroke:#f43f5e,stroke-width:2px

Step 1: Add the Entry Point

  1. Open the Menu Designer.
  2. From the Node Palette, click 🚀 Entry Point.
  3. In the Inspector, set:
    • Trigger: Any incoming message

This means any time a customer messages your WhatsApp number, the flow begins.

Keyword Triggers

If you want the flow to start only when someone types "hi" or "start", choose Specific keyword and enter your keywords separated by commas.

Step 2: Add a Welcome Message

  1. Click 💬 Message in the palette to add it.
  2. In the Inspector, set:
    • Title: Welcome Message
    • Message Body: 👋 Hi there! Welcome to AcmeCorp. I'm your virtual assistant and I'm here to help.
  3. Connect the Entry Point to the Welcome Message by dragging from the Entry Point's output (bottom circle) to the Message's input (top circle).

Step 3: Create the Main Menu

  1. Click 📋 Menu in the palette.
  2. In the Inspector, configure:
    • Title: Main Menu
    • Prompt Text: What would you like to know?
    • Menu Type: List Message (up to 10 options, best for most menus)
  3. Add three options by clicking "Add Option":
    • Option 1: About Us
    • Option 2: Our Services
    • Option 3: Talk to an Agent
  4. Connect the Welcome Message to the Main Menu.

Menu Type Limits

Type Max Options Max Label Length
Quick Reply Buttons 3 20 characters
List Message 10 24 characters
Numbered Menu 10 60 characters

Choose Quick Reply Buttons for 2–3 simple choices. Use List Message for longer menus.

Step 4: Add Response Messages

Now connect each menu option to a response:

"About Us" Response

  1. Add a 💬 Message node.
  2. Set Title to About Us and Message Body to: 
    🏢 AcmeCorp was founded in 2020 and serves over 10,000 businesses worldwide.

We specialise in AI-powered customer engagement solutions.

Type "menu" to go back to the main menu.
  3. Connect the Menu's "About Us" option to this message — drag from the small purple circle next to "About Us" in the Menu node.

"Our Services" Response

  1. Add another 💬 Message node.
  2. Set Title to Our Services and Message Body to your services description.
  3. Connect the Menu's "Our Services" option to this message.

Loop Back to Menu

  1. Connect both response messages back to the Main Menu — drag from the output (bottom) of each message back to the input (top) of the Main Menu.

This creates a loop so customers can keep browsing.

Step 5: Add Human Handoff

  1. Click 👤 Human Handoff in the palette.
  2. In the Inspector, set:
    • Title: Transfer to Agent
    • Handoff Message: Let me connect you with a team member. Please hold — someone will be with you shortly! 🙏
  3. Connect the Menu's "Talk to an Agent" option to this node.

Terminal Node

Human Handoff is a terminal node — it has no outgoing connections. Once a customer is transferred, the bot conversation ends.

Step 6: Review Your Flow

Your complete flow should now look like this:

flowchart TD
    A["🚀 Entry Point<br/><em>Any incoming message</em>"] --> B["💬 Welcome Message<br/><em>Hi there! Welcome...</em>"]
    B --> C["📋 Main Menu<br/><em>What would you like to know?</em>"]
    C -->|"1. About Us"| D["💬 About Us<br/><em>AcmeCorp was founded...</em>"]
    C -->|"2. Our Services"| E["💬 Our Services<br/><em>We offer...</em>"]
    C -->|"3. Talk to Agent"| F["👤 Human Handoff<br/><em>Connecting you...</em>"]
    D -->|"continue"| C
    E -->|"continue"| C

    style A fill:#dcfce7,stroke:#22c55e,stroke-width:2px
    style B fill:#dbeafe,stroke:#60a5fa,stroke-width:2px
    style C fill:#ede9fe,stroke:#8b5cf6,stroke-width:2px
    style D fill:#dbeafe,stroke:#60a5fa,stroke-width:2px
    style E fill:#dbeafe,stroke:#60a5fa,stroke-width:2px
    style F fill:#ffe4e6,stroke:#f43f5e,stroke-width:2px

Step 7: Check the Readiness Score

Look at the Readiness Score at the top of the designer. It should show 100% if everything is connected correctly. The score checks:

Check Points Required?
Entry point defined 20 ✅ Yes
Entry point connected 15 ✅ Yes
Welcome message configured 10 No
All menu options have routes 25 ✅ Yes
No unreachable nodes 15 No
Fallback / handoff configured 10 No
AI Chat connected 5 No

See Validation Rules for the full list of checks.

Step 8: Test in the Emulator

  1. Open the WhatsApp Emulator (preview pane).
  2. Type any message (e.g., "hi") to trigger the entry point.
  3. Verify you see the welcome message followed by the menu.
  4. Tap each menu option and confirm the correct response appears.
  5. Test the "Talk to Agent" option to confirm the handoff message.

Step 9: Publish

Once you're satisfied with testing:

  1. Click Publish in the top-right corner.
  2. Review any validation warnings.
  3. Confirm to deploy.

Your flow is now live — customers messaging your WhatsApp number will experience the flow you just built!

What's Next?

Now that you've built a basic flow, explore these more advanced topics: