Menu

How to Implement Click to Dial

Public Beta Feature

The Flex Dialpad is offered as a Public Beta Feature and has some important limitations.

Note that the Flex Dialpad and associated features are only available in Flex UI v.1.18.0 and onwards

While Flex offers a native Dialpad that allows you to insert touch-tone numbers and place calls from Flex, you might want to click a phone number in a system outside of Flex that launches a phone call using Flex.

You can implement this functionality using Flex's native outbound dialing capabilities. Read on to learn some of the fundamentals of implementing click-to-dial!

The Outbound Call Action

The StartOutboundCall Action allows you to define your own logic to trigger outbound calls, and will be key to implementing any version of Click to Dial functionality. StartOutboundCall requires a destination phone number (we have to call somebody, after all!), but it also includes additional parameters for defining details like custom Task attributes and the caller ID that should make the call. Learn more about the Action Framework and StartOutboundCall here.

Making a call from a CRM embedded in Flex

You've embedded your CRM by developing a React components. You want Agents to be able to click on a phone number in the CRM Plugin to start an outbound call in Flex.

A flow diagram showing how an agent clicks a number, which causes plugin code to invoke a Flex action and make an outbound call

The Outbound Call Action

In your Flex Plugin code, you might write a function like the following:

function clickToDial (destinationNumber) {
    Flex.Actions.invokeAction("StartOutboundCall", {
        destination: destinationNumber
    });
  };

Once you've defined how you want to invoke StartOutboundCall, you can set this function as the onClick attribute for any number, button, or other clickable UI element. For example, in your Plugin code, you might have a CustomerNumber component that takes the click to dial function:

<CustomerNumber
    number={props.customerNumber}
    onClick={(e) => clickToDial(props.customerNumber, e)}
/>

When an agent clicks on the rendered CustomerNumber component, clickToDial will fire with the customer number, and Flex will invoke the StartOutboundCall action and initiate the call for you.

Making a call when Flex is embedded in your CRM

In the reverse, you’ve embedded Flex in your CRM. Agents should be able to click on a phone number in the CRM to launch Flex and create a call.

A flow diagram showing how an agent clicks a number in a CRM, which posts a message that your plugin code uses to invoke a Flex action and make an outbound call

PostMessage()

By default, most browsers can use the PostMessage() Web API to communicate between iframe elements. You can utilize the PostMessage() to help Flex understand that something was clicked in your CRM and establish an outbound call. The flow might look like the following:

1. An agent clicks an element to start a call
2. This click event triggers a postMessage() that communicates to Flex through an iframe:

// Store the Flex iframe element in a variable
const flexIframe = document.getElementById('flex').contentWindow;

function sendMessage(e) {
  // Prevent any default browser behaviour.
  e.preventDefault();
  // Send a message to the iframe with the phone number.
  flexIframe.postMessage(document.getElementById('phoneNumber').value);
}

3. Flex receives the message, along with the associated message payload

// Flex in an iFrame
if (window.self !== window.top) {
      // Define a function for what to do when a message from postMessage() comes in
      function receiveMessage(event) {
        // Invoke the Flex Outbound Call Action
        flex.Actions.invokeAction("StartOutboundCall", {
          destination: event.data
        });
      }

      // Add an event listener to associate the postMessage() data with the receiveMessage logic
      window.addEventListener("message", receiveMessage, false);
    }

4. Flex creates the outbound call!

Common Integrations

Some tools offer their own APIs for enabling click-to-dial, and simply need to be integrated with a tool like Twilio Flex. For example, Salesforce’s OpenCTI API offers a series of functions for enabling outbound dialing, which you could use to integrate with Flex.

Software Click-To-Dial Platform
Salesforce OpenCTI
Zendesk ZAF

This list will continue to be updated as we learn about other software's click-to-dial platforms.

Next Steps

Now that you've got some ideas for how to implement Click to Dial, you may be curious about the details of building with Flex. Why not...

Rate this page:

Thanks for rating this page!

We are always striving to improve our documentation quality, and your feedback is valuable to us. How could this documentation serve you better?

Need some help?

We all do sometimes; code is hard. Get help now from our support team, or lean on the wisdom of the crowd browsing the Twilio tag on Stack Overflow.