|
| 1 | +--- |
| 2 | +title: "How to create a blocks workflow with Vapi" |
| 3 | +sidebarTitle: "Tutorial" |
| 4 | +description: "Example walkthrough of building a Blocks workflow" |
| 5 | +--- |
| 6 | + |
| 7 | +<iframe src='/static/images/blocks/recording_20241018_191621.webm' title="Example walkthrough of creating a block" width='560' height='315' frameborder="0" allowfullscreen allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" |
| 8 | +></iframe> |
| 9 | + |
| 10 | +## Introduction |
| 11 | + |
| 12 | +Vapi is a powerful platform that enables both developers and non-technical users to create conversational workflows seamlessly. By leveraging the **Blocks Workflow** feature, you can design complex conversations with conditional logic, tool integrations, and more. |
| 13 | + |
| 14 | +In this tutorial, we'll guide you through the process of creating a blocks workflow to **book a demo with Quantstruct**. This workflow will include two paths: |
| 15 | + |
| 16 | +- **Scheduling a future time** for the demo. |
| 17 | +- **Qualifying the prospect** before scheduling a demo. |
| 18 | + |
| 19 | +We'll cover key concepts, provide step-by-step instructions, and include visual aids to enhance your understanding. |
| 20 | + |
| 21 | +--- |
| 22 | + |
| 23 | +## Table of Contents |
| 24 | + |
| 25 | +- [Prerequisites](#prerequisites) |
| 26 | +- [Key Concepts](#key-concepts) |
| 27 | +- [Step 1: Access the Vapi Dashboard](#step-1-access-the-vapi-dashboard) |
| 28 | +- [Step 2: Navigate to the Blocks Section](#step-2-navigate-to-the-blocks-section) |
| 29 | +- [Step 3: Create a New Blocks Workflow](#step-3-create-a-new-blocks-workflow) |
| 30 | +- [Step 4: Name Your Workflow](#step-4-name-your-workflow) |
| 31 | +- [Step 5: Configure the Start Block](#step-5-configure-the-start-block) |
| 32 | +- [Step 6: Add Flow Controls](#step-6-add-flow-controls) |
| 33 | +- [Step 7: Add the Schedule Demo Block](#step-7-add-the-schedule-demo-block) |
| 34 | +- [Step 8: Insert Variables](#step-8-insert-variables) |
| 35 | +- [Step 9: Save and Create the Workflow](#step-9-save-and-create-the-workflow) |
| 36 | +- [Conclusion](#conclusion) |
| 37 | + |
| 38 | +--- |
| 39 | + |
| 40 | +## Prerequisites |
| 41 | + |
| 42 | +- An active **Vapi** account. |
| 43 | +- Basic understanding of conversational workflows. |
| 44 | +- Access to the **Quantstruct** demo scheduling process (for context). |
| 45 | + |
| 46 | +--- |
| 47 | + |
| 48 | +## Key Concepts |
| 49 | + |
| 50 | +- **Blocks Workflow**: A visual interface for designing conversational flows using blocks that represent different actions or messages. |
| 51 | +- **Start Block**: The entry point of your workflow where the conversation begins. |
| 52 | +- **Flow Controls**: Elements that allow you to manage the conversation flow based on user responses (e.g., conditions, loops). |
| 53 | +- **Tool Call Block**: A block used to integrate external tools or services, such as scheduling a demo. |
| 54 | +- **Variables**: Placeholders used to personalize messages by inserting dynamic content. |
| 55 | + |
| 56 | +--- |
| 57 | + |
| 58 | +## Step 1: Access the Vapi Dashboard |
| 59 | + |
| 60 | +Log in to your Vapi account to access the dashboard. |
| 61 | + |
| 62 | +--- |
| 63 | + |
| 64 | +## Step 2: Navigate to the Blocks Section |
| 65 | + |
| 66 | +On the left-hand menu, click on **"Blocks"** to view existing workflows or create a new one. |
| 67 | + |
| 68 | + |
| 69 | +--- |
| 70 | + |
| 71 | +## Step 3: Create a New Blocks Workflow |
| 72 | + |
| 73 | +Click on **"New Blocks Workflow"** to start creating a new workflow. |
| 74 | + |
| 75 | + |
| 76 | + |
| 77 | +--- |
| 78 | + |
| 79 | +## Step 4: Name Your Workflow |
| 80 | + |
| 81 | +Provide a descriptive name for your workflow, such as **"Schedule Demo Quantstruct"**. |
| 82 | + |
| 83 | + |
| 84 | + |
| 85 | +Click on **"Create Workflow"** to proceed. |
| 86 | + |
| 87 | + |
| 88 | + |
| 89 | +--- |
| 90 | + |
| 91 | +## Step 5: Configure the Start Block |
| 92 | + |
| 93 | +The **Start Block** is where the conversation begins. |
| 94 | + |
| 95 | +1. Click on the **Start Block** to open the configuration panel. |
| 96 | + |
| 97 | +  |
| 98 | + |
| 99 | +2. In the **Text Area**, replace the default message with a greeting and an opening question: |
| 100 | + |
| 101 | + ``` |
| 102 | + Hello! Are you interested in scheduling a demo with Quantstruct? |
| 103 | + ``` |
| 104 | + |
| 105 | +  |
| 106 | + |
| 107 | +3. Click **"Save"** to save the changes to the Start Block. |
| 108 | + |
| 109 | +  |
| 110 | + |
| 111 | +--- |
| 112 | + |
| 113 | +## Step 6: Add Flow Controls |
| 114 | + |
| 115 | +Flow controls allow the conversation to branch based on user input. |
| 116 | + |
| 117 | +1. Click on the **"Flow Controls"** button in the toolbar. |
| 118 | + |
| 119 | +  |
| 120 | + |
| 121 | +2. Select the appropriate flow control (e.g., **"Condition"**) and drag it onto the canvas. |
| 122 | + |
| 123 | +3. Configure the condition to check the user's response (e.g., if the user says "Yes"). |
| 124 | + |
| 125 | +4. Repeat the process to handle different responses as needed. |
| 126 | + |
| 127 | +  |
| 128 | + |
| 129 | +--- |
| 130 | + |
| 131 | +## Step 7: Add the Schedule Demo Block |
| 132 | + |
| 133 | +Add a **Tool Call Block** that will handle the demo scheduling. |
| 134 | + |
| 135 | +1. Click on the **"Blocks"** button and select **"Tool Call Block"**. |
| 136 | + |
| 137 | +2. Drag the **Tool Call Block** onto the canvas and connect it to the appropriate flow control branch. |
| 138 | + |
| 139 | +3. Click on the **Tool Call Block** to configure it. |
| 140 | + |
| 141 | +  |
| 142 | + |
| 143 | +4. In the configuration panel, enter the prompt: |
| 144 | + |
| 145 | + ``` |
| 146 | + Great! Let's schedule your demo. When is a good time for you? |
| 147 | + ``` |
| 148 | + |
| 149 | +  |
| 150 | + |
| 151 | +5. Click **"Save"** to save the configuration. |
| 152 | + |
| 153 | +  |
| 154 | + |
| 155 | +--- |
| 156 | + |
| 157 | +## Step 8: Insert Variables |
| 158 | + |
| 159 | +Variables personalize the conversation by using dynamic content. |
| 160 | + |
| 161 | +1. In the message text area, click on the **"Insert Variable"** button. |
| 162 | + |
| 163 | +2. Select **"DateTime"** or the appropriate scheduling variable. |
| 164 | + |
| 165 | +  |
| 166 | + |
| 167 | +3. The variable placeholder will appear in your message, like `{{schedule_time}}`. |
| 168 | + |
| 169 | +  |
| 170 | + |
| 171 | +4. Click **"Save"** to apply the changes. |
| 172 | + |
| 173 | +--- |
| 174 | + |
| 175 | +## Step 9: Save and Create the Workflow |
| 176 | + |
| 177 | +1. After configuring all blocks and flow controls, ensure all connections are properly linked. |
| 178 | + |
| 179 | +2. Click on **"Save"** in the top-right corner to save the workflow. |
| 180 | + |
| 181 | +  |
| 182 | + |
| 183 | +3. Click on **"Create Workflow"** to finalize. |
| 184 | + |
| 185 | +  |
| 186 | + |
| 187 | +4. Your workflow is now created and ready to be tested. |
| 188 | + |
| 189 | +  |
| 190 | + |
| 191 | +--- |
| 192 | + |
| 193 | +## Conclusion |
| 194 | + |
| 195 | +You've successfully created a **Blocks Workflow** on the Vapi platform to schedule demos with Quantstruct. This workflow: |
| 196 | + |
| 197 | +- Greets the user and inquires about their interest. |
| 198 | +- Uses flow controls to handle different responses. |
| 199 | +- Integrates a tool to schedule demos. |
| 200 | +- Personalizes messages with variables. |
| 201 | + |
| 202 | +Feel free to expand on this workflow by adding more steps, integrating additional tools, or refining the conversation logic. |
| 203 | + |
| 204 | +--- |
| 205 | + |
| 206 | +## Additional Resources |
| 207 | + |
| 208 | +- **Vapi Documentation**: [Visit the official docs](https://vapi.example.com/docs) for more in-depth information. |
| 209 | +- **Support**: For assistance, contact [support@vapi.example.com](mailto:support@vapi.example.com). |
| 210 | + |
| 211 | +--- |
| 212 | + |
| 213 | +**Note**: While this guide focuses on creating workflows using the Vapi platform's visual interface, Vapi also offers an API for programmatic workflow creation and management. Refer to the official Vapi API documentation for details on how to leverage the API in your development projects. |
0 commit comments