Designing

How to design your assistant on Voiceflow.

Adding Steps and Paths

An overview on the basics of designing on Voiceflow.

Introduction

Designing on Voiceflow starts at the Step-level, which includes adding, editing and connecting steps/blocks on the Canvas and creating paths in your assistant/conversation. Steps are your toolkit to build powerful assistants on Voiceflow.

Steps (located in the floating banner by the Project Canvas navigation sidebar) represent different pieces of functionality in order to build your conversational experience. Steps are categorized under: Talk, Listen, Logic, Event and Developer.

Tip: By default you will visually see Talk, Listen and Logic appear in this sidebar, but you can hover over this sidebar and click the down arrowhead symbol (⌄) to have Event and Developer also appear.

When starting a project, you will notice that the starting Chip or Home chip appears by default. This is where your conversation will always start from. This step cannot be deleted, but you can rename and change its color to suit your design workflow & organizational needs.

Adding Steps to the Canvas

To add Steps to the Canvas, drag and drop Steps (blocks) out from the Canvas sidebar and drop them on the Canvas.

Once you've added your first step, you can also connect your Home chip from its end port/node. Skip to learn this here.

Tip: Add Steps quickly by search (press ⬆️ Shift + Space ).

Dropping a Step on its own to the Canvas will create a Block, or you can drop the Step directly into an existing Block, to nest them together.

Removing Steps

To remove Steps, you can select the Step with the right-click menu and choose the delete option. You can select blocks (with multiple nested steps) or individual nested steps, and alter, edit, delete & remove accordingly.

Alternatively you can select the Step (click on the step/block) and hit Delete, or delete the Step from within the Editor. As with the Steps, you can select the Block with the right-click menu and choose the delete option.

Content editor

Every Step's content can be edited by clicking on it which will open the Editor on the right-hand side of the screen.

You can also jump to edit another Step's contents simply by clicking on it similar to the process above, which will open the editor for that respective block/step's contents.

To close the editor, click away at any blank space away from the Editor back on the Canvas.

Add Paths

To add a conversation path (line) between two Steps, click on the port/node on the right side of the Step you want to extend the path from. Then, drag and drop the path to the Step you would like to connect to.

Connecting a path to a Block will cause the conversation to run sequentially through all the Steps within that Block.

Tip: You can also connect a path directly to a Step within the Block which will cause the conversation to jump directly to that Step within the overall Block, and then continue sequentially.

As you are building advanced conversations, note that some paths cannot be created/connected because the Step you are attempting to connect does not allow for a Path input.

An example of the above point is the Intent Step, which does not allow for paths to be connected to it, only from it.

This means if you have an Intent Step as the first step within a block, then you cannot connect a path to that Block (only the Steps within it) because the first step in the block, the Intent Step, does not allow for paths to be connected to it.

Adding Steps from Paths

Another way to add steps to your canvas is from paths - this is a great option when you're in the middle of designing. To access the step menu, give your mouse an extra click as you’re drawing your line. Choose the Step you want to drop, and voila!

Note: You can't add Intent steps from this menu as they act as conversation triggers

Block Templates

If you plan to use the same sequence of steps at multiple points in your project, you may want to create a Block Template. This lets you save single or multiple blocks (and its nested contents) as a Template that can be re-used at different points in your design.

Creating a Template

On canvas, select the blocks you want to save as a template. In the header, hit the 'Save to Library' option.
Once you've created your template, you'll see it listed in the Library section of the step menu.

Using a Template

To use an existing template, simply drop your option onto canvas from the Library. Once you've dropped your template, you can customize its content.

Note: You can also access the Template Library from the Path Step Menu!

Home Block

The Home block is the entry point of your Assistant experience. It defines the very beginning of your Assistant’s design and can be found in your Home Topic. You can customize the name of your Home block in its content editor.

Note: Alexa projects have Stop, Cancel and Help commands added by default. These are mandated functions for Alexa projects.

Commands

Nested in the Home block are Commands. Commands act as a 'go to and return' function that let you create non-linear conversations. They let your users interrupt a conversation path and temporarily bounce to a Component flow. Once they’ve completed the flow, they’ll be returned to their spot in the original path. Essentially, Commands let your users quickly switch context mid-conversation without the frustration of repeating themselves to get back to their original spot. 

Adding Commands

Add Commands in your Home editor's Command section.

You'll need to define 2 aspects for the Command:

Intent - Attaches an intent to the Command, making it triggerable at any point in the conversation

Component - Indicated the Component path that is activated when the above intent is triggered

Once you've configured your Commands, they'll be visible in the Home block's content editor

Deleting Commands

To delete existing Commands, hit the - icon

Other docs in this section