Building Chatbots with Voiceflow

While Botpress gives you a powerful flow-based chatbot builder, Voiceflow takes a different approach that many creators find even more intuitive. Voiceflow started as a platform for building voice assistants and has evolved into one of the most popular no-code tools for designing sophisticated conversational AI agents. In this lesson, you will learn how to build a complete customer support chatbot using Voiceflow's visual canvas.

What You'll Learn

• What Voiceflow is and how its approach differs from Botpress
• How to navigate Voiceflow's visual canvas and design conversations with drag-and-drop
• How to use Voiceflow's built-in AI features including knowledge bases and AI response generation
• How to build a customer support chatbot step by step with conditions and branching logic
• The difference between designing for voice assistants and chat interfaces

What Is Voiceflow?

Voiceflow is a collaborative, no-code platform for designing, prototyping, and launching conversational AI agents. It uses a visual canvas where you build conversations by placing blocks and connecting them with lines, much like creating a diagram.

How Voiceflow Differs from Botpress

Both platforms let you build chatbots without code, but they have different strengths and philosophies.

Botpress is built around a structured flow system with specific node types. It excels when you want tight control over every step of the conversation and integrates AI as a feature within its flow architecture.

Voiceflow centers around a freeform canvas where you arrange blocks visually. It was designed from the ground up for conversation design, making it especially strong for planning and prototyping complex dialogue systems. Voiceflow also has deep roots in voice assistant development, so it handles both text and voice interactions natively.

In practice, many chatbot builders learn both platforms and choose the one that best fits each project. The concepts transfer easily between them.

Voiceflow's Visual Canvas

When you create a new project in Voiceflow, you are presented with a large, open canvas. This is your workspace, and it works similarly to design tools like Figma or Miro.

Key Interface Elements

• The Canvas: The large central area where you place and connect blocks. You can zoom in and out, pan around, and organize blocks however you like.
• The Blocks Menu: Access this by clicking the plus icon or right-clicking on the canvas. It contains all the block types you can add to your conversation.
• The Sidebar: On the left, you will find project settings, variables, intents, and your knowledge base configuration.
• The Prototype View: A testing mode where you can interact with your chatbot and see how it behaves in real time.

Block Types You'll Use Most

• Speak/Text blocks: Send messages to the user
• Choice blocks: Present buttons or options for the user to select
• Capture blocks: Collect free-text input from the user
• Condition blocks: Branch the conversation based on variables or logic
• AI Response blocks: Generate dynamic responses using a large language model
• Set Variable blocks: Store and manipulate data during the conversation

Building a Customer Support Chatbot

Let's build a practical customer support chatbot step by step. This bot will help users troubleshoot common issues, answer product questions, and escalate to a human agent when needed.

Step 1: Create a New Project

1. Sign up for a free account at voiceflow.com
2. From your dashboard, click Create New Project
3. Choose Chat as the project type (not Voice)
4. Give your project a name like "Customer Support Bot"
5. You will be taken to the canvas editor

Step 2: Design the Welcome Message

The conversation starts with a Start block that is already on your canvas. Click on it and add a Text step inside it. Write a welcoming message:

"Hello! I'm your support assistant. I can help you with product questions, troubleshooting, or connect you with our team. What do you need help with?"

Step 3: Add Choice Options

Below your welcome message, add a Choice step inside the same block or create a new block connected to the start. Define three options:

• Product Questions
• Troubleshooting
• Talk to Support

Each choice creates a separate output port on the block. You will connect these ports to different blocks that handle each path.

Step 4: Build the Product Questions Branch

Create a new block on the canvas and connect it to the "Product Questions" output. Inside this block, you have two approaches.

The simple approach is to add text steps with your most common product information and use choice blocks to let users navigate between topics.

The AI-powered approach is to use an AI Response block connected to a knowledge base. We will cover this in detail in the next section, but the idea is that you upload your product documentation and let the AI answer questions based on that content.

Step 5: Build the Troubleshooting Branch

Create another block for troubleshooting. A good troubleshooting flow follows a diagnostic pattern:

1. Ask the user to describe their issue (use a Capture block)
2. Based on their response, use a Condition block to route to specific solutions
3. Provide step-by-step instructions for common problems
4. If the issue is not resolved, offer to escalate to a human

