Skip to contentSkip to navigationSkip to topbar
Twilio Docs
Rate this page:
On this page

Edit and Deploy an IVR with Twilio Studio to Route Calls to Queues

In the previous section of the Onboarding Guide, you set up the necessary pieces for Skill-based routing. Now that you have Workflows, Task Queues, and Agents who match some of those Queues, you can start building the logic to route your end-users to the appropriate Agent based on their needs. This is the final piece you will build in this onboarding guide.

You will build this solution using Twilio Studio, a visual tool that allows you to build applications using no or little code. Using Studio, you will create a minimal IVR system that will ask an inbound caller to indicate whether they wish to speak to Sales or Support. The IVR will route the caller to the new Workflow you created, which will dispatch the call to the appropriate Queue.

Create a new Flow

create-a-new-flow page anchor

A Flow in Twilio Studio is a logical workflow that you create to build your application. A Flow can handle one or more use cases.

To get started, navigate to Twilio Studio in the Twilio Console.(link takes you to an external page)

You should see that you already have a few Flows created in your account - these are Flows that were automatically created when you started your Flex account. They currently are set up to handle inbound calls and messages to your Flex number and route them to your Flex UI; they are powering the behavior you have already tested by calling and texting your Flex instance.

You will now create a new Flow that has more nuanced logic for routing Tasks based on an end-user's goals.

(information)

Info

For the purposes of this onboarding guide, you do not need to be familiar with all of Studio's mechanics. If you would like to learn how to build Twilio Studio Flows from scratch, check out this Getting Started guide.

Click Create new Flow in the Twilio Studio dashboard in the Console to get started. You can name the Flow anything you want, such as "Sales and Support IVR". Then click Next.

Next, you will be presented with a number of options for getting started with your Flow. Twilio offers several templates for common use cases. In this guide, you will use a JSON template to get started - it will contain all the pieces you need for a minimal IVR, and you will edit a few of the components to make it work for your account.

Select Import from JSON at the bottom of the list of options and then click Next.

You will then see a text editor where you can paste in JSON, which will populate all the required components for the Studio Flow. Delete the two empty curly brackets in that editor and then paste the following JSON code into the editor:


_204
{
_204
"description": "A New Flow",
_204
"states": [
_204
{
_204
"name": "Trigger",
_204
"type": "trigger",
_204
"transitions": [
_204
{
_204
"event": "incomingMessage"
_204
},
_204
{
_204
"next": "Greeting",
_204
"event": "incomingCall"
_204
},
_204
{
_204
"event": "incomingConversationMessage"
_204
},
_204
{
_204
"event": "incomingRequest"
_204
},
_204
{
_204
"event": "incomingParent"
_204
}
_204
],
_204
"properties": {
_204
"offset": {
_204
"x": 0,
_204
"y": 0
_204
}
_204
}
_204
},
_204
{
_204
"name": "Greeting",
_204
"type": "gather-input-on-call",
_204
"transitions": [
_204
{
_204
"next": "DigitInput",
_204
"event": "keypress"
_204
},
_204
{
_204
"next": "SpeechInput",
_204
"event": "speech"
_204
},
_204
{
_204
"event": "timeout"
_204
}
_204
],
_204
"properties": {
_204
"speech_timeout": "auto",
_204
"offset": {
_204
"x": 70,
_204
"y": 210
_204
},
_204
"loop": 1,
_204
"finish_on_key": "#",
_204
"say": "Hello! Thank you for calling. Press or say one to speak to Sales or two to speak to Support.",
_204
"stop_gather": true,
_204
"gather_language": "en",
_204
"profanity_filter": "true",
_204
"timeout": 5
_204
}
_204
},
_204
{
_204
"name": "DigitInput",
_204
"type": "split-based-on",
_204
"transitions": [
_204
{
_204
"event": "noMatch"
_204
},
_204
{
_204
"next": "SendToSales",
_204
"event": "match",
_204
"conditions": [
_204
{
_204
"friendly_name": "If value equal_to 1",
_204
"arguments": [
_204
"{{widgets.Greeting.Digits}}"
_204
],
_204
"type": "equal_to",
_204
"value": "1"
_204
}
_204
]
_204
},
_204
{
_204
"next": "SendToSupport",
_204
"event": "match",
_204
"conditions": [
_204
{
_204
"friendly_name": "If value equal_to 2",
_204
"arguments": [
_204
"{{widgets.Greeting.Digits}}"
_204
],
_204
"type": "equal_to",
_204
"value": "2"
_204
}
_204
]
_204
}
_204
],
_204
"properties": {
_204
"input": "{{widgets.Greeting.Digits}}",
_204
"offset": {
_204
"x": -220,
_204
"y": 430
_204
}
_204
}
_204
},
_204
{
_204
"name": "SpeechInput",
_204
"type": "split-based-on",
_204
"transitions": [
_204
{
_204
"event": "noMatch"
_204
},
_204
{
_204
"next": "SendToSales",
_204
"event": "match",
_204
"conditions": [
_204
{
_204
"friendly_name": "If value equal_to one",
_204
"arguments": [
_204
"{{widgets.Greeting.SpeechResult}}"
_204
],
_204
"type": "equal_to",
_204
"value": "one"
_204
}
_204
]
_204
},
_204
{
_204
"next": "SendToSupport",
_204
"event": "match",
_204
"conditions": [
_204
{
_204
"friendly_name": "If value equal_to two",
_204
"arguments": [
_204
"{{widgets.Greeting.SpeechResult}}"
_204
],
_204
"type": "equal_to",
_204
"value": "two"
_204
}
_204
]
_204
}
_204
],
_204
"properties": {
_204
"input": "{{widgets.Greeting.SpeechResult}}",
_204
"offset": {
_204
"x": 350,
_204
"y": 470
_204
}
_204
}
_204
},
_204
{
_204
"name": "SendToSales",
_204
"type": "send-to-flex",
_204
"transitions": [
_204
{
_204
"event": "callComplete"
_204
},
_204
{
_204
"event": "failedToEnqueue"
_204
},
_204
{
_204
"event": "callFailure"
_204
}
_204
],
_204
"properties": {
_204
"offset": {
_204
"x": -180,
_204
"y": 860
_204
},
_204
"workflow": "",
_204
"channel": "",
_204
"attributes": "{\"type\": \"inbound\", \"name\": \"{{trigger.call.From}}\", \"task\": {\"skillsNeeded\": \"Sales\"} }"
_204
}
_204
},
_204
{
_204
"name": "SendToSupport",
_204
"type": "send-to-flex",
_204
"transitions": [
_204
{
_204
"event": "callComplete"
_204
},
_204
{
_204
"event": "failedToEnqueue"
_204
},
_204
{
_204
"event": "callFailure"
_204
}
_204
],
_204
"properties": {
_204
"offset": {
_204
"x": 440,
_204
"y": 840
_204
},
_204
"workflow": "",
_204
"channel": "",
_204
"attributes": "{\"type\": \"inbound\", \"name\": \"{{trigger.call.From}}\", \"task\": {\"skillsNeeded\": \"Support\"} }"
_204
}
_204
}
_204
],
_204
"initial_state": "Trigger",
_204
"flags": {
_204
"allow_concurrent_calls": true
_204
}
_204
}

