Getting Started with Twilio Studio

Twilio Studio is a flowchart-like environment for building Twilio Programmable Voice and Programmable Messaging workflows - all without any additional coding or hosting requirements. 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. 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. For complete documentation, including glossaries, libraries, and other references, please refer to the full Twilio Studio: Getting Started documentation.

Create a new Twilio Studio Flow

  1. Login to your account at www.twilio.com.
  2. From the left side navigation bar, click Studio Icon_02-Studio.png.
  3. Click the + sign icon Icon_03-New.png to create a new flow.

Build a Twilio Studio Flow

New Flows in Twilio Studio always start with a Trigger widget. This widget serves as the entryway to the new flow, and can route differently depending on how the Flow is accessed - either via an incoming call, SMS, or an API request.
01_Trigger.png 

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 

A number of different widgets exist to help accomplish any goal with the flow. Here are some 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.

Once the widget is placed in the flow, click it to open the customization menu on the right.
03_Widget-placed.png 

  • Config: Use this 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: Use this tab to select where each of the leads connect by selecting the desired widget from each lead’s drop-down menu.
    03c_Transitions.png 
       
    Alternatively, you can drag and drop from each lead to the desired connecting widget’s entry point. The opposite works, as well; drag and drop an existing connection from a widget's entry point to remove the transition.
    04_Connect.png 

Saving and Publishing a Flow

Studio flows automatically save after every change. That said, a red Save button can be found at the bottom of widget customization menu. In addition to saving changes, Studio Plus users will need to click the Publish button in the upper right corner to send new flow changes to production. Once published the flow can then be configured to handle incoming phone calls or text messages for Twilio phone numbers that support these products. See the Production versus Draft section for more details.

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

  1. Login to your account at www.twilio.com.
  2. Click Phone Numbers Icon_05-Numbers.png.
  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.

Change or Update an existing flow

To make changes to an existing Studio flow, access the flow from Console:

  1. Login to your account at www.twilio.com.
  2. From the left side navigation bar, click Studio Icon_02-Studio.png.
  3. Click the desired flow’s name to view it.

Now that the flow is open, modify it as needed -

  • Drag and drop a widget to rearrange the flow.
  • Drag and drop connections from the entry point to change or remove existing widget transitions.
  • Click the X icon Icon_04-Delete.png to delete a widget.
  • Edit the widget’s customization menu to change the behavior.

Once the flow is ready, click Save. Studio Plus customers, click Publish to push the changes to production.

Production versus Draft (Studio Plus only)

The basic version of Studio automatically saves and publishes any valid flow changes. Studio Plus allows Production and Draft version of flows. To check a flow’s production status, look at the red Publish button in the upper right of the screen -

  • If the button says Published and is grayed out, then this is the production version.
    05_Publish-B.png 
  • If the button says Publish and is red, this is a draft. Hover over the Publish button for a link to the production version of the flow.
    05_Publish-A.png 

Testing draft mode flow changes (Studio Plus only)

When making changes to a flow, clicking the Save button will introduce these changes into Draft mode. Draft flows can be tested - without making any changes in production - by whitelisting specific phone numbers for testing. Here’s how to add test numbers:

  1. From the flow, click the Trigger widget.
    06_Trigger.png 
  2. From the Config tab, add the desired testing phone numbers to the TEST USERS field. Multiple phone numbers can be added if separated by commas.
    07_testNumbers.png 
  3. Click Save.

Any phone number from the TEST USERS field that calls in to a Twilio line configured to use this flow will now be directed to the draft version.

Have more questions? Submit a request
Powered by Zendesk