Step 6: Build the Escalation Branch

For the "Talk to Support" option, create a flow that:

1. Collects the user's name using a Capture block
2. Collects their email address using another Capture block
3. Asks them to briefly describe their issue
4. Confirms the information and lets them know a team member will follow up

Store each piece of information in a variable so you can reference it later or pass it to external systems.

Using Voiceflow's AI Features

Voiceflow has invested heavily in AI capabilities, and these features are what make it especially powerful for modern chatbot development.

Knowledge Base

The knowledge base is one of Voiceflow's standout features. It lets you upload documents, paste text, or provide URLs that your chatbot can reference when answering questions.

Setting up a knowledge base:

1. Click on the Knowledge Base section in the left sidebar
2. Click Add Data Source
3. Upload PDFs, paste text, or enter website URLs
4. Voiceflow processes and indexes the content automatically

Once your knowledge base is set up, you can add AI Response blocks to your canvas that draw from this information. When a user asks a question, the AI searches your knowledge base and generates an answer based on the relevant content.

AI Response Generation

AI Response blocks let you harness large language models directly in your conversation flow. You can configure:

• The system prompt: Instructions that tell the AI how to behave, what tone to use, and what topics to stay focused on
• The knowledge base: Which data sources the AI should reference
• Temperature: How creative or consistent the responses should be

This is especially useful for handling open-ended questions where you cannot predict exactly what users will ask.

Adding Conditions and Branching Logic

Real conversations are not linear. Users take different paths, change their minds, and ask unexpected questions. Voiceflow's condition blocks let you handle this complexity.

Using Condition Blocks

Drag a Condition block onto the canvas and define your logic. For example:

• If the variable issue_type equals "billing," go to the billing support flow
• If the variable attempts is greater than 2, escalate to a human agent
• If no condition matches, go to a default fallback path

Branching Best Practices

• Always include a default path for when no conditions match
• Keep your branching logic as simple as possible; deeply nested conditions become hard to maintain
• Use Set Variable blocks to track state, such as how many times a user has tried something or which topics they have already explored
• Label your blocks clearly on the canvas so you can understand the flow at a glance

Testing and Iterating

Voiceflow's prototype mode lets you test your chatbot without leaving the editor.

Running a Test

Click the Run button (or press the play icon) to open the prototype view. A chat interface appears where you can interact with your bot. Walk through every path and try different inputs.

Iterating on Your Design

As you test, you will notice areas for improvement. Maybe a response sounds robotic, a transition feels abrupt, or a condition does not trigger correctly. Go back to the canvas, make your changes, and test again. This rapid cycle of build, test, and refine is how professional conversation designers work.

Pay attention to these common issues:

• Abrupt transitions: Add transitional messages between major topic changes
• Missing fallbacks: Make sure every unexpected input gets a helpful response
• Overly long messages: Break long responses into multiple shorter messages for better readability

Voiceflow for Voice Assistants vs Chat

Voiceflow originally launched as a tool for building Alexa skills and Google Assistant actions. While this lesson focuses on chat, it is worth understanding the differences.

Voice interactions require shorter, more conversational responses because users are listening, not reading. You cannot use buttons or links, so you rely on spoken prompts and voice commands. Voice also requires careful attention to pronunciation and pacing.

Chat interactions allow for richer formatting, buttons, images, carousels, and links. Users can scroll back to review earlier messages, so you can provide more detail per response.

Voiceflow handles both modes, and if you ever need to build a voice assistant, your conversation design skills will transfer directly.

Key Takeaways

• Voiceflow uses a freeform visual canvas for designing conversations, making it excellent for planning and prototyping complex chatbot flows
• The platform supports both chat and voice interactions, giving you flexibility across different channels
• Knowledge bases let you upload documents and URLs so your chatbot can answer questions based on your actual content
• AI Response blocks generate dynamic answers using large language models, handling open-ended questions that rule-based flows cannot anticipate
• Condition blocks let you create branching logic that handles different user paths and scenarios
• Always include fallback paths and test every branch of your conversation to ensure a smooth user experience
• The rapid cycle of building, testing, and refining on the canvas is the most effective way to create a polished chatbot