Twilio Flex

Twilio Flex is a programmable contact center platform that gives businesses complete control over customer engagement with the speed and flexibility of the cloud. Businesses have the freedom to offer the exact contact center experience they want for their customers and agents, using Twilio Flex.

See also Twilio Video and Twilio Voice

Integration steps

callstats.io monitors and analyzes the performance of Twilio Flex real-time communications, enabling you to rapidly troubleshoot issues and deliver high-quality services to your customers.

Step 0: Clone the repo and host Twilio Flex on your domain

The repo (https://github.com/twilio/flex-ui-sample) contains the basic structure for a Twilio Flex UI. It is important to use this sample as callstats.io can only be integrated when Twilio Flex is a hosted solution.

Step 1: Include callstats.js and callstats-twilio-flex-shim.js to index.html file inside the public folder

  • Add the callstats.js and callstats-twilio-flex-shim.js to the HEAD tag. Please refer to our API page for more information on the dependencies. The order of importing the JS SDKs is very important 

<script src="https://api.callstats.io/static/callstats.min.js"></script>
<script src="https://api.callstats.io/static/callstats-twilio-flex-shim.js"></script>

If you are using require.js, you can use the configuration in our sample app on GitHub.

Step 2: Modify the react components for initializing callstats

In src/App.js add the following function inside the App class to initialize callstats. You can find theAppIDon the https://dashboard.callstats.io/apps/ page, and AppSecret under the security tab for that App.

componentDidMount (device) {
  const APP_ID = 'CALLSTATS_APPLICATION_ID'
  const APP_SECRET = 'CALLSTATS_APPLICATION_SECRET'
const userName = this.props.manager.workerClient.attributes.full_name
// add script to initialize callstats and start making preCallTest
window.callStats.initialize(APP_ID, APP_SECRET, userName)
window.callStats.on('preCallTestResults', window.preCallTestResultsCallback)
setInterval(() => window.callStats.makePrecallTest(), 120000) }

Step 3: Listen to the Flex events

Also in App.js, add a listener “afterAcceptTask” inside the render function to catch the conference events and data.

render() {
  const { manager } = this.props;
if (!manager) {
return null;
} // Insert the listener code below Flex.Actions.addListener("afterAcceptTask", (payload) => {
window.$callData = payload
}) // Listener code ends return ( <Flex.ContextProvider manager={manager}>
<Flex.RootContainer />
</Flex.ContextProvider> ); }

Setup the Single Sign-On (SSO)

When you host the Twilio Flex application, you need to configure the SSO (Single Sign-On) to login to your hosted Twilio instance.

https://www.twilio.com/docs/flex/configuring-single-sign-and-identity-provider-integration

Please follow the instructions given above and make sure you use your runtime domain(https://www.twilio.com/console/runtime/overview) instead of regular Twilio login.