Cómo implementar clic para marcar
Aunque Flex ofrece su propio teclado de marcación para permitirte ingresar números de marcación por tonos y realizar llamadas desde Flex, puede que desees que los usuarios tengan la posibilidad de hacer clic en un número de teléfono en un sistema fuera de Flex que inicie una llamada de teléfono mediante Flex.
Puedes implementar esta funcionalidad mediante las capacidades de marcación saliente nativas de Flex. Sigue leyendo si deseas aprender a implementar la función de clic para marcar.
La acción de llamada saliente
La acción StartOutboundCall
te permite definir tu propia lógica con el fin de activar las llamadas salientes y será clave a los efectos de implementar la funcionalidad de clic para marcar. StartOutboundCall
requiere de un número de teléfono de destino (después de todo, tenemos que llamar a alguien), pero también incluye parámetros adicionales para definir detalles como atributos de tarea personalizados y el ID del agente de llamada que debe realizar la llamada. Obtén más información sobre el marco de acciones y StartOutboundCall aquí.
Realizar una llamada desde un CRM integrado en Flex
Has integrado tu CRM mediante el desarrollo de un componente React. Quieres que los agentes puedan hacer clic en un número de teléfono en el plugin de CRM para iniciar una llamada saliente en Flex.
La acción de llamada saliente
En el código del plugin de Flex, puedes escribir una función como esta:
function clickToDial(destinationNumber) {
Flex.Actions.invokeAction("StartOutboundCall", {
destination: destinationNumber
});
}
Tu destinationNumber
puede ser un número de teléfono E.164 o una URI SIP con este formato: sip:<sip_uri>
. Una vez que hayas definido cómo deseas invocar a StartOutboundCall
, puedes establecer esta función como el atributo onClick
de cualquier número, botón u otro elemento de la interfaz de usuario en el que se pueda hacer clic. Por ejemplo, en el código del plugin, podrías tener un componente CustomerNumber
que tome la función de clic para marcar:
<CustomerNumber
number={props.customerNumber}
onClick={(e) => clickToDial(props.customerNumber, e)}
/>
Cuando un agente hace clic en el componente CustomerNumber
que se muestra, clickToDial
se ejecutará con el número del cliente y Flex invocará la acción StartOutboundCall
e iniciará la llamada por ti.
Personalizar la acción de llamada saliente
También podemos utilizar el marco de acciones para ampliar StartOutboundCall
. Por ejemplo, si queremos utilizar un ID de llamada específico (número de origen) en función del agente que realiza la llamada. Podemos utilizar replaceAction
para modificar esto en nuestro botón personalizado de clic para marcar, así como en el botón de llamada del componente de Flex Dialpad (el teclado de marcación de Flex):
async init(flex, manager) {
flex.Actions.replaceAction("StartOutboundCall", (payload, original) => {
var newPayload = payload;
newPayload.callerId = manager.workerClient.attributes.phone_number;
original(newPayload);
});
}
Ahora que hemos reemplazado StartOutboundCall
, todas las llamadas se realizarán con el ID de llamada especificado por el atributo phone_number
del trabajador de TaskRouter del agente.
Realizar una llamada cuando Flex está integrado en tu CRM
En este caso, has integrado Flex en tu CRM. Los agentes deben poder hacer clic en un número de teléfono en el CRM para iniciar Flex y realizar una llamada.
La función postMessage()
De forma predeterminada, la mayoría de los navegadores pueden utilizar la función Window.postMessage()
para comunicarse entre elementos iframe. Puedes utilizar la función postMessage()
para ayudar a Flex a comprender que se ha hecho clic en algún elemento del CRM y establecer una llamada saliente. El flujo podría verse de la siguiente manera:
1. Un agente hace clic en un elemento de la interfaz de usuario para iniciar una llamada.
2. Este evento de clic activa una llamada a la función postMessage()
que se comunica con Flex a través de un 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, *);
}
Ten en cuenta que en este ejemplo de código se utiliza *
(un comodín) como targetOrigin
, lo que significa que cualquier sitio malintencionado podría leer el contenido del mensaje. Utiliza siempre una URL específica en producción para mantener los datos seguros.
3. Flex recibe el mensaje, junto con la carga útil asociada con el mensaje:
// 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 inicia la llamada saliente.
Integraciones comunes
Algunas herramientas de CRM ofrecen sus propias API con la función de clic para marcar y solo hay que integrarlas en Flex. Por ejemplo, la API OpenCTI de Salesforce ofrece una serie de funciones para habilitar la marcación saliente.
Software | Plataforma de clic para marcar |
Salesforce | OpenCTI |
Zendesk | ZAF |
Seguiremos actualizando esta lista a medida que conozcamos las plataformas de clic para marcar de otros software.
Próximos pasos
Ahora que sabes un poco sobre cómo implementar el clic para marcar, puede que tengas curiosidad sobre el desarrollo en Flex. Te recomendamos:
- Comenzar a desarrollar un plugin de clic para llamar.
- Obtener más información sobre el marcador de llamadas salientes.
- Obtener más información sobre otras acciones disponibles en el marco de acciones.
¿Necesitas ayuda?
Todos la necesitamos a veces; la programación es difícil. Obtén ayuda ahora de nuestro equipo de soporte, o recurre a la sabiduría de la multitud visitando Stack Overflow Collective de Twilio o navegando por la etiqueta de Twilio en Stack Overflow.