By
The beautiful thing about Twilio Flex, Twilio's cloud contact center, is that it is genuinely fully programmable. You don't need to wait for the vendor to deliver the feature, you can build it!
Flex, by default, does not provide out-of-the-box functionality for running on mobile. But, because Flex is an umbrella that uses many products of Twilio – Taskrouter, Conversations, and Studio, to name a few – all the APIs and SDKs are accessible for you to evolve Flex in a way that fits your business needs!
This blog post shows a proof of concept that embraces the builder spirit, giving Agents the autonomy to get away from the computer while still being able to handle chats and calls on their mobile phones. I'll be showing Flex Mobile, a React Native application that integrates seamlessly with Flex and its ecosystem – including Flex Insights, our reporting tool.
Let's get started!
Features
| One-time password: Simplify authentication on Flex Mobile with built-in one-time password capabilities. |  |
| Long-lived Token: Special long-lived tokens save on Agents' mobile phones to avoid having them authenticate on Flex every time they need to open the app. Agents can manually authenticate on Flex once (with Twilio Verify). From that moment on, the long-lived token allows Agents to open the Flex Mobile app already authenticated for 7 days. |  |
| Available on Mobile: This toggle changes the Agent's activity to "Available on Mobile." This is an essential feature because it tells the back-end if this Agent should receive Push Notifications and if the calls should be routed to the Agent's cellphone or Flex Desktop. For the Supervisors, it is also good for creating custom reporting on Flex Insights to view, for example, how many agents received chats or calls on their mobile. You, as a Supervisor of your contact center, might want to break the reports of "Average Handle Time" into Agents who are on Mobile and those on Desktop. This toggle handles all that behind the scenes. |  |
| Push Notification: Agents can receive notifications every time a task or a new message comes in – they don't need to keep the App open on their mobile phone. |  |
| Accept Task: On mobile, you have the option to accept or decline an incoming Task |  |
| Conversation: Agents can handle chats with their customers in an asynchronous, long-term way. |  |
| Customer Info: A component that reads customer data (from task attributes), allowing you to enrich a Chat with the customer's data in a straightforward way. |  |
| Inbound Call: Once Agents are Available on their mobile phones, inbound calls from customers will be routed to their cellphone via the PSTN. On Flex Desktop, you won't pay for receiving this call because Flex Desktop uses WebRTC, but on Flex Mobile, as we are calling via the telephony system (PSTN), this extra call leg will be charged. Although this is not ideal compared to Flex on Desktop, the Agent's UX is smoother than opening the Flex Mobile app and having to wait for Flex to authenticate, to only then pick up the call. Routing over the PSTN is an acceptable tradeoff for many call centers. Alternatively, a 3rd-party SIP client App can be used here to avoid this extra cost. |  |
| Outbound Call: Agents can call the customer (via the PSTN, using their own cellphone) with one click. Alternatively, a 3rd-party SIP client App can be used here as well. |  |
| Unread Badge: A badge to show the number of unread messages in each customer conversation. |  |
| Complete Chats: This icon completes a task on TaskRouter. It is useful for Agents who have finished a conversation with that specific customer, keeping the Agent's list of Chats clean. |  |
Who should use Flex Mobile?
- Use-cases: Flex Mobile could be useful for companies that have agents that work away from the computer at some point during the day.
- Team: This project is best suitable for companies who have React developers. This should be okay for most companies who use Flex, as companies use Flex Plugins to enhance Flex functionality and these Plugins are built with React.
If you don't have a team of React developers, you get in contact with one of our excellent Twilio Partners to support you on this journey.
Is Flex Mobile ready for production?
Flex Mobile is a proof-of-concept, and you will need developers or a Twilio Partner to evolve and maintain the capability.
It is a great starting point, especially for quickly onboarding your developers into APIs and the orchestration of Flex.
Prerequisites
Like the idea of Flex Mobile? Before continuing, you'll need to create a few accounts and review some requirements and pricing. Please walk through all the steps below:
- Flex Instance: you need a Twilio account with a Flex Instance
- Flex UI 2.0: make sure you have Flex instance with UI 2.0 enabled
- Flex Conversations: make sure you have Flex Conversations enabled
- SSO IdP: Ensure you are OK with having a custom Identify Provider (IdP) for handling authentication on Flex instead of a SSO provider on the market. As you can only have one IdP on Flex, it has to be custom one to handle mobile authentication.
- Flex Pricing model: your agents will have to be online all the time on Flex if they want to receive Push Notifications once there is a new chat. Therefore, we recommend you use the Named User Pricing and not the Active User Hour pricing model
High-level design
Let's have a look at how this project is built with Twilio products:
Authentication process
This diagram shows the steps in the authentication process for Flex Mobile.
- Agent opens the Flex Mobile app
- Has the Agent logged into Flex in the last hour? If this is the case, a valid Flex token stored on the agent's device will be used, and the flow will jump directly to the last step.
- Has the Agent logged into Flex in the last 7 days? If this is the case, a valid long-lived token on the agent's device will be used to skip the manual authentication flow.
- Otherwise, a manual authentication flow will begin. It uses Twilio Verify to send a one-time password to the Agent via SMS.
- Once the Agent is validated (either via long-lived token or via the manual authentication flow), a Function will be called to store a fresh new long-lived token with Sync, forcing it to update. This long-lived token update after every login is important for edge cases where the Agent has 2 cellphones and loses (or sells) one of them: The latest device to log into Flex will de-authenticate older devices automatically.
- Sync stores the long-lived token for 7 days. Meaning, as long as the Agent logs in every week, he or she will never have to go through the manual authentication flow again.
Webhooks
Webhooks are responsible for processing events from Twilio when a customer call or sends an SMS to your Contact Center. You can use them to send a Push Notification or forward the call to the Agent, for example.
- Once a customer sends a message or makes a call, one of the two events will be triggered:
onMessageAdded(for Conversations) orReservationCreated(for TaskRouter); - These events will call a Function (webhook). At this point, if the Agent is not "Available on Mobile", the process dies because (most likely) the Agent is using Flex on desktop, and does not want to receive notifications on his or her mobile as well
- This function evaluates whether it is a Chat or a Call
- For Chat, a Push Notification will be sent to Firebase
- For Calls, the Function will upgrade the task attributes to include the call into a Conference with the Agent (and Twilio internally will call the agent via the PSTN)
Mobile App
The App is a React Native project, based on Expo. Expo is an awesome open-source platform for making universal native apps for Android and iOS in a straightforward way.
It does use the same libraries and APIs that Flex uses – TaskRouter, Conversations, Flex Interactions APIs – which makes this project fully compatible with Flex, including Flex Insights, which will work out-of-the-box.
Technically, Flex Mobile is just "the normal Flex using a new Activity called Flex on Mobile". The simplicity of the concept makes it fully compatible with Flex.
For now, Flex Mobile was built and tested only on Android devices. That does not mean iOS won't work, but you will have to build the Push Notification part for iOS if you want to complete the App's functionality on Apple devices.
Installing Flex Mobile
Cool, let's get started!
Clone the Flex Mobile repo. You will see there are 4 folders there – we will need to install and deploy them individually.
Let's dive into each of these folders:
Step 1 of 4 - flex-plugin-sso
- What is it? The custom Flex Plugin to handle the authentication.
- Why do you need this? On Mobile, we need a long-lived token feature. On the Desktop, Flex has a token update logic that renews your token hourly. This token update logic on Desktop works perfectly, but on Flex Mobile we need to handle the app being completely closed between conversations. When an agent reopens the app, we don't want to push them down the authentication path every time.
- Installing: Follow the instructions on how to install Flex Plugin SSO here and at the end, you should be able to add yourself (your cellphone number) to test if you can log in on Flex Desktop (yes, desktop login, we aren't handling a mobile case yet)
Step 2 of 4 - install-script
- What is it? This script needs to be executed once for your Flex Instance. It just creates a new activity called "Flex for Mobile".
- Why do you need this?
- Flex needs a way to know if the Call should be sent to the Agent's cellphone or Desktop
- Flex should only send a Push Notification to an Agent's cellphone if they are working on mobile
- Supervisors need to be able to create custom reports in Flex Insights, separating the view and metrics of the agents on Desktop from the ones on Mobile (for example, "Average handle time" and other metrics are completely different on these devices)
- Installing: Follow the instructions here on how to execute, this step is straightforward.
Step 3 of 4 - react-native
- What is it? This is a React Native project.
Fun fact: I never had experience with React Native before this project, and Expo made my onboarding journey a whole easier. As long as you have experience with React, you should be able to pick up React Native. - Why do you need this? This is the mobile app itself that will run on Agent mobile phones.
- Installing: Follow the instructions here on how to install and execute it locally.
Step 4 of 4 - twilio-functions
- What is it? These are the functions that need to be deployed on Twilio Functions.
- Why do you need this? These functions allow Push Notifications and Inbound Calls to work. These functions will be executed once the Agent sets "Available on Mobile". If the Agent is in any other Activity ("Offline" or "Available"), these functions won't run, avoiding sending Push Notifications while the Agent is working on Flex Desktop.
- Installing: Follow the instructions here on how to deploy them.
Wrapping up
That's it! Hope you enjoyed Flex Mobile as much as I enjoyed building it.
If you need any help, create an issue on Github and I will take a look afterward. I can't promise any response time on support though – if you need an SLA or help with the project, please contact a Twilio Partner to help.
Bruno Kilian is a Senior Solutions Engineer at Twilio. He's currently helping companies in EMEA design great customer engagement solutions powered by Twilio. Before, Bruno worked as Tech Lead in an Insurance Contact Center with ~ 600 agents in 4 countries. He can be reached on Linkedin or you can collaborate with him on Github.
