Salesforce Integration with Twilio Voice SDK

---

November 24, 2025

---

1. Problem Statement

Sales reps often spend time switching between Salesforce and external calling tools.
This creates friction in workflows:

• Manual dialing and logging.
• Lost call data or inconsistent follow-ups.
• No in-CRM real-time calling.

Objective
Integrate Twilio Voice SDK (JavaScript) inside Salesforce Lightning so agents can:

• Make and receive calls directly from Salesforce (browser-based calling).
• Access softphone controls (Call, Mute, Hangup).
• Automatically log call details into Salesforce.

All without writing any Apex or backend code — just using Twilio JS SDK + Salesforce Call Center configuration.

2. Step-by-Step Solution

Architecture Overview

Step 1 — Twilio Setup

Log in to Twilio Console.

Navigate to Programmable Voice → TwiML Apps.

Create a TwiML App and configure:

• Voice URL → webhook for Twilio to handle call instructions.

Generate:

• Account SID
• API Key SID
• API Key Secret
• TwiML App SID

Purchase a Twilio phone number capable of voice calls.

(You can generate a test Access Token directly from Twilio Console → Tools → Access Token Generator.)

Step 2 — Create Twilio Softphone UI in Salesforce

<apex:page showHeader="false" sidebar="false">
  <!-- Load Twilio JS SDK -->
  <script src="https://sdk.twilio.com/js/client/v1.13/twilio.min.js"></script>
  <script>
    let device;
    async function initTwilio() {
        // Use Access Token generated externally (Twilio Console or backend service)
        const token = 'PASTE_YOUR_TWILIO_ACCESS_TOKEN_HERE';

        device = new Twilio.Device(token, { debug: true });
        device.on('ready', () => console.log('Twilio Device Ready'));
        device.on('error', error => console.error('Twilio Error: ', error.message));
        device.on('connect', () => console.log('Call Connected'));
        device.on('disconnect', () => console.log('Call Disconnected'));
    }
    function makeCall() {
        const number = document.getElementById('phone').value;
        device.connect({ To: number });
        console.log('Dialing: ' + number);
    }
    function hangup() {
        device.disconnectAll();
    }
    window.onload = initTwilio;
  </script>

  <div style="padding: 20px; font-family: sans-serif;">
    <h2>Twilio Softphone</h2>
    <input type="text" id="phone" placeholder="+91XXXXXXXXXX" style="padding:5px;"/>
    <button onclick="makeCall()">Call</button>
    <button onclick="hangup()">Hang Up</button>
    <div id="status" style="margin-top:10px;"></div>
  </div>
</apex:page>

Step 3 — Create Call Center Definition

<?xml version="1.0" encoding="UTF-8"?>
<callCenter xmlns="http://soap.sforce.com/2006/04/metadata">
  <displayName>Twilio JS Softphone</displayName>
  <internalName>Twilio_JS_Softphone</internalName>
  <adapterUrl>https://yourInstance.salesforce.com/apex/TwilioSoftphone</adapterUrl>
  <version>1.0</version>
</callCenter>

Upload Steps:

1. Go to Setup → Call Centers → Import.
2. Upload this XML file.
3. Assign users to the Call Center.

Step 4 — Add Softphone to Lightning App (H3)

1. Go to App Manager → [Your Lightning App] → Edit.
2. Under Utility Bar Items, click Add → Open CTI Softphone.
3. Select Twilio JS Softphone as your adapter.
4. Save and refresh Lightning App.

Now the softphone appears in your bottom utility bar for all assigned users.

Step 5 — Call Logging (Optional Enhancement)

If you want to log call data (number, duration, etc.):

• Capture Twilio events (connect, disconnect) from the SDK.
• Use fetch() to call Salesforce REST endpoint (or Flow) to create a Task record.

	device.on('disconnect', conn => {
    const logData = { number: conn.parameters.To, status: 'Completed' };
    fetch('/services/apexrest/LogCall', {
        method: 'POST',
        body: JSON.stringify(logData),
        headers: { 'Content-Type': 'application/json' }
    });
});

3. Salesforce Limitations

4. Implication Screenshots (Add These to Your Blog)

1. Salesforce Call Center Configuration

2. Lightning Utility Bar

5. Conclusion

This Salesforce integration proves how flexible Salesforce can be when paired with modern communication tools like Twilio. By using the Twilio JS SDK directly in an LWC – without relying on Apex – we reduce complexity, remove governor – limit risk, and make call handling faster and more responsive for sales teams. Embedding Twilio inside the Salesforce Call Center UI gives reps a unified place to work: they can view customer details, place outbound calls, receive inbound calls, and log activity automatically, all without switching tabs. The result is a smoother workflow, better tracking, and a more connected experience inside the Lightning platform.

nsiQ