Getting Started with Twilio Studio

Twilio Studio is a flowchart-like environment for building Twilio Programmable Voice and Programmable Messaging workflows. Studio allows you to drag, drop, and connect different widgets to build anything from a simple message confirmation app, to a complicated Phone tree or IVR, all with the flexibility of adding your own code as desired, or using a completely code-free self contained flow with no additional hosting requirements. With Studio, you can create flows for receiving voice calls, receiving text messages, or for sending either via the API. Here's how to get started.

Below is a simple introduction on getting started with Twilio Studio:

Twilio Studio Basics

A Studio flow consists of a Trigger connecting to one or more widgets.

Triggers: New Flows in Twilio Studio always start with a Trigger widget. This widget serves as the entryway to the new flow, and contains 3 leads that can each route differently depending on how the Flow is executed - either via an incoming call, SMS, or an API request. For more details, please see Triggering Flows.

01_Trigger.png

Widgets: To begin building the flow, drag and drop another widget into the flow from the Widget Library on the right. To return to the Widget Library from modifying an existing widget, click the Back icon Icon_01-Back.png.

02_Widgets-B.png

For a full rundown of the available Widgets, please see Widget Library. Here are a number of examples:

  • Send a Text Message: Use the Send Message or Send & Wait For Reply widgets.
  • Collect DTMF keypresses or Voice commands: Use the Gather Input On Call widget.
  • Branch options by user input: Use the Split Based On… widget.
  • Connect a call to another destination: Use the Connect Call To widget.

Configuring Widgets: Once the widget is placed in the flow, click it to open the customization menu on the right. Use the Config tab to modify the widget’s name, and how it behaves. Each widget has different options - enter text for message replies or to read on calls, a phone number for calling out, or requests for DTMF or voice inputs.

03_Config.png

Transitions:Once your widgets are configured, connect the appropriate Trigger execution points to each widget, and then chain additional widgets as needed. Transitions can be created from the Transitions tab on each widget, or by dragging and dropping leads to an execution point.

03c_Transitions.png

  • You can also drag and drop an existing connection away from a widget's execution point to remove the transition.
    04_Connect.png 

Create and Build a Studio Flow

Here's how to begin building a new flow from Console:

  1. Login to your account at www.twilio.com/console.
  2. Click Studio Icon_02-Studio.png from the left-side navigation bar.
    NOTE: If Studio is not visible, you may first need to click All Products & Services.
  3. Click the + sign icon Icon_03-New.png to create a new flow.

Now you're ready to begin building your flow. We have a number of templates available in Studio, and some additional guides and walkthroughs here:

Save and Publish a Studio Flow

Saving: Studio flows automatically save after every change. That said, a red Save button can be found at the bottom of widget customization menu. Once a flow is saved, you can return later and edit from where you left off, but flows (and any changes) are not usable until they are published.

Publishing: To send a flow to production, users will need to click the Publish button in the upper right corner. Once published, the flow can then be configured to handle incoming phone calls or text messages for Twilio phone numbers that support these products, or API requests.

Handle incoming Voice Calls and SMS Messages with a Studio Flow

Here’s how to add a flow to a phone number:

  1. Login to your account at www.twilio.com/console.
  2. Click Phone Numbers Icon_05-Numbers.png from the left-side navigation bar.
    NOTE: If Phone Numbers is not visible, you may first need to click All Products & Services.
  3. Click the desired phone number.
  4. Add the Studio flow for incoming Voice calls or Text messages:
       
    • Voice  -
      B_06_number.png 
      • ACCEPT INCOMING: Voice Calls
      • CONFIGURE WITH: Webhooks, TwiML Bins, Functions, Studio, or Proxy
      • A CALL COMES IN: Studio Flow
        • Select the desired flow.
    • Messaging -
      B_06_number_B.png 
      • CONFIGURE WITH: Webhooks, TwiML Bins, Functions, Studio, or Proxy
      • A MESSAGE COMES IN: Studio Flow
        • Select the desired flow.
  5. Click Save.

Additional Resources

Have more questions? Submit a request
Powered by Zendesk