TwiML Redirect Widget

Studio uses Widgets to represent various parts of Twilio's functionality that can then be stitched together in your Studio Flow to build out robust applications that require no coding on your part.

The TwiML Redirect Widget allows you to redirect a call or message to TwiML hosted somewhere other than your Studio Flow and, optionally, return control of the call back to Studio after the TwiML you redirect to is complete.

The URL you redirect to with this Widget must host valid TwiML. TwiML can be hosted and served in many ways, including but not limited to:

• As a static asset served by your own server
• As a Serverless Asset
• In a TwiML Bin (supports mustache templates)
• As the result of calling a Serverless Function

Required configuration for TwiML Redirect

The TwiML Redirect Widget requires only one piece of information to function properly:

Note: Studio does not actually make the HTTP request to this URL. Instead, Studio prints the TwiML, which instructs Twilio Voice or Messaging to make a new request to the URL you specify.

How to pass parameters to a TwiML Redirect URL

If you want to pass parameters to a TwiML Redirect URL from your Studio Flow, you can pass them in a query string as part of your URL.

For example, if you want to pass the Digits variable from the Gather Input on Call Widget, you should enter the following in the URL field for the TwiML Redirect widget:

https://example.com/myfunction?Digits={{widgets.MY_WIDGET_NAME.Digits}}

How to return control to Studio

To return control of the call or message to Studio, you must specify a <Redirect> to your Studio Webhook URL and append ?FlowEvent=return. Studio will inject any additional parameters specified in the return URL to your Studio context. These parameters will then be available in your Studio Flow via Liquid template variables.

Example:

<Response>
  <Say>Returning you back to the Studio Flow.</Say>
  <Redirect>https://webhooks.twilio.com/v1/Accounts/{AccountSid}/Flows/{FlowSid}?FlowEvent=return&amp;foo=bar</Redirect>
</Response>

The URL parameter foo illustrated above will be passed automatically into your Flow and can be referenced via Liquid as {{widgets.your_redirect_widget_name.foo}}.

Optional configuration for TwiML Redirect

The TwiML Redirect Widget accepts a few configuration options that you can use to further customize how Studio redirects to your URL that hosts TwiML, and returning control back to Studio:

TwiML Redirect Transitions

These events trigger transitions from this Widget to another Widget in your Flow. For more information on working with Studio transitions, see this guide.

Regaining control of a Voice call

Please note that your Studio Flow will not be able to regain control of a Voice call that is timed out after passing the call to your TwiML Redirect URL. The only way your Studio Flow can regain control of a Voice call that has been passed to a TwiML URL is if you first append the parameter FlowEvent=return to your URL. This will tell the TwiML that executes to return control back to Studio when execution is complete.

Example: Sending and receiving variables to and from a TwiML document

You may want to send and receive information to and from a TwiML document. This example shows a Studio Flow using the TwiML Redirect Widget to run a TwiML document hosted by Twilio’s TwiML Bins.

The Flow first asks the user to enter their name. When the user responds, the response is captured within the Send & Wait for Reply Widget’s {{widgets.MY_WIDGET_NAME.inbound.Body}} Liquid variable — MY_WIDGET_NAME being name_question in this example. The TwiML Redirect Widget will then retrieve and run the TwiML document located at the provided URL.

The TwiML Redirect Widget is able to pass variables to the document by including them as URL parameters within the URL field. In this example, the variable Name is passed into the TwiML document with the user's response designated as the value.

Separate the URL where the TwiML document is located and the variables to pass in using the "?" character. If you would like to pass in more than one variable, separate each by the "&" character.

The TwiML document at the URL is hosted by Twilio’s TwiML Bins. TwiML Bins support Mustache Templates which allow you to reference variables passed in as URL parameters. Name was passed in as a variable in this example and can be referenced as {{Name}}. Learn more about Mustache Templates. It will send a message to the user with the Name variable that was passed in. It will then redirect back to the Studio Flow using the webhook of the Flow, found by clicking on the Trigger Widget under the WEBHOOK URL field, along with the variable FlowEvent set to a value of “return”. It also sends back a variable called test that has a value set to “success”.

<Response>
    <Message>
      Hello {{Name}}! Sent from a TwiML document.
  	</Message>
  	<Redirect>
https://webhooks.twilio.com/v1/Accounts/AC8a124fa47560fc6bbd3f182474e5fd28/Flows/FWdd7ddbc880eca07b3f519bef81d4df8f?FlowEvent=return&amp;test=success
  	</Redirect>
</Response>

Access any variables sent from a TwiML document using {{widgets.MY_WIDGET_NAME.VARIABLE_NAME}}, where MY_WIDGET_NAME refers to the TwiML Redirect Widget’s name and VARIABLE_NAME refers to the variable sent from the TwiML document. In this example, the {{widgets.twiml_service.test}} Liquid variable holds the value of the variable test sent by the document.

Learn more

Want to learn more about how you can use TwiML Redirects to customize your Studio Flow? Check out these guides:

• Learn how to write TwiML for handling Voice calls
• Learn how to write TwiML for handling messages
• Learn how to use a TwiML Bin to host serverless TwiML that your Studio Flow can use
• Learn how to use Twilio Functions to enhance Studio Voice calls with custom TwiML

We can't wait to see what you build!