Category: Uncategorized

Twilio+Salesforce Integration(Lightning)

Twilio+Salesforce Integration(Lightning)

Salesforce provides Open CTI for integrating Salesforce with the third party telephony system, It uses salesforce call center.

With Open CTI, you can make calls from a softphone directly in Salesforce without installing CTI adapters on your machines. That’s how Open CTI connects to your third-party telephony system.

picture credit – salesforce documents

To implement Open CTI, it helps if you have a basic familiarity with CTI, JavaScript, Visualforce, web services, software development, the Salesforce console, and the Salesforce Call Center.

Salesforce separate Open CTI APIs for Salesforce Classic and Lightning Experience so you have to decide that where you want to implement the open CTI.

You connect to the API differently.

In Salesforce Classic : /support/api/42.0/interaction.js

In Lightning Experience: /support/api/42.0/lightning/opencti_min.js

So to start implementing CTI we have to first create call center in our organization that needs a call center definition file.

A call center definition file specifies a set of fields and values that are used to define a call center in Salesforce for a particular softphone. Salesforce uses call center definition files to support the integration of Salesforce CRM Call Center with multiple CTI system vendors.

Sample Call Center Definition File

Call center Definition XML
you can set reqSalesforceCompatabilityMode property to Classic_and_Lightning for using call center in any experience.
In CTI Adapter URL you have to set your visualforce page which will be treated as a softphone.

Then use this call center record as a lookup to user’s details who will use the CTI functionality.

Now you need to install Twilio package which has all the initial pages and controllers which will be used to make calls.

Quick Install: If you do not have the existing Twilio-Salesforce library installed, you can use this unmanaged package to install: v4.2.0 https://login.salesforce.com/packaging/installPackage.apexp?p0=04t1a000000AQzf

Now we have to create pages and their controller to use it as a softphone. you need to create these components in your salesforce org.

https://github.com/akashsenger/Twilio-Salesforce-Integration-Lightning

Configuration – Twilio platform Side

  1. Create a Twilio.com account, get your AuthToken and Secret.
  2.  In Twilio, go to Dev Tools > Twimil Apps > Create. Give the name of the App SalesforceClick2Dial, note the ApplicationSid.
  3. Buy one phone number in Twilio, you will need at least one phone number for CallerId, note the phone number.

Configuration – Salesforce Side

  1. Go to Custom Settings named TwilioConfig. Add a new record with the (AccountSid, AuthToken, ApplicationSid, CallerId) parameters created from the Twilio steps.
  2. Go to SalesForce Setup -> Develop -> Sites Create a new Site or use make sure Dial Visual Force page that is included:TwilioClick2Dial, Dial VisualForce Pages. You need to click on the label for the site to find the settings:
  3. On the settings page, you can choose which exact page is included. You are making sure the Dial page is included.
  4. When that page is included, you are enabling a salesforce site page to produce XML. We will add this URL to the Twilio Twiml app we created.

Add dial page in Twilio Twiml app

  1. After your Force.com Site is created, you can point your Twiml app at it. Navigate to Dev Tools > Twiml Apps > “SalesforceClick2Dial”
  2. Set the Request URL to your Site address, for example: http://twilioctidemo-developer-edition.na15.force.com/dial

 

Setting up Salesforce Call Center

The Call Center > CTI Adapter URL can simply be set to “/apex/TwilioClick2Dial”, DemoAdapterTwilio.xml has been updated accordingly.

  1. Locate the VisualForce pages that supports the softphone that was imported from the package (From Develop > Pages) TwilioClick2Dial Make sure to click on the preview page, not just the source code
  2. Click on the visual force page to find the VisualForce instance full path. For example: https://c.na15.visual.force.com/apex/TwilioClick2Dial – The Salesforce instance address will vary depending on your specific Salesforce login.
  3. Add this VisualForce page to you CallCenter configuration. Navigate to Setup > Create > Call Centers > Click2Dial call center. Edit the call center, and set the CTI Adapter URL to the visual force page address from the previous step.
  4. Press the Manage Users button in the Call Center, add your user to this Call Center. This is the last step! Now, when you navigate to a CTI compatible view in Salesforce, it will enable showing the Open CTI toolbar. Since the demo click2call code has no styling, the view is very basic.

 

You will know everything is setup correctly if you can:

  • See the Open CTI toolbar (If the toolbar fails to render, check that your browser is not blocking 3rd party cookies, or add an exception to allow cookies from the frame source e.g. c.your salesforce domain.visual.force.com)
  • See that phone numbers are clickable
  • When clicking a number, or entering a number to call, the call should be connected

Done!

Test this by navigating to any regular Contact record (or other places where the Call Center is deployed). You should see a very bare looking CTI Panel. You can also add a phoen number to dial, or create a new contact and click on the phone number to determine if the call is being dialed.