Designing

How to design your assistant on Voiceflow.

Logic Steps

An overview of the Steps used to build logic and conditional flows into your assistant's design.

Overview

Just like in any digital experience, to create personalized, high-fidelity or engaging custom conversational designs, it is crucial to be able to and leverage Logic, Variables and Conditions and associated functionalities. 

Tip: If you have a grasp on these terms, you can skip to the specific sections of this doc which cover Voiceflow Logic Steps. If you're new to these terms and/or programming logic, please continue on.

Variables

Variables can be contextualized as container(s) that allows them to have data/information stored inside of it, and to be able to be used elsewhere or recalled at a later time. In Voiceflow, the importance of variables can be seen in this simple exercise.

Ex. Let's say you want to personalize your conversational assistant by the user's name. The below screenshot outlines one introductory method in order to do so:

Note that the above example is not entirely scaleable, and it would not be feasible to remember every user's name manually. Furthermore, the above example would only work if your user's name was actually Joe, and this would not be dynamic (or personalized).

Tip: For information you expect to get filled or can vary and there is a need to be contained, you will want to use variables

Here is the above example improved, with variables:

For educational purposes, you can quickly test & simulate and see this variables in-action!

Note: The below method replicates a use case of what the Set Step accomplishes, but the changes/variable declarations are only test-specific and unique for that specific design-test session and not in your project.

To do this, start with testing your experience by hitting the blue Run (shortcut R) button:

  • Navigate to Variables menu
  • Set the value of your desired variable by inputting in the desired field in the Variables menu.
  • You can then Run Test:

Creating Variables

Tip: You can use the curly braces { } to create new variables, but also scroll through and invoke and add pre-existing or previously defined/created variables in your project

You can create variables in your project in multiple different ways:

  • In any Response Step type, start typing in the input field with the left (curly) brace '{' and hit Create
  • In the Condition Step, in any of the If (Add a condition) fields with the same method above
  • In the API Step, in any of the input fields with the same method above
  • In the NLU Model (M) Manager (or Modal Manager or Interaction Model Manager), under the Variables tab, enter the name of the Variable and hit Enter ↩

With any of the methods to create variables above, you can create variables explicitly (or plan for future use of variables) through the Interaction Model Manager, or on-the-fly and as needed with opening curly braces.

Tip: Variables are broken down as pieces (containers) of logic dedicated towards programming and conversation design, so therefore the variables must be lower-cased and contain no-spaces.

The next sections cover some of the options and steps available in Voiceflow in order to manipulate/alter, perform functions/expressions and end-to-end commands with Variables.

Set Step

Often times in your conversation, you will want to alter variable values if a user reaches a certain point in your conversation or performs a certain action. Sometimes, you will want to reset values or alter them based on circumstance.

In Voiceflow, these specific instances where you want to 'forcefully' (manually) change or set a value of variable(s) in your conversation, requires usage of the Set Step. The Set Step allows you to set and change the value of variables.

Setting and Changing Variable Values

The Set step lets you change the value of a variable when the Set Step is activated. You can get started by dragging the Set step, from the Logic section in your sidebar. Don’t forget to assign a label to your set.

Tip: By leveraging Add Set in the Set Step menu, you can add and also change multiple variable values at once and the changes will take place from top-to-bottom.

Next, you will want to choose a variable in the Apply To input.

You can now set the value, variable or expression you want to your variable in the previous step, by entering it into the Value Type section you want the variable to adopt.

Note: You can also set your variable to a specific text-value (String-value) but you will be unable to perform expressions or equations, as indicated in the next sections.

Adding and Subtracting

A common way to change a variable value is to increment it. To increment a variable means to increase it by the same amount at each change.

Ex. A conversation designer may increment a scoring variable by +2 each time a basketball goal is made. Decreasing a variable in this way is known as decrementing the variable value. A conversation designer may decrement a point total by –1 each time a user responds to a question incorrectly.

In the Set Step menu, you can also toggle to configure the Value Type to be a Variable or Expression. You can use the Expression field to increment or decrement variable values using the Set step.

To do this, select the variable you want to increment and then create the equation you want the variable to be equal to.

