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:
- Sign up for Twilio and get your first SMS-enabled Twilio phone number
- Create a hosted Flex contact center instance
- Change basic theme options in Flex
- React to phone calls and texts
- 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.
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.
- Once in the console, in the upper-left hand corner click the menu then choose 'Create New Project':
- Now, click on the 'Flex' tile where it says 'Create Flex Project':
- Skip adding teammates and wait for Twilio to spin up your instance.
- 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.
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.'
- Navigate to the 'Admin' panel, which is the top tile on your sidebar.
- 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.
Click the 'Edit' button under 'Configure Design'.
- Choose the 'Simple Light' Theme.
- Click the '<- Back' button at the top of the page.
You should now see the new, simpler theme – nifty.
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.
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.
- When you hear it ringing, navigate to the Agent Desktop in your Flex Instance, or click the 'stack' button on the left sidebar:
- 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.
- Verify the call went through on your phone (you may need to accept browser access to your speakers and microphone).
- Click the red 'Complete' button to hang up the Voice call.
- 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.
If you haven't yet, note the phone number assigned to your Flex instance. You can find it on the Admin panel.
- Send an SMS from your cell phone (or some other SMS-enabled phone) to the provisioned phone number you noted.
- Inside Flex navigate back to the Agent Desktop, or click the 'stack' button on the left sidebar:
- Accept the incoming request by clicking the green checkbox:
- Send a message back to your phone by typing in the chat interface and sending your well-crafted response:
- Verify you received the message you just sent from Flex on your phone.
- Click the red 'Complete' button to finish the SMS session.
- 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.
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.
- Navigate to the Admin panel.
- Click the 'Launch' button under 'Web Chat' to open up a web chat session.
- Pop up a chat modal by clicking the 'Chat With Us' button in the lower left.
- Enter a name and anything in the text field.
- Back on the Agent Desktop in your Flex Instance, accept the chat request:
- Chat using the web the Agent view (notice the read receipts on the agent side):
- 'Complete' the session.
- 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.
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 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.
- Navigate to the Studio section of the Twilio Console.
- Click on the 'Voice IVR' Flow to get started:
- 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):
- 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:
Name the widget 'gather_digits' to make it easier to find on the canvas.
- 'Save' the Gather widget.
- Next, find the Split Based On... widget in the right toolbar. Drag one below the Gather widget from the last step.
- In 'Variable to test,' click to spawn a pulldown menu. Find the 'Digits' variable associated with the Gather widget above and 'Save'.
- 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.
- Click the 'New' button on the canvas in the Split widget:
- Select 'Condition Matches' and enter '1', then 'Save' the transition. You'll see a new transition appear in your split:
- 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:
- Repeat steps 9 through 11 except use '2' in the split and have a new Say/Play widget announce your business's location
- 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:
- You're ready to go! At the top of the canvas, hit the red 'Publish' button:
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.
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!