There are many reasons you might want to play a sound in the Flex UI (User Interface). For example:
- Ringing to indicate an incoming call task and alert the agent
- Sound notifications for new chat messages to alert an agent who may be handling multiple chats simultaneously
- Sound to indicate that participants have joined or left a conference
To implement sounds in some of these scenarios, a few workarounds are required in Flex. The Incoming call/SMS/chat ringer plugin for Twilio Flex helps contact center administrators set up an audio alert for the incoming Call, SMS, and Chat tasks to the agents. As of the writing of this blog, however, Flex does not natively support audio alert (ringer alert) for incoming tasks. (To track the addition of the browser ringer as a feature, visit the Flex Release Notes page.)
Twilio does provide the code example below for a browser to automatically ring when a Flex call comes in on their website. However, there is a problem with this code: it was designed to respond only to voice calls, not to other channels.
Copyright, Perficient 2022
There are two issues in the example code:
- The browser is notified when both an inbound call and an outbound call occur. Outbound calls should not ring the browser.
- There is no ringing for other channels such as SMS and Chat.
To fix this, we can automate the browser to ring for voice calls, SMS, and chat messages and fix the ringing on outbound calls by adding the inbound direction attribute to the example code.
The new improved code looks like this:
Copyright, Perficient 2022
The alerts are divided into 2 categories:
- Repeatable media (alertSound.loop = true) are played in a loop, like a phone ringing that goes on and on. The only way to stop repeatable media is to manually call the stop method.
- Non-repeatable media (smsSound.loop = false) are played once, like a beep or bleep. Non-repeatable media automatically stop after being played once.
In this code, the repeated audio file (ringing.mp3, in this example) plays until the worker in Flex accepts the voice task. If an SMS/Chat task is received, this code will play a one-time audio file (smsAlert.mp3, in this example).
To make this code work, you will need to do the following:
- Update the ringing.mp3 and smsAlert.mp3 audio file URL in lines 1 and 2, and
- Add your code to the init() function of your plugin.
For help adding this code to your hosted Flex instance, please see Creating Plugins for Twilio Flex.
Note: The audio file must be accessible by Twilio’s proxy servers. Local files on your desktop are inaccessible via these methods, but your audio file may be uploaded to Twilio Assets for use here.
If you are interested in Twilio Flex and need some guidance on maximizing your contact center’s efficiency, we can help.
Why Perficient?
We are a Twilio Gold Partner with a team of certified Twilio Flex engineers and more than 20 years of experience delivering unparalleled customer engagement and contact center experience solutions. For more information on our Twilio Flex practice and capabilities visit us on our Twilio partner page!
