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

Salesforce Open CTI Lightning with Twilio Tutorial

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

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.

  1. Navigate to Setup inside Salesforce
  2. In the sidebar, navigate to Build > Customize > Call Center > Call Centers
  3. Select the newly created call center called Demo Call Center Adapter”
  4. 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

Salesforce Open CTI Lightning with Twilio

Salesforce Open CTI Lightning with 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.

Salesforce Open CTI Lightning with Twilio

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.

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

Salesforce Open CTI Lightning with Twilio

Salesforce Open CTI Lightning with Twilio

Add Open CTI to your Layout:

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

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

Salesforce Open CTI Lightning with Twilio

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

Salesforce Open CTI Lightning with Twilio

Salesforce Open CTI Lightning with Twilio

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

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

  1. 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]

    • 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.

    • 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!

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

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

  4. Not working in Classic 🙁 demoAdapterPage2 is not found.

  5. 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.

    • 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.

  6. 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?

    • 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?

  7. 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!

  8. 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!

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

  10. 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

Leave a Reply

Your email address will not be published. Required fields are marked *