Twilio Studio is a visual tool that you can use to build communications applications with little or no code. This guide will walk through the information you need and the mechanics you'll use to start building with Studio. Once you feel comfortable with these mechanics, you'll be ready to start building out more complex flows that combine multiple Widgets and Transitions.
Here are some of the key Studio terms that will help you as you get started:
Term | Definition | Example |
---|---|---|
Flow | Flows are individual workflows that you create. They can handle one or more use cases. | You can create a Flow to handle inbound Voice calls by playing a prerecorded message. |
Widget | Widgets are individual items that can be dragged onto the Flow canvas. They represent pieces of logic, and can connect to each other via Transitions. | You can use the Send Message Widget to send an outbound SMS to a user in your Flow. |
Transition | Transitions define how a Flow advances from one Widget to the next based on specific conditions. | After you place an outbound call with the Outgoing Call Widget, you could create a Transition to the Say/Play Widget to play a message to the connected caller. |
Step | A Step is the runtime processing of a Widget, starting when that Widget is entered. Variables get set at the end of a Step. | If you're prompting a user for a text input, when they receive the inbound SMS prompt, they are actively in a Step until they exit the Widget (send a response or timeout). If the prompt is intended to set a variable, this happens at the end of the Step. |
Execution | An Execution represents a specific person's progress through a Flow. An Execution is active while the user is in the Flow, and it is considered ended when they stop or are kicked out of the Flow. | When you call the Twilio number connected to a Flow, an Execution is created to represent your call to that number and your path through the Flow. The owner of the Flow can see this Execution, as well as the Executions of other users who run through the Flow. |
The first step to use Studio is to create a Flow, which will represent the workflow that you want to build for your project.
To create a new Flow:
Click Create new Flow. Note that if you have already created a Flow before, you will see a view similar to the one below. Click the + icon underneath the Flows heading to create a new Flow.
{{
. Then, you will see a list of possible values to use as a variable. You can scroll down in the list until you find the variable you want to insert, or you can type the name of the variable you want.Below is a video demonstrating adding two variables into a Studio Flow. One is a variable containing Trigger data (which phone number sent the incoming message to start the Flow), and the second variable contains Widget data (what the user replied to the Send & Wait for Reply Widget).
You can also build additional logic into Widgets using Liquid, such as if/else statements and for loops. The example below uses Liquid to check if a Flow contains a variable for the contact's first name (which could have been set earlier in the Flow) before trying to reference it. It then greets them with "Hello" and the contact's first name, if the first name is in the Flow's data. If it is not, it just says "Hello friend".
_10{% if flow.data.first_name %}_10Hello {{flow.data.first_name}}_10{% else %}_10Hello friend_10{% endif %}
Liquid is a powerful templating language. You can see the full list of tags and actions in the Liquid Template Language documentation.
Variable names will only show dropdown options/autocomplete when you are writing output tags ({{...}}
). Variable names will not autocomplete inside logic tags ({% ... %}
).
Liquid template variables can render up to 16KB strings max.
For more details on debugging your Flow, view the Studio troubleshooting guide.
Twilio Studio provides logs for each Studio Flow Execution. The logs contain helpful information about the Steps that a Flow runs and can provide information for debugging Flows that are not functioning as you intended.
You can see the Logs for a Studio Flow by clicking on "Logs" next to the Flow in the Console.
Once you feel comfortable navigating a Studio Flow and Studio Canvas, you're ready to start building! Here are some resources to help you as you build your project:
Tutorials
We can't wait to see what you build.