Home / Integrations / Salesforce / Salesforce Open CTI Lightning with Twilio Tutorial

Salesforce Open CTI Lightning with Twilio Tutorial

The Moo Master May 12, 2017 Salesforce 17 Comments 16,112 Views

Contents

1 Install the Salesforce Packages:
- 1.1 Install the latest Twilio Helper Package
- 1.2 Install the Open CTI demo app
2 Update call center settings:
3 Assign your users to the call center:
4 Update the APEX code:
5 Add Open CTI to your Layout:
6 Test everything out:
7 Known Bugs:
8 Take away?

If you’re reading this then you’ve probably already read the Lightning Open CTI post on the Salesforce developer blog and wondering how the heck get outbound calling working with Twilio and the Salesforce Open CTI call center.

Disclaimer: I’m not a Salesforce Lightning dev, and would love for someone to fork and improve on the demo provided. Twilio has given everyone a great platform and there seems to be a large gap when it comes to “good” telephony solutions for Salesforce. Most providers charge a lot and have a minimum number of licenses for the most basic packages.

Install the Salesforce Packages:

Both of the follow packages are unmanaged but will take only minutes to get installed in your Salesforce instance.

Install the latest Twilio Helper Package

https://login.salesforce.com/packaging/installPackage.apexp?p0=04t1a000000AQzf
(Github reference https://github.com/twilio/twilio-salesforce)

Install the Open CTI demo app

Update call center settings:

There was some confusion in the first tutorial which took me hours to debug, but as you can see below, the correct settings for your Twilio details should be listed in the below boxes.

Navigate to Setup inside Salesforce
In the sidebar, navigate to Build > Customize > Call Center > Call Centers
Select the newly created call center called “Demo Call Center Adapter”
Update the following fields
- CTI Provider should be TwilioProvider (no spaces)
- Provider Account/Auth Token can be both found on the main page of your Twilio account
- Provider Caller Number is the phone number you have bought in Twilio

Assign your users to the call center:

On the same page under your call center Twilio settings, add in the users which will be allowed to use this service.

Update the APEX code:

The code below is static and you can simply overwrite the existing code in the file to ensure you’ve got everything 100% correct. This will allow calls to be made to the “TwilioProvider” and not the Demo call which is set as default.

Navigate to Setup inside Salesforce
In the sidebar, navigate to Develop > Installed Packages
Select the package “Open CTI Lightning Demo Adapter”
Select View Componants
Scroll down and open “SoftphoneProviderHelper”
Edit the file and paste in the below code. Alternatively, you can simply remove the comments from the Twilio class.
Save the new changes to your config


public class SoftphoneProviderHelper {
    public class ProviderFactory
    {
        public ProviderFactory(){}
        public SoftphoneProviderHelper.SoftphoneProvider newProvider(String className)
        {
            Type providerImpl = Type.forName(className);
            if (providerImpl == null){
                return null;
            }
            return (SoftphoneProviderHelper.SoftphoneProvider) providerImpl.newInstance();
        }
    }

    public class CallResult {
        public String status;
        public String toNumber;
        public String fromNumber;
        public String accoundId;
        public String provider;
        public String error;
        public String duration;
        public DateTime startTime;
    }

    public interface SoftphoneProvider {
      CallResult makeCall(String account, String token, String toNumber, String fromNumber);
    }

    /*
     * Example of a call provider, using the Twilio Helper Package
     */
    public class TwilioProvider implements SoftphoneProvider {
      public CallResult makeCall(String account, String token, String toNumber, String fromNumber) {

          TwilioRestClient client = new TwilioRestClient(account, token);

          Map<String,String> params = new Map<String,String> {
                  'To'   => toNumber,
                  'From' => fromNumber,
                  'Url' => 'http://twimlets.com/holdmusic?Bucket=com.twilio.music.ambient'
              };
          TwilioCall call = client.getAccount().getCalls().create(params);
          CallResult result = new CallResult();
          result.status = call.getStatus();
          return result;

         
        }
    }
}

public class SoftphoneProviderHelper {

public class ProviderFactory

{

public ProviderFactory(){}

public SoftphoneProviderHelper.SoftphoneProvider newProvider(String className)

{

Type providerImpl = Type.forName(className);

if (providerImpl == null){

return null;

}

return (SoftphoneProviderHelper.SoftphoneProvider) providerImpl.newInstance();

}

public class CallResult {

public String status;

public String toNumber;

public String fromNumber;

public String accoundId;

public String provider;

public String error;

public String duration;

public DateTime startTime;

}

public interface SoftphoneProvider {

CallResult makeCall(String account, String token, String toNumber, String fromNumber);

}

* Example of a call provider, using the Twilio Helper Package

public class TwilioProvider implements SoftphoneProvider {

public CallResult makeCall(String account, String token, String toNumber, String fromNumber) {

TwilioRestClient client = new TwilioRestClient(account, token);

Map<String,String> params = new Map<String,String> {

'To' => toNumber,

'From' => fromNumber,

'Url' => 'http://twimlets.com/holdmusic?Bucket=com.twilio.music.ambient'

};

TwilioCall call = client.getAccount().getCalls().create(params);

CallResult result = new CallResult();

result.status = call.getStatus();

return result;

}

Add Open CTI to your Layout:

For this you will need to be using Salesforce Lightning and a view with console.

Navigate to Setup inside Salesforce
In the sidebar, navigate to Apps > Manage Apps
Select your app which has the new Lightning Console, or create a new app
Add the “Open CTI Softphone” to your Utility bar

Test everything out:

If everything is working, you should now see “Phone” in your Utility bar. Simply click “Sign in” to start your testing.

Open up a contact and select a phone number field to test your dialing out

Known Bugs:

We’ve already noticed some bugs which you might want to make a note of.

If you see this error “Uncaught Error: Unable to make a call. Contact your admin. throws at components/c/callInitiatedPanel.js:57:37” It is either because the call has failed or there no associated contact has been found. Issue number 3 can be tracked on Github.
There seems to be some issues ending a call at times where the End button doesn’t in fact terminate the call.
Yet to figure out inbound calling (more development required)

Take away?

Even with the few bugs, seeing this sort of implementation is a really strong step in an easy way to setup the most basic outbound calling for your Salesforce users. Would love to hear what you think in the comments below and if anyone can make some other easy to follow guides on how to customize Salesforce’s Open CTI!

Was this Helpful ?
yes no

About The Moo Master

As today's world moves towards more cloud based solutions, it's not always easy to find an all-in-one solution to a business problem. We focus on business development. finding new, creative and innovative ways to use different IT systems to enhance and automate business processes. We're happy to share our knowledge and solutions we've come up with over the years to some of those unique IT/Business problems.

Check Also

WordPress form submissions to Salesforce custom object (web-to-any)

Contents1 Prepare CFDB JSON query1.1 Clean up contact form fields1.2 Prepare the JSON export query2 ...

17 comments

Eric Stephens
May 29, 2017 at 11:06 am

I’ve made some progress on a Twilio script that completes the example and connects a user’s phone with the destination. I’d like to collaborate with others on a Force.com classic version and make the TwiML generic. I have been unable to raise David on email. Are there others pursuing this? -Eric [email protected]

Reply
- The Moo Master
  May 29, 2017 at 11:18 am
  
  Hi Eric,
  
  I also haven’t been able to get a response from David. He does seem to be the guru in this area as well. I agree 100% that it would be good to have something generic and easy to use for SF classic and lightning. Classic is good, but everything is slowly moving towards LEX, so better development is pushed down that path at the same time.
  
  Would be great if there are some experts out there that can contribute and fork the current github repo.
  
  Reply
- Subhodeep
  October 30, 2018 at 4:19 am
  
  Hi All,
  
  I’ve followed all the above steps but facing the same issue which is mentioned in *Known Bugs:* section.
  
  Uncaught Error: Unable to make a call. Contact your admin. throws at https://alu–tfsb2–c.cs85.visual.force.com/components/c/callInitiatedPanel.js:57:37
  
  Please help me with fixing this issue!
  
  Thanks!
  
  Reply
sam
July 26, 2017 at 4:56 am

I just did it completely follow your guide. but it seems not work and no errors

Reply
- The Moo Master
  July 26, 2017 at 7:46 am
  
  Hi Sam,
  
  Do you see the incoming call in the twilio logs?
  If you can see the call, there could be a problem with your twilio configuration.
  
  Best,
  MooMaster
  
  Reply
Bryce
October 28, 2017 at 4:52 pm

Noticed you can’t edit the Apex code in production. Any suggestions or does anyone know the url to sue for connecting to twilio?

Reply
Nick
November 14, 2017 at 4:35 am

Not working in Classic 🙁 demoAdapterPage2 is not found.

Reply
- Thaisa
  February 6, 2018 at 4:42 pm
  
  I had the same issue: demoAdapterPage2 is not found.
  
  Please, someone could help me???
  
  Reply
  - The Moo Master
    February 6, 2018 at 5:10 pm
    
    Hi Thaisa,
    
    I haven’t tried this in classic for a long time now. I’m actually currently using https://appexchange.salesforce.com/appxListingDetail?listingId=a0N3A00000EJH4yUAH
    Which is the Amazon Connect configuration. Works perfect with a bit of playing with the configuration. Maybe worth a shot if you just need basic calling inbound/outbound. Pricing is about the same as what you would be paying for Twilio.
    
    Best,
    MooMaster
    
    Reply
Amith
November 18, 2017 at 1:04 am

Hi

I have installed open cti lightning as per guidelines but i cant get inbound calls. what are the changes we need to do for inbound calls.

Reply
- Bilal
  August 9, 2018 at 2:27 am
  
  Hi,
  
  I want to implement inbound call for open cti lightning but i am unable to figure it out how to implement this?
  
  Looking forward to your response.
  
  Reply
Fabian
August 31, 2018 at 3:46 am

Hey so finally was able to have everything “running” but when I make a call to a number (my mobile) and I pick up, i just hear music, what i need to change in order to allow to have a conversation?
the SoftphoneProviderHelper has this map parameter ‘Url’ => ‘http://twimlets.com/holdmusic?Bucket=com.twilio.music.ambient’ that is the music, so I am guessing this needs to be change?

Reply
- Gaurav
  March 21, 2019 at 2:15 pm
  
  Hi @Fabian: I was able to complete similar to what you achieved. Did you find out what we need to do further? How do we actually place a real call?
  
  Reply
Subhodeep Dey
October 30, 2018 at 4:10 am

I’ve followed the above guidelines but facing the same issue which is given in the Known Bugs section,

Uncaught Error: Unable to make a call. Contact your admin. throws at https://alu–tfsb2–c.cs85.visual.force.com/components/c/callInitiatedPanel.js:57:37

Please help! Need suggestions on how to fix it!

Thanks!

Reply
Subhodeep
October 30, 2018 at 4:17 am

Hi All,

I’ve followed all the above steps but facing the same issue which is mentioned in *Known Bugs:* section.

Uncaught Error: Unable to make a call. Contact your admin. throws at https://alu–tfsb2–c.cs85.visual.force.com/components/c/callInitiatedPanel.js:57:37

Please help me with fixing this issue!

Thanks!

Reply
DG
September 25, 2019 at 10:33 pm

Stuck at the same place. Any progress at your end folks?

Reply
DG
September 25, 2019 at 10:36 pm

I do get an outbound call but when I pick up the call, the only thing I hear is music, not sure what needs to be changed in Apex code or at Twilio end to make it work. Any help is appreciated. Thanks

Reply