Ex. To increment a variable value by 5, select the variable you want to increment and set the equation to {variable} = {variable} + 5

Complex Equations

The Expression field also unlocks the possibility to perform a complex equations, which allows you to write JavaScript statements.

Tip: You can track how your variables are interacting in your conversation (and changing based on Set Steps) by turning on Debug Mode (Settings after you hit Run) while attempting to test your conversation on-Canvas

Condition Step

As conversation designers, we are in control of every action, intent and function our conversation carries out. We can add another element to our conversations/assistants that will alter the conversation's path: Conditions.

Similar to programming, conditions are basic “if, then” logic functions/paths that modify how our conversations are executed. Conditions are a key part of the flow/path-selection or following process for your conversations.

Ex. Conditions are part of our everyday lives. As people, we can think about situations and make decisions based on what we observe or know to be true. For example, “If it is raining out, then we will have recess inside.” Or “If it is my birthday, then I can have a birthday cake.” Conditions are cause and effect: “If this, then that.”

Conditions allow us to control what the conversation does and perform different actions based on these “if, then” logic statements. Since conversations are interfaces that can’t do anything without the designer and/or user directing them, we direct the conversation using the Condition Step. This tells the conversation what to do and the flow/path to do it.

The Condition Step allows you to send the user down different conversation paths depending on the value of variable and associated conditions. Conditions are checked from top-to-bottom.

Adding conditional paths

The Condition Step can have multiple condition paths. To create a path, click on Add Condition. You can choose to assign a label to your Condition(s).

Note: Similar to the Set Step, each condition has a label that you can use to provide a plain-language description of the condition that will be displayed on the project canvas. If you do not provide a label, the actual condition statement will appear on the canvas instead.

Building a Condition

The Condition Step provides you the flexibility to check/evaluate multiple pieces of logic or functions. Your condition can be an evaluation of four items:

  • Variable - you will define a variable from your project (ie. Set or Input), and the set value will be evaluated
  • Value - this is a static, plain text value you can define
  • Logic Group - this is a collection of conditions using and/or statements
  • Expression - this is a Javascript expression. For the condition to work, it must be a valid JavaScript statement that evaluates to "True"

Evaluating Conditions

Every condition evaluates the value of a variable you select against another value you define. If the variable is equal to the value you defined, the path will activate.

Ex. You can select and compare a variable such as {score} to the value of '5' ; meaning if the {score} variable has been filled and is equal to '5' , the conversation will follow that condition statement's path.
Note: Conditions require exact matches. Condition statements require exact matches when comparing the selected variable and value. This means if you are comparing an {animal} variable and value of "dog", and the user says "Dog" with a capital D and ends up being stored in the {animal} variable, then the condition will not be met as it is not an exact match.

The No Match Path

The No Match condition path within the Condition Step is similar to that of the Choice Step as it is activated when none of the other paths can be activated. You can select what you want to happen when a No Match occurs. Either you can have the project end, or it can follow a path. 

You can configure this by navigating into No Match inside the Condition step and configure the No Match Type to either Path or None.

Editing Path Label displays changes to the label that is shown on the project canvas for this path.

Random Step

If you want to add some variation or unpredictability in your conversation design and want the user to have a unique experience, you may want to consider the Random Step. It's also commonly used for teams doing A/B testing.

The Random step allows you to randomize the conversation paths to be taken at a certain point in your conversation. This allows the user to take a randomized path defined in your conversation.

Creating random paths

Creating and deleting random paths can be done by clicking Add path within the Random step's editor.

Prohibit duplicate random paths

The No duplicates toggle ensures that the user does not go down the same path twice, even if the same Random step is activated multiple times. Once all the options have been hit, the Random step will reset.

Ex. If there are 3 random options, the no duplicates option will not activate the same path twice in a row until all of the options have been taken. Once all the options have been hit, the Random step will reset.

Flow Step

Full dedicated documentation on the Flow (Component) Step is found here.

Exit Step

The exit step will automatically end the conversation and app, without any further messages to the user. It can be thought of as a way to "force-quit" the app if needed.

Using the Exit step is easy as it only needs placement. Once in place, if the Exit step is activated it will automatically end the conversation.

Other docs in this section