Build an IVR for Flex with Twilio Studio

When conversations are routed to agents, agents can accept the conversation from their dashboards. When finished, agents enter wrap-up time. When that is finished, they're put back into the queue for more incoming tasks.

You'll note that dialing your Flex number automatically puts a call into the agent queue currently. That's not ideal in a real contact center. Usually, you'll want to add an IVR menu that plays before the call is queued and provides automated information such as business hours or location. Only callers who can't resolve their issue would then get dropped into the queue.

Next, we'll set up a small IVR to reduce the calls to our imaginary agents.

Let's put together a phone tree using a Twilio Studio integration. We'll use this IVR to report business location and hours automatically. If a caller asks for anything else, we'll put them into the agent queue.

There are quite a few steps to building the IVR, but most of them are drag and drop.

1. Navigate to the Studio section of the Twilio Console.

2. Click on the Voice IVR Flow to get started:

   Expand image

3. Twilio already added a Trigger event on Incoming Calls. As the IVR sits now, an Incoming Call will be routed directly to an Agent (that is, the behavior hasn't changed from before):

   Expand image

4. Find the Gather Input on Call widget on the right toolbar. Click down on it and drag it onto the canvas near Trigger. Click on the widget to bring up the Config tab. Enter your call greeting followed by instructions for your three options:

   Expand image

   
   Name the widget gather_digits to make it easier to find on the canvas.

5. Click Save to save the Gather widget.

6. Click Back to go back to the Widget Library. Find the Split Based On... widget in the right toolbar. Drag one below the Gather widget from the last step.

7. In "Variable to Test", click to spawn a dropdown menu. Find the "Digits" variable associated with the Gather widget above and click Save.

   Expand image

8. Click on your Gather widget again. In the "If User Pressed Keys" Transition select the Split widget, then click Save. You should see the Trigger widget, Gather widget, and the Split widget all connected with the Send Call to Agent widget disconnected.

9. Click New on the canvas in the Split widget:

   Expand image

10. Select "Condition Matches" and enter 1, then click Save to save the transition. You'll see a new transition appear on your split:

    Expand image

11. Drag a Say/Play widget onto the canvas below the Split widget. Enter a message in "Text to Say" which lists your business hours then click Save. Using your mouse, click the Split widget transition for 1 and drag the line to the upper left bubble of your new Say/Play widget:

    Expand image

12. Repeat steps 9 through 11 except use 2 in the split and have a new Say/Play widget announce the location for your business.

13. From "No Condition Matches" in the Split widget, click and drag a transition to the upper left-hand bubble in the Send Call to Agent widget.
    Optional: Clean up by dragging transitions and widgets around the canvas.
    Your canvas should now look something like this:

    Expand image

14. You're ready to go! At the top of the canvas, click Publish.

    Expand image

Now it's the moment of truth: Call your Flex number and verify that your IVR works. You should be able to query for business hours or location. Otherwise, your call will go into the agent queue.

If one of the transitions doesn't work, carefully follow the steps again. Be mindful of widget type, transitions, and triggers.

If it works, congratulations! You've now automatically handled some of the most common questions facing your agents.

You've explored some of the basic and intermediate features in Flex. You learned how to set up a new Flex Instance hosted with Twilio and tested the default Voice, SMS, and Chat experiences for Flex. Further, you used Twilio Studio to design an IVR phone tree visually, with automated responses to prompts for location and hours. Not a bad setup in a short amount of time!

Twilio Flex is infinitely customizable, and where you go next depends on how you want to scale your contact center. For some, the next step is to learn how to set up multiple call queues: manage multiple users and agents, assign skills to agents, and manage conversation routing with TaskRouter. For others, the next step is to learn how to customize Flex from head to toe using React. For those who want to understand the fundamentals of Studio, the next resource is Build an IVR with Twilio Studio.

We can't wait to try the contact center you've built - happy trails!