Skip to contentSkip to navigationSkip to topbar
Rate this page:
On this page

How to Implement Click-to-Dial


While Flex offers its own Dialpad to allow you to insert touch-tone numbers and place calls from Flex, you may want users to be able 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 how to implement click-to-dial.


The Outbound Call Action

the-outbound-call-action page anchor

The StartOutboundCall Action allows you to define your own logic to trigger outbound calls, and will be key to implementing 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.

(warning)

Warning


Making a call from a CRM embedded in Flex

making-a-call-from-a-crm-embedded-in-flex page anchor

You've embedded your CRM by developing a React component. 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 to invoke a Flex action and make an outbound call.

The Outbound Call Action

the-outbound-call-action-2 page anchor

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


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

Your destinationNumber can either be an E.164 phone number or a SIP URI in this format: sip:<sip_uri>. 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 element in your UI. For example, in your Plugin code, you might have a CustomerNumber component that takes the click-to-dial function:


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

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.

Customize the Outbound Call Action

customize-the-outbound-call-action page anchor

We can also use the Actions Framework to extend StartOutboundCall. For example, we might want to use a specific caller ID (from number) depending on the agent that is placing the call. Using replaceAction we can modify this for our custom click-to-dial button, as well as the Flex Dialpad component's call button:


_10
async init(flex, manager) {
_10
flex.Actions.replaceAction("StartOutboundCall", (payload, original) => {
_10
var newPayload = payload;
_10
newPayload.callerId = manager.workerClient.attributes.phone_number;
_10
original(newPayload);
_10
});
_10
}

Now that we have replaced StartOutboundCall, all calls will be made with the caller ID specified by the phone_number attribute on the agent's TaskRouter worker.


Making a call when Flex is embedded in your CRM

making-a-call-when-flex-is-embedded-in-your-crm page anchor

In this case, you've embedded Flex in your CRM. Agents should be able to click on a phone number in the CRM to launch Flex and make a call.

A flow diagram showing how an agent clicks a number in a CRM, which posts a message to invoke a Flex action.

The postMessage() function

the-postmessage-function page anchor

By default, most browsers can use the Window.postMessage() function(link takes you to an external page) 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 this:

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

_10
// Store the Flex iframe element in a variable
_10
const flexIframe = document.getElementById('flex').contentWindow;
_10
_10
function sendMessage(e) {
_10
// Prevent any default browser behaviour.
_10
e.preventDefault();
_10
_10
// Send a message to the iframe with the phone number
_10
flexIframe.postMessage(document.getElementById('phoneNumber').value, *);
_10
}

(warning)

Warning

Note that this code sample uses * (a wildcard) as the targetOrigin, meaning that any malicious site could read the contents of your message. Always use a specific URL in production to keep your data safe!

  1. Flex receives the message, along with the associated message payload:

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

  1. Flex initiates the outbound call.

Some CRM tools offer their own APIs for enabling click-to-dial, and simply need to be integrated with Flex. For example, Salesforce's OpenCTI API, for example, offers a series of functions for enabling outbound dialing.

SoftwareClick-To-Dial Platform
SalesforceOpenCTI
ZendeskZAF

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


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: