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, *);
}

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.

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.