You are viewing the Spanish (Mexico) site, but your language preference is set to English. Switch to English site →

Menu

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.

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

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.

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

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:

Calificar esta página:

¿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.

Gracias por tus comentarios.

Selecciona los motivos de tus comentarios. La información adicional que nos brindas nos ayuda a mejorar nuestra documentación:

Enviando tus comentarios…
🎉 Gracias por tus comentarios.
Se produjo un error. Inténtalo de nuevo.

Gracias por tus comentarios.

thanks-feedback-gif