Capturing audio and deriving real-time insights is not as hard as you may think. Twilio Media Streams provide real-time raw audio and give developers the flexibility to integrate this audio in the voice stack of choice. Couple that with the power of Symbl, and you can surface actionable insights with customer interactions through the Symbl WebSocket API.
What can you expect upon successful installation? A post-conversation email with topics generated, of action items, and a link to view the full summary output
This blog post will guide you step-by-step through integrating the Symbl WebSocket API into Twilio Media Streams.
Before we can get started, you’ll need
Setting up the Local Server
Twilio Media Streams use the WebSocket API to live stream the audio from the phone call to your application. Let’s get started by setting up a server that can handle WebSocket connections.
Open your terminal, create a new project folder, and create an
To handle HTTP requests we will use node’s built-in
http module and Express. For WebSocket connections we will be using ws, a lightweight WebSocket client for node.
In the terminal run these commands to install
To install the server open your index.js file and add the following code.
Save and run index.js with
Open your browser and navigate to
Your browser should show
Setting up the Symbl WebSocket API
Let’s connect our Twilio number to our WebSocket server.
First, we need to modify our server to handle the WebSocket messages that will be sent from Twilio when our phone call starts streaming. There are four main message events we want to listen for:
Modify your index.js file to log messages when each of these messages arrive at the Symbl server.
Now we need to set up a Twilio number to start streaming audio to our server. We can control what happens when we call our Twilio number using TwiML. We’ll create an HTTP route that will return
TwiML instructing Twilio to stream audio from the call to our server.
Add the following POST route to your index.js file.
For Twilio to connect to your local server we need to expose the port to the internet. We need to use ngrok to create a tunnel to our localhost port and expose it to the internet. In a new terminal window run the following command:
You should get an output with a forwarding address like this. Copy the URL onto the clipboard. Make sure you save the HTTPS URL.
Open a new terminal window and run your index.js file.
Setting up your Twilio Studio
Now that our WebSocket server is ready, the remaining configuration needed to join Symbl to your customer and agent conversations, will be done through your Twilio Studio Dashboard.
Navigate to Studio and create a new flow.
Twilio offers three different triggers that you can use to build out this integration. Depending on your use case, you can choose to begin the flow from either the message, call, or REST API triggers.
In our example, we want Symbl to join a voice conversation when a customer calls our agent, so we will be using the incoming call trigger to build out our flow.
First, use the
Fork Stream widget and connect it to the
Incoming Call trigger. In the configuration, the
URL should match your ngrok domain.
NOTE: Use the WebSocket protocol
wss instead of
http for the ngrok url.
Next connect this widget to the `Flex Agent` widget which will connect the call to the Flex Agent:
Finally, we need to end the stream once the call is complete. To do so, use the same `Fork Stream` widget but the configuration for `stream action` should be `Stop`.
Test the integration
To test the integration, navigate to the Flex tab and click on Launch Flex:
On your Flex dashboard, locate your Twilio phone number and call that number from your mobile device.
When the agent accepts the call, the audio will stream through the WebSocket API. And at the end of the call, you will get an email with the transcript and insights generated from the conversation.
What else can you do with the data?? You can fetch the data out of the conversation and with this output, you can push the data to downstream channels such as Trello, Slack, Jira.
Congratulations! You can now harness the power of Symbl and Media Streams to extend your application capabilities.