Chatty Form Documentation

Back to docs

Creating Chat Flows in Chatty Form

This guide will help you understand how to create effective conversation flows for your chatbots in Chatty Form.

Overview

Chat flows are the backbone of your chatbot experience. They define the conversation pathway, the questions asked, and how the bot responds to user inputs. This visual programming approach uses nodes and connections to map out the entire user journey.

Prerequisites

Before creating a chat flow, ensure:

  • You've created a chat bot
  • You understand your conversation objectives
  • You know what information you want to collect from users

Understanding the Flow Builder Interface

When you open the flow builder for your chat bot, you'll see:

  1. Canvas Area: The large central area where you design your flow
  2. Node Palette: Left sidebar with different node types you can add
  3. Test Chat Panel: Right panel to preview your flow as you build
  4. Top Toolbar: Contains save, publish, embed, and settings buttons
  5. Controls: Zoom and pan controls at the bottom

Step-by-Step Instructions

Step 1: Access the Flow Builder

  1. Go to "My Chat Bots" page
  2. Click on the card for the chat bot you want to edit
  3. This opens the flow builder with a default sample flow

Step 2: Understand Default Flow (Optional)

The default flow includes:

  • Starting text node with welcome message
  • Sample input fields
  • Connection arrows showing conversation path
  • Ending "Thank you" message

Step 3: Build Your Conversation Flow

Adding Nodes:

  1. Browse the node palette on the left
  2. Drag a node from the palette to the canvas
  3. Or click on a node type in the palette and then click on the canvas

Connecting Nodes:

  1. Click and drag from the connection point of one node to another
  2. Arrows will appear showing the connection
  3. Release to establish the flow direction

Configuring Nodes:

  1. Click on any node to view its configuration options
  2. In the node configuration, edit text, options, or settings as needed
  3. Changes are saved automatically for each node

Step 4: Design Effective Flows

Good Flow Design Principles:

  • Start with a welcoming message
  • Ask clear, concise questions
  • Use logical branching for complex decisions
  • Include a clear ending point with thanks
  • Keep the conversation natural and engaging

Common Flow Patterns:

  • Linear Flow: Simple question-answer sequence
  • Branching Flow: Questions that depend on previous answers
  • Loop Flow: Returning to previous questions based on conditions

Step 5: Test Your Flow

  1. Use the "Test Chat" panel on the right to simulate the conversation
  2. Try multiple paths through your flow
  3. Ensure all branches lead to logical conclusions
  4. Verify that required fields are appropriately marked

Step 6: Save Your Progress

  1. Click the "Save Flow" button in the top toolbar
  2. Your changes are saved to your bot's flow
  3. You can continue editing after saving

Advanced Flow Concepts

Conditional Logic

Use conditional nodes to create smart conversation paths based on user responses. For example:

  • If a user selects "Yes" for "Want to learn more?", go to detail nodes
  • If a user selects "No", go directly to the thank you message

Data Collection Fields

Input nodes allow you to collect different types of user information:

  • Text inputs for names, comments
  • Email inputs for contact information
  • Number inputs for quantities or ages
  • Date inputs for appointments or deadlines

Flow Validation

Before publishing, ensure:

  • All required input fields have appropriate labels and names
  • Every node leads to at least one other node (no dead ends)
  • Branching logic is properly configured

Tips for Better Flows

Keep It Simple

  • Don't overwhelm users with too many questions at once
  • Break complex surveys into shorter segments
  • Use branching to ask relevant follow-up questions

Make It Conversational

  • Write in a friendly, natural tone
  • Use personal pronouns like "you" and "we"
  • Acknowledge user responses when appropriate

Clear Navigation

  • Make it obvious when users are moving between sections
  • Provide ways to go back if needed
  • End with a clear call to action

Mobile-Friendly Design

  • Keep text concise for mobile screens
  • Use appropriate input types (phone for phone numbers, email for emails)
  • Consider how different input types display on mobile

Troubleshooting Common Issues

Flow Isn't Working as Expected

  • Check all connections between nodes
  • Verify that all required fields are properly configured
  • Test each branch separately

Dead Ends in Flow

  • Ensure every path eventually reaches a conclusion
  • Check that conditional nodes have outcomes for all possibilities

Validation Errors

  • Make sure input nodes have both "Label" and "Name" fields filled
  • Verify that required fields are correctly marked

Next Steps

After designing your flow:

  1. Thoroughly test it in the preview panel
  2. Save your flow
  3. Add branding and customize the UI
  4. Publish your chatbot
  5. Embed it on your website or share the public link
  6. Monitor submissions in the dashboard

Need Help?

  • Refer to the node-specific documentation for advanced configurations
  • Check the templates for examples of effective flows
  • Contact support if you encounter technical issues