Como implementar o Clique para ligar

Embora o Flex ofereça seu próprio teclado de discagem para permitir que você insira números de tons de toque e faça chamadas do Flex, talvez você queira que os usuários possam clicar em um número de telefone em um sistema fora do Flex que inicie uma chamada telefônica usando o Flex.

Você pode implementar essa função usando os recursos de discagem ativa nativa do Flex. Continue a leitura para saber como implementar a função Clicar para ligar.

A ação de chamada outbound

A ação StartOutboundCall permite que você defina sua própria lógica para acionar chamadas outbound e será fundamental para implementar a funcionalidade de clicar para ligar. StartOutboundCall requer um número de telefone de destino (afinal de contas, precisamos ligar para alguém), mas também inclui parâmetros adicionais para definir detalhes como atributos personalizados de tarefa e o ID do autor da chamada que deve fazer a chamada. Saiba mais sobre a estrutura de ação e StartOutboundCall aqui.

Fazer uma chamada a partir de um CRM incorporado no Flex

Você incorporou seu CRM desenvolvendo um componente React. Você quer que os agentes possam clicar em um número de telefone no Plugin do CRM para iniciar uma chamada outbound no Flex.

A ação de chamada outbound

Em seu código do plugin Flex, você pode escrever uma função como esta:

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

O destinationNumber pode ser um número de telefone E.164 ou um URI SIP neste formato: sip:<sip_uri>. Depois de definir como deseja chamar StartOutboundCall, você pode definir essa função como o atributo onClick para qualquer número, botão ou outro elemento clicável em sua IU. Por exemplo, em seu código de plugin, você pode ter um componente CustomerNumber que usa a função clicar para ligar:

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

Quando um agente clica no componente renderizado CustomerNumber, o clickToDial é acionado com o número do cliente, e o Flex invoca a ação StartOutboundCall e inicia a chamada para você.

Personalizar a ação de chamada outbound

Também podemos usar a Estrutura de ações para estender o StartOutboundCall. Por exemplo, podemos usar um ID do autor da chamada específico (do número) dependendo do agente que está fazendo a chamada. Ao usar replaceAction, podemos modificar isso para nosso botão personalizado de clicar para ligar, bem como para o botão de chamada do componente Flex Dialpad:

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

Agora que substituímos StartOutboundCall, todas as chamadas serão feitas com o ID do autor da chamada especificado pelo atributo phone_number no funcionário do TaskRouter do agente.

Fazer uma chamada quando o Flex está incorporado ao seu CRM

Nesse caso, você incorporou o Flex em seu CRM. Os agentes devem ser capazes de clicar em um número de telefone no CRM para iniciar o Flex e fazer uma chamada.

A função postMessage()

Por padrão, a maioria dos navegadores pode usar a função Window.postMessage() para se comunicar entre elementos iframe. Você pode utilizar o postMessage() para ajudar o Flex a entender que algo foi clicado em seu CRM e estabelecer uma chamada outbound. O fluxo pode ser semelhante a este:

1. Um agente clica em um elemento da IU para iniciar uma chamada.
2. Este evento de clique aciona uma chamada postMessage() que se comunica com o Flex através de um iframe:

// Armazenar o elemento iframe do Flex em uma variável
const flexIframe = document.getElementById('flex').contentWindow;

function sendMessage(e) {
  // Impedir qualquer comportamento do navegador padrão.
  e.preventDefault();
  
  // Enviar uma mensagem para o iframe com o número de telefone
  flexIframe.postMessage(document.getElementById('phoneNumber').value, *);
}

3. O Flex recebe a mensagem com o payload da mensagem associada:

// Flex em um iFrame
if (window.self !== window.top) {
  // Definir uma função para o que fazer quando uma mensagem de postMessage() chegar
  function receiveMessage(event) {
    // Invocar a ação de chamada outbound do Flex
    flex.Actions.invokeAction("StartOutboundCall", {destination: event.data});
  }

  // Adicionar um ouvinte de evento para associar os dados de postMessage() à lógica receiveMessage
  window.addEventListener("message", receiveMessage, false);
}

4. O Flex inicia a chamada outbound.

Integrações comuns

Algumas ferramentas de CRM oferecem suas próprias APIs para habilitar o recurso de clicar para ligar e simplesmente precisam ser integradas ao Flex. Por exemplo, a API OpenCTI do Salesforce, por exemplo, oferece uma série de funções para ativar a discagem externa.

Esta lista continuará a ser atualizada à medida que aprendermos sobre as plataformas de clicar para ligar de outros softwares.

Próximas etapas

Agora que você tem algumas ideias sobre como implementar o recurso de clicar para ligar, talvez esteja curioso sobre os detalhes da criação com o Flex. Por que não...

• Começar a criar um plugin clique para ligar.
• Saiba mais sobre o discador de saída.
• Saiba mais sobre outras ações disponíveis na Estrutura de ações.