Search code examples
twiliotwilio-functionstwilio-flex

Dialpad plugin-in for Twilio Flex displays an error

I'm trying to use this dialpad plugin for Twilio Flex to make phone calls. I'm newbie on this so maybe I'm forgetting something to do in the process. I will detail the steps I made:

git clone https://github.com/lehel-twilio/plugin-dialpad.git
npm install
cp public/appConfig.example.js public/appConfig.js

appConfig.js file code:

// your account sid
var accountSid = 'ACXXxxxxXXXXxxxxxxXXXXXXxxxx35'; //my accountSid

// set to /plugins.json for local dev
// set to /plugins.local.build.json for testing your build
// set to "" for the default live plugin loader

var pluginServiceUrl = '/plugins.json';

var appConfig = {
  pluginService: {
     enabled: true,
     url: pluginServiceUrl,
  },
  sso: {
    accountSid: accountSid
  },
  ytica: false,
  logLevel: 'debug',
  showSupervisorDesktopView: true,
};

I deploy functions according to github docs: Hold Call (/hold-call), Create New Task (/create-new-task), Cleanup Rejected Task (/cleanup-rejected-task), Flex Dialpad Add Conference Participant (/add-conference-participant)

enter image description here

According to plugin-dialpad documentation, all these functions have the option Check for valid Twilio signature unchecked:

enter image description here

Configuring Functions :

enter image description here

Task channel 'custom1' is created:

enter image description here

I added my phone number as an attribute value to every Worker:

enter image description here

And finally, I added the filter:

enter image description here

At the beginning it displayed this error when I tried to make a phone call:

enter image description here

I could fix it applying CORS headers in Create New Task function which It's showing the error, I changed this line: "Access-Control-Allow-Origin":"https://flex.twilio.com":

enter image description here

But now it shows me an error in dialpad-plugin.js and I still can't make phone calls:

enter image description here

  • Flex version 1.11.1 (same happens with 1.10.0)
  • plugin-dialpad version 4.0

How can I fix it? I'd like your help.

Solution

  • Ok, finally I could fix my problem.

    First, I had to create Twilio functions according to github: https://github.com/lehel-twilio/plugin-dialpad/tree/master/src/functions

    After that, when I make a phone call it's showing me an error message on Twilio Debugger: Got HTTP 500 response from https://*****.twil.io/call-outbound-join Error: 'From' phone number not verified.

    My Twilio Phone Number is from another country, so I fixed adding this additional code on "Create New Task" function which allows so add "+" sign automatically:

    const numbx = "+" + event.From; const wnumbx = numbx.replace(/\s/g,'');
console.log(wnumbx); const numbt = "+" + event.To; const wnumbt = 
numbt.replace(/\s/g,''); console.log(wnumbt);

client.taskrouter.workspaces(workspace) .tasks .create( { attributes: JSON.stringify( { to: wnumbt, direction: 'outbound', name: 'MY COMPANY', from: wnumbx,...

    This is not necessary on Twilio phone numbers of US.