Then, click Next to create this new Flow with the configuration in this JSON file. You will then see your Flow in Studio's visual editor. This visual editor is also called the Flow's Canvas. It should look like this:

View of the Studio IVR Flow that you create after pasting in the JSON configuration."task": {"skillsNeeded": "Sales"} line. This is how your Workflow will evaluate the Task and send it to the appropriate Queue. (Recall that your Send To Sales filter in your Workflow was looking for Tasks that matched "Sales" IN task.skillsNeeded).

Click Save at the bottom of the Widget. The red exclamation mark should now be gone, indicating that the Widget is functional. Next, complete the same steps for the SendToSupport Widget:

  • Click on the SendToSupport Widget to open its Configuration Menu
  • Under Workflow , select Sales and Support Workflow
  • Click Save

You can also verify that the attributes for this Widget include "task": {"skillsNeeded": "Support"} and that the Task will be routed appropriately.

You have now fixed both Widgets. Finally, make sure to click Publish at the top of the screen, so that your changes live.

(warning)

Warning

Any time you make changes to your Studio Flow, you will have to click Publish to make them live. Any changes you make without clicking Publish will be saved but will not be live.

The final step you need to take before you can test this new IVR is to configure your Flex phone number to point to this new Studio flow you created.

Configure your Flex phone number to send calls to this Studio Flow

configure-your-flex-phone-number-to-send-calls-to-this-studio-flow page anchor

Navigate to the Active Numbers section of the Twilio Console(link takes you to an external page) and click on your Flex phone number.

After clicking on the number, you will see its configuration menu where you can connect the number to your Studio Flow.

To configure this number to trigger your Studio Flow from an Incoming Call:

  • Scroll down to the Voice & Fax section
  • Under Configure With , select the dropdown option "Webhook, TwiML Bin, Function, Studio Flow, Proxy Service"
  • Under A Call Comes In , select the dropdown option "Studio Flow"
  • You'll see another dropdown menu appear where you can select the Studio Flow you'd like to connect to when a call comes in to this number
Configure a Studio Flow to connect to a Voice number.Rate this page:

Need some help?

Terms of service
Privacy Policy

Copyright © 2024 Twilio Inc.