Level up your Twilio API skills in TwilioQuest, an educational game for Mac, Windows, and Linux. Download Now

Menu

Expand
Rate this page:

Thanks for rating this page!

We are always striving to improve our documentation quality, and your feedback is valuable to us. How could this documentation serve you better?

Twilio Flex Quickstart: Themes, Conversations, and IVR

In just minutes, you can spin up a Twilio Flex contact center instance hosted by Twilio.

This Quickstart teaches you the Flex basics. We'll show:

  • How agent conversations work with voice calls, SMS, and chat
  • How to change basic aesthetic options like the theme
  • How to set up an IVR with the visual communications builder Twilio Studio

At the end of this guide, you'll have a themed contact center with an IVR which automatically answers common questions before passing calls to your agents.

In this Quickstart, you will learn how to:

  1. Sign up for Twilio and get your first SMS-enabled Twilio phone number
  2. Create a hosted Flex contact center instance
  3. Change basic theme options in Flex
  4. React to phone calls and texts
  5. Route calls to agents based upon skills tags you define

Prefer to get started by watching a video? Check out our collection of Flex video tutorials and demos.

Sounds good – show me how.

Sign up for (or sign in to) Twilio and create a new Flex Project

Before you can work with Flex, you'll need to sign up for a Twilio account or sign into your existing account. When you create a new Flex project, we'll automatically provision a new phone number for you which can accept voice calls and SMS.

  1. Once in the console, in the upper-left hand corner click the menu then choose 'Create New Project':
    New project in the console
  2. Now, click on the 'Flex' tile where it says 'Create Flex Project':
    Flex template for project
  3. Skip adding teammates and wait for Twilio to spin up your instance.
  4. Choose any of the themes (we'll come back to them later).

And there you have it - a cloud-hosted contact center running on Twilio! Let's go through some of the Flex basics now so you'll get familiar with the features.

And note, you can always get back to your instance by visiting https://flex.twilio.com.

This is great! Take me through the basics.

Change the Flex Theme

Flex is incredibly customizable out of the box; you could even say it's flexible!

By default, Twilio provides you with some themes or skins, and when you're advanced, you'll be able to change everything about how Flex looks and works using React. For now, set React aside for this guide – let's take a look at the built-in themes.

Let's get on the same page by setting your contact center theme to 'Simple Light.'

  1. Navigate to the 'Admin' panel, which is the top tile on your sidebar.
    Flex admin button
  2. Orient yourself with the Admin pane. From here you can change your billing plan or upgrade Flex, set up multiple users, find your built-in phone number, and do other administrative tasks. Most importantly for our goal, you can change the UI.
    admin_overview_flex.png

    Click the 'Edit' button under 'Configure Design'.
  3. Choose the 'Simple Light' Theme.
  4. Click the '<- Back' button at the top of the page.

You should now see the new, simpler theme – nifty.

That's a great looking theme, Twilio. What's next?

Flex has three built-in channels: voice, SMS, and chat

While you can take Flex in any direction you choose, we've tried to stock it with enough features out of the box to help you plan your journey!

When you launch your instance, the phone number Twilio assigns to you can accept voice calls and SMS. We also add a basic chat preview. Let's walk through each of the three channels now.

Answer voice calls in Flex

Write down the phone number assigned to your Flex instance. You can find it on the Admin panel.

Start by making a voice call from your cell phone (or, well, any phone) to the instance's phone number, then follow the steps below to answer the call.

Note: On a trial account, you will hear a message from Twilio asking you to interact with your phone in some way to continue. After the voice is done speaking, hit any number on a cell phone or touch-tone phone to continue.

  1. When you hear it ringing, navigate to the Agent Desktop in your Flex Instance, or click the 'stack' button on the left sidebar:
    New incoming session in Flex
  2. Accept the phone call by clicking the green box next to the incoming number – depending on your speed your phone might be playing hold music.
    accept_incoming_phone_call_flex.png
  3. Verify the call went through on your phone (you may need to accept browser access to your speakers and microphone).
  4. Click the red 'Complete' button to hang up the Voice call.
  5. Click the blue 'Complete' button to end Wrap Up time.

Wrap up time comes immediately after a conversation ends. This gives agent time to do assigned tasks after a call, or take notes.

Respond to SMS in Flex

If you haven't yet, note the phone number assigned to your Flex instance. You can find it on the Admin panel.

  1. Send an SMS from your cell phone (or some other SMS-enabled phone) to the provisioned phone number you noted.
  2. Inside Flex navigate back to the Agent Desktop, or click the 'stack' button on the left sidebar:
    New incoming session in Flex
  3. Accept the incoming request by clicking the green checkbox:
    Incoming SMS request in Flex
  4. Send a message back to your phone by typing in the chat interface and sending your well-crafted response:
    sms_session_in_flex.png
  5. Verify you received the message you just sent from Flex on your phone.
  6. Click the red 'Complete' button to finish the SMS session.
  7. Click the blue 'Complete' button to end Wrap Up time.

Wrap up time gives agent time to do assigned tasks after a call, or do other wrap-up activities. Wrap up time will begin as soon as you end any conversation.

Reply to chat requests in Flex

Chat is a native channel inside your Flex instance. However, since it isn't yet integrated with your web site, we've built a small demo for you to feel out how it works. You can find the 'customer side' of chat inside the Admin pane.

  1. Navigate to the Admin panel.
    Flex admin button
  2. Click the 'Launch' button under 'Web Chat' to open up a web chat session.
    Test a web chat session
  3. Pop up a chat modal by clicking the 'Chat With Us' button in the lower left.
  4. Enter a name and anything in the text field.
  5. Back on the Agent Desktop in your Flex Instance, accept the chat request:
    Accept a Flex chat session
  6. Chat using the web the Agent view (notice the read receipts on the agent side):
    Agent view of a chat session in Flex
  7. 'Complete' the session.
  8. Click the 'Complete' button again to end the Wrap-Up.

Wrap up is the stage immediately after an agent conversation. Agents can go through checklists or do other post-conversation tasks.

Reduce agent burden

Now you're familiar with the agent workflow.

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 conversations and requests.

You'll note that dialing your Flex number automatically puts a call into the agent queue currently. That's not ideal. Usually, you'll want to put an Interactive Voice Response (IVR) menu that plays before the call is queued to route calls and provide automated information such as business hours or location. Only callers who can't find the right information would then get dropped into the queue.

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

Let's design an IVR phone tree

Use Twilio Studio to build an IVR phone tree in Flex

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.

Build an IVR visually with Studio

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:

    Studio Voice IVR Flow

  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):
    Default Flex IVR Flow
  4. Find the 'Gather Input on Call' widget on the right toolbar. Click down on it and drag it onto the canvas near the above Trigger. In the dialog that appears, enter your call greeting followed by instructions for your three options:
    Gather &#39;say&#39; input in Studio

    Name the widget 'gather_digits' to make it easier to find on the canvas.
  5. 'Save' the Gather widget.
  6. Next, 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 pulldown menu. Find the 'Digits' variable associated with the Gather widget above and 'Save'.

    Split Based On... digits

  8. Click on your Gather widget again. In the 'If User Pressed Keys' Transition select the Split widget, then 'Save.' You should see the Trigger widget, Gather Widget, and Split widget all connected with the Send Call to Agent widget disconnected.
  9. Click the 'New' button on the canvas in the Split widget:
    split condition matches
  10. Select 'Condition Matches' and enter '1', then 'Save' the transition. You'll see a new transition appear in your split:
    split condition matches
  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 '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:
    business hours widget
  12. Repeat steps 9 through 11 except use '2' in the split and have a new Say/Play widget announce your business's location
  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:
    IVR for Flex Voice
  14. You're ready to go! At the top of the canvas, hit the red 'Publish' button:
    studio_publish_button.png

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

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

If it works, Congratulations! You've now headed off some of the most common questions facing your imaginary agents.

Wow, that's a great IVR! What's next?

Call center themes, conversations, and IVR setup with Twilio Flex and Studio

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, how to change the theme, and how conversations work with Voice, SMS, and Chat out of the box. 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.

Or, hey - open both tabs! We'll be here waiting for you, happy to help. We can't wait to try the contact center you've built - happy trails!

Where to next?

Rate this page:

Need some help?

We all do sometimes; code is hard. Get help now from our support team, or lean on the wisdom of the crowd browsing the Twilio tag on Stack Overflow.