Objective

This guide shows you how to add a whisper announcement to calls routed to Twilio Flex Agents, where queue name is in the whisper announcement when an agent accepts a task.

Product

Twilio Flex 

Procedure 

In order to accomplish this you need to:

1. In a studio flow where a customer is selecting the different queue options (eg Support, Sales etc)  in the respective SendToFlex widget you would include an attribute for the queue chosen
   For example the Support queues SendToFlex widget you can add the attribute:

{"whisper":"Support"}

2. You will need to create 2 Twilio function.
3. The first Twilio function Whisper function see  below, this function needs to be made public, save and deploy

exports.handler = function(context, event, callback) {

  let twiml = new Twilio.twiml.VoiceResponse();

  twiml.say("The call is from the queue");
  twiml.say(event.queue);

  callback(null, twiml);
  
};

4. The second Twilio function (you can call it  launchWhisper) below will be called by a Twilio Flex Plugin. This Twilio function sample code below, this function needs to be made public save and deploy it:

exports.handler = async (context, event, callback) => {
  
  // Create a custom Twilio Response
  // Set the CORS headers to allow Flex to make an HTTP request to the Twilio Function
  const response = new Twilio.Response();
  response.appendHeader('Access-Control-Allow-Origin', '*');
  response.appendHeader('Access-Control-Allow-Methods', 'OPTIONS, POST, GET');
  response.appendHeader('Access-Control-Allow-Headers', 'Content-Type');


  console.log("Whisper is : ");
  console.log(event.whisper);


  console.log("Customer caller sid: ");
  console.log(event.call_sid);
  let cust_call = event.call_sid; 

  console.log("Conference sid is : ");
  console.log(event.conference.sid); 

  console.log("Participant worker: ");
  console.log(event.conference.participants.worker);


  const client = context.getTwilioClient();


  let confSid = event.conference.sid;
  let workerCallsid = event.conference.participants.worker;
  let whisperparam = event.whisper;


  async function updateParticipant() {
    const participant = await client
    .conferences(confSid)
    .participants(workerCallsid)

    .update({ announceUrl: `https://xxxxx.twil.io/Whisper?queue=${whisperparam}` }); //the second Twilio function see below
   console.log(participant.accountSid);
  }
  
  await updateParticipant();
  
  callback(null, response);
};

5. You will need to create a Twilio Plugin and add the following in the plugin to call/fetch the Twilio function launchWhisper within the listener for the 'taskAccepted' event

manager.events.addListener("taskAccepted", (task) => {
        console.log("new task received!");
        console.log(task.attributes);

        const options = {
          method: 'POST',

          body: JSON.stringify(task.attributes),
          headers: {
           'Content-Type': 'application/json;charset=UTF-8'
        }
       };

      // Fetch Twilio function
      fetch('https://xxxxxxxxx-5474.twil.io/launchWhisper', options) //old one was called ok but twiml in function did not occur
       .then(resp => resp.json());

     }
  );

Additional Information

It's recommend the customer test this in your test Flex environment you can run the plugin locally to see that it runs as you expect before releasing it to your production